Layui——疑难杂症总结

1、layui实现动态刷新select下拉框

layui.form.render('select');

//刷新所有
layui.form.render();

2、layui的table获取勾选checkbox的所有行数据

layui.table.checkStatus('table的id').data

3、layer中实现父页面刷新、父页面事件执行、关闭弹出层子页面

parent.location.reload(); //父页面刷新

window.parent.$("#search").click();//执行父页面的事件

var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index1); //再执行关闭

layer.closeAll('dialog');//关闭layer.confirm的弹出层

4、获取layer.open打开的子页面的元素标签

$("#add").on("click", function () {
    layer.open({
        type: 2,
        title: "新增",
        area: ["500px", "400px"],
        skin: 'layui-layer-molv',
        content: '/con/fun',
        success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            body.contents().find("#btnType").val('add');
            body.contents().find("#index").val(index);
            body.contents().find("#UPDATE").hide();
            }
         });
});

5、Layui的table中实现复选框是否启用和行改变颜色

//数据加载完后执行的时间
done: function(res, curr, count){
    //进行表头样式设置
    $('th').css({'font-weight': 'bold', 'font-size': '15','color': 'orange','background':'linear-gradient(#f2f2f2,#cfcfcf)'}); 
    //遍历整个表格数据       
    for(var i in res.data){    
        //获取当前行数据            
        var item = res.data[i];                
        // 01.如果ID等于30则复选框禁止选择
        if(item.ck1==30){
            //禁用当前
            $('tr[data-index=' + i + '] input[type="checkbox"]').prop('disabled', true);        
            //隐藏这个复选框
            $('tr[data-index=' + i + '] input[type="checkbox"]').parent('div').css('display', 'none');  
            //重新渲染一下chackbox      
            table.render('checkbox');
        }
        // 02.如果已结算则整行变绿色
        if(item.ck23=='ok'){
            $("tr[data-index='" + i + "']").attr({"style":"background:#99ff99"});  //将当前行变成绿色
        }
        // ……
    }
}

6、Layui弹窗

layer.open({
    type: 1,
    area: ["1000px", "600px"],
    title: '新增/编辑',
    shadeClose: false,
    content: $("#tree")//tree中的为某段div，其中包含需要显示在弹窗中的信息
});

7、Layui中的select选择器的change事件

//select选择器的change事件
form.on('select(test)', function (data) {
    if (data.value == 1) {
        $("#impTable").hide();
        $("#mytable").show();
        guid = "undefined";
    } else {
        $("#impTable").show();
        $("#mytable").hide();
    }
});

8、layui框架中的select加竖滚动条

.layui-form-select dl {
    max-height: 150px;
}

<select id="tableName" class="layui-form-select dl">
    <option value="">请选择一个值</option>
</select>