使用layui的一点心得【更新中】
2018-01-18 20:27
816 查看
要使用layui的模块时,需先加载所需模块
想要select值变更执行方法,不能用
执行一个方法,要更新表单中的数据时,要执行一步更新渲染,
form.render(); //更新全部
form.render(‘select’); //刷新select选择框渲染
在方法前加window,即
子页面
孙子页面(由子页面上的按钮点开,实际上是父页面下的子页面)
==parent.layer.getChildFrame(‘#typeName’, 1).val(data.name);==
==parent.layer.getChildFrame(‘#telephone’, 1).val(data.mobile);==
子页面的index为1,找到该页面上的选择器,然后赋值
注意:方法前都要加parent,parent为js中的全局变量
layui.use(['form'], function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 var $ = layui.$; //但是,如果你的HTML是动态生成的,自动渲染就会失效 //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init(); //form.render(); });
想要select值变更执行方法,不能用
$('xxx').change(function)...的方式,要使用layui定义的事件监听,例如
form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 });
执行一个方法,要更新表单中的数据时,要执行一步更新渲染,
form.render(); //更新全部
form.render(‘select’); //刷新select选择框渲染
form.on('select(level)',function (data) { var level = $("#level").val(); $.ajax({ url:'../../baseManage/place/changeLevel.action', type:'get', data:{ level:level }, dataType:'json', success:function(data) { //成功 if(data.status == 'SUCCESS') { if(data.result != null && data.result != '') { $.each(data.result,function (i, place) { if(level == '01') { }else if(level == '02') { alert(place.name) $('#firstLevelId').append('<option value="'+place.id+'">'+place.name+'</option>'); alert('<option value="'+place.id+'">'+place.name+'</option>') }else if('level == 02') { $('#firstLevelId').append('<option value="'+place.id+'">'+place.name+'</option>'); } }) form.render('select');//刷新select选择框渲染 } } } }) })
在使用layui的submit 异步提交监听时,一定要在最后加return false
//提交 form.on('submit(submitButton)',function (data) { alert(JSON.stringify(data.field)); var maintenancePlace = JSON.stringify(data.field); $.ajax({ url : '../../baseManage/place/create.action', type : 'post', dataType : 'json', contentType :"application/json", data : maintenancePlace, success : function (data1) { alert(11111111) } }) return false; })
在一个js中引公共js中的方法时,需按如下格式定义:
layui.use(['form'], function () { var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 var $ = layui.$; //更改一级场所联动二级场所 window.changeParentPlace = function (parentId,tagId) { $.ajax({ url:'../../baseManage/place/changeParentPlace.action', type:'get', data:{ parentId:parentId }, dataType:'json', success:function (data) { if(data.result != null && data.result.length != 0) { $.each(data.result,function(i,place) { $("#" + tagId).empty(); $("#" + tagId).append('<option value="'+place.id+'">'+place.name+'</option>') }) } form.render('select'); //刷新select选择框渲染 } }) } });
在方法前加window,即
window.changeParentPlace = function (parentId,tagId)....
如何给兄弟页面赋值:通过index索引找到兄弟页面的元素赋值
父页面//点击添加按钮 $("#addButton").click(function() { layer.open({ type: 2, area: ['420px', '400px'], fixed: false, //不固定 maxmin: true, content: ctx + '/baseManage/worker/createpage', title:'<div class="bpms_tit"><img src="../../images/images/ico_7.png"/> 维修工管理 >维修工增加</div>' }); });
子页面
$("#typeName").clic a6de k(function () { parent.layer.open({ id:'create', type: 2, area: ['900px', '600px'], fixed: false, //不固定 maxmin: true, content: ctx + '/baseManage/worker/staffpage', title:'' }); })
孙子页面(由子页面上的按钮点开,实际上是父页面下的子页面)
//监听工具条 table.on('tool(dataTable)', function(obj){ var data = obj.data; if(obj.event === 'choose'){ alert(JSON.stringify(data)); //关键:通过index给兄弟页面传递赋值
==parent.layer.getChildFrame(‘#typeName’, 1).val(data.name);==
==parent.layer.getChildFrame(‘#telephone’, 1).val(data.mobile);==
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); } });
子页面的index为1,找到该页面上的选择器,然后赋值
注意:方法前都要加parent,parent为js中的全局变量
相关文章推荐
- Executors.newFixedThreadPool和ArrayBlockingQueue一点使用心得
- ASP.NET MVC2的一点使用心得
- 关于使用OpenGL的一点心得
- 关于rand和srand函数使用的一点心得
- 关于UILabel的一点使用心得
- 关于fctix使用的一点心得
- eclipse不能自动更新的问题;js中的for in使用注意的一点
- RadioButton和RadioGroup一点使用心得
- C++语言学习的一点心得(蜻蜓点水,后面会不断更新学习体会)
- Unity5的AssetBundle的一点使用心得
- C#关于"该进程无法访问文件,因为该文件正由另一进程使用"的错误的一点心得(示例)
- 关于JavaScript的一点使用心得。
- 初次使用Winform抓取数据的一点心得
- Instruments的一点使用心得
- Winform(C#.NET)自动更新组件的使用及部分功能实现(一点改进功能)
- Qt中使用信号和槽的一点心得
- Origin8.0使用心得(不定时更新)
- Python的一点使用心得
- JMS(Jboss Messaging)的一点使用心得(十二)多线程的ClassLoader
- 在32位系统下使用MongoDB的一点心得