Layui框架表格渲染，分页，子父页面传值，表单赋默认值等

一 layui官网 https://www.layui.com

二  组件使用及赋值

1.表格渲染

<form class="layui-form layui-col-md12">
    <table id="roleList" lay-filter="roleList"></table>
</form>

layui.use(['form','layer','table'], function(){
    var table = layui.table,
        layer = layui.layer,
        form = layui.form,$=layui.$;
    table.render({
        elem: '#roleList'  //绑定table id
        ,url:'role/initTable'  //数据请求路径
        ,cellMinWidth: 100
        ,cols: [[
            {field:'name', title: '角色名称',width:178,align:'center', sort: true}
            ,{field:'description',align:'center', title: '角色描述',sort: true}
            ,{ width:250, align:'center',title:'操作', toolbar: '#barDemo'}//一个工具栏
        ]]
        ,page: true  //开启分页
        ,limit:10   //默认十条数据一页
        ,limits:[10,20,30,50]  //数据分页条
        ,id: 'reload'
    });
    //监听搜索
    form.on('submit(search)', function(data){
        var field = data.field;
        table.reload('reload', {
           where: field
        });
    });
    //监听工具条
    table.on('tool(roleList)', function(obj){
        var data = obj.data;
        if(obj.event === 'auth'){
            openChildWin("url",'title',1200,600);
        }
    });
});

2.子页面向父页面传值

父：

layer.open({
    type: 2
    ,title: '选择菜单'
    ,content: "permission/selectMenuTree"
    ,maxmin: true
    ,area: ['600px', '500px']
    ,btn: ['确定', '关闭']
    ,yes:function (index, layero) {
        var menuInfo= layero.find('iframe')[0].contentWindow.formData();
        $("#menuName").val(menuInfo.menuName);
        $("#menuId").val(menuInfo.menuId);
        layer.close(index);// 关闭弹窗
    }
});

子：

var formData = function () {

    var len = $("table.layui-table tr:not(:first)").find(".layui-form-checked").length;
    if (len == 0) {
        layer.msg("请至少选择一条数据");
        return false;
    } else if (len > 1) {
        layer.msg("只能选一条数据");
        return false;
    }
    var id="";
    var text="";
    $("table.layui-table").find("tr:not(:first)").each(function () {//遍历所有的非标题tr

        if ($(this).find(".layui-form-checkbox").hasClass("layui-form-checked")) {
            var cb = $(this).find("input[type='checkbox']");
            if (cb.attr('checked') == 'checked') {
                id = cb.val();
                text=$(this).find("cite").text();//获取菜单名称
            }
        }

    });
    return {"menuId":id,"menuName":text};

}

3.父页面向子页面传值

父：

layer.open({
    type: 2
    , title: "更新排班"
    , content: 'planTurnRule/toUpdate?unitId=' + selectedUnitId
    , area: ['1000px', '500px']
    , btn: ['确定', '取消']
    , yes: function (index, layero) {
        layero.find('iframe')[0].contentWindow.formData();
    }, success: function (layero, index) {
        // 获取子页面的iframe
        var iframe = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
        var obj = {"selectData": data, "planClassCodes": planClassCodes};
        iframe.child(obj);
    }
});

子：

var parentData="";

function child(obj){
    parentData=obj;
    var rule = parentData.selectData;
    var planClassCodes= parentData.planClassCodes;
    if(rule == null ) {
        alert("请选择要修改的数据！");
        return;
    }
    $("#turnDateInput").val(rule.turnDate);
    $("#ruleOldDate").val(rule.turnDate);

    $("select[name='dutys']").val('');
    var clsCode = null;
    var dutyId = null;
    for(var i=0; i<planClassCodes.length; i++) {
        clsCode = null;
        dutyId = null;
        for(var a in rule) {
            if(a == "dutyId_" + planClassCodes[i]) {
                clsCode = planClassCodes[i];
                dutyId = rule[a];
                break;
            }
        }

        if(!clsCode) {
            continue;
        } else {
            $("#cls_"+clsCode).val(dutyId);
            layui.form.render('select','ruleForm');
        }
    }
}

4.表单赋默认值