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

要使用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"/>&nbsp;&nbsp;&nbsp;维修工管理 >维修工增加</div>"
        });
    });

• 子页面

$("#typeName").click(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中的全局变量