layui部分用法小结

1、关于table翻页记住勾选项的用法
2、子页面/弹窗判断是否已打开tab页

1、关于table翻页记住勾选项的用法

个人使用的方法是定义一个全局变量，点击table的复选框触发事件，将选中数据记录到全局变量中；当翻新一页事，将最新页与全局变量做比较，若是存在则自动勾选。这里使用的是LAY_CHECKED属性来改变每一行的勾选状态

在外层定义全局变量

var tableChecked = {};

执行表格渲染的同事，在返回查询数据时跟全局变量做比较

table.render({
    elem: '#unReceivedList'
    ,url: 'unReceiptList' //数据接口
    ,loading: true//翻页加loading
    ,page: {
        groups: 10 //显示 10 个连续页码
    }
    ,limits:[10,20,30]
    ,request : {
        pageName: 'pageNo', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
    }
    ,parseData: function(res){ //res 即为原始返回的数据
        if (res.code === '0' &&  res.count > 0) { //判断状态和是否有数据
            //遍历该页数据与全局变量做比较，如果之前有选中该数据则改为默认选中
            for (var i = 0; i < res.data.length; i++) {
                if (tableChecked[res.data[i].recycleId]) {
                    res.data[i].LAY_CHECKED = true;
                }
            }
        }
        return {
            "code": 0, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.count, //解析数据长度
            "data": res.data //解析数据列表
        };
    }
    ,cols: [
        [ //表头
            {type: 'checkbox',fixed: 'left'}
            ...//其他内容
        ]
    ]
    ... //其他内容
});

监听checkbox事件，记录被勾选到的记录，便于翻页复现

table.on('checkbox(unReceivedList)', function(obj){
    var checkStatus = table.checkStatus('unReceivedList'); 
    if (checkStatus.isAll) {// 若是点击了全选则全部记录
        for (var i = 0;i<checkStatus.data.length;i++){
            tableChecked[checkStatus.data[i].recycleId] = checkStatus.data[i]
        }
    } else {//否则记录单个
        var length = Object.keys(obj.data).length;
        if(length === 0){
            return;
        }
        if (obj.checked) {
            tableChecked[obj.data.recycleId] = obj.data
        } else {
            delete tableChecked[obj.data.recycleId]
        }
    }
});

这样，记录下来的数据既可以用于翻页时复现，若是是用点击确认按钮需要显示勾选记录时，也可以在子页面读取该全局变量checkStatus用于数据展示。

图1

图2

2、子页面/弹窗判断是否已打开tab页

业务场景：在table行内容中有一个【查看详情】，点击查看详情需要打开新的父级别的tab

业务场景

var parentId=parent.$("#container_tab li[lay-id=" + id + "]").size();

其中，container_tab是父级tab的class，整个语句表示获取父级tab中指定id的大小，如果小于0，则表示尚未创建，这时候便可以创建；否则直接跳转

// 定义某一行特有id
var id = xxx;
var url = xxxx;
var h = $(window).height() - $(".layui-footer").height() - $(".layui-header").height() - 85;
var idNum =parent.$("#container_tab li[lay-id=" + id + "]").size();
if (idNum > 0) {
  window.parent.layui.element.tabChange('tabs', id);
}else{
    // 创建新tab并切换
    window.parent.layui.element.tabAdd('tabs', {
                    title: '查看详情'
                    ,content: '<iframe class="i-tab" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height: '+ h +'px" ></iframe>'
                    ,id: id
                });
                // 切换到新tab
                window.parent.layui.element.tabChange('tabs', id);}
}

3、select下拉框动态赋值

html页面

<select name="express_name" id="expressName">
    <option value="" selected></option>
</select>

js文件

$.ajax({
    url: '../dict/listByCode/express_company',
    dataType: 'json',
    type: 'get',
    success: function (data) {
        $.each(data, function (index, item) {
            $('#expressName').append(new Option(item.dictName, item.dictValue));// 下拉菜单里添加元素
        });
        layui.form.render("select");//重新渲染 固定写法
    }
});

最后编辑于：2020.01.09 16:08:22