您的位置:首页 > 产品设计 > UI/UE

使用layui的一点心得【更新中】

2018-01-18 20:27 816 查看
要使用layui的模块时,需先加载所需模块

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中的全局变量
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  layui