layui父页面弹出子页面的表格设置复选框回显勾选

最新推荐文章于 2023-09-01 14:20:34 发布

原创最新推荐文章于 2023-09-01 14:20:34 发布 · 462 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui

本文介绍了一个使用layui框架实现的父子页面数据交互案例，主要内容包括如何在子页面中选择数据行并在父页面中显示，同时当再次打开子页面时能够回显之前的选择。

情景：
子页面选择行，父页面表格显示，再次打开子页面的时候回显
在这里插入图片描述

父页面：

function selProperty(){
    var propertyData = layui.table.cache["propertyTableReload"];
    var stKey = "pro_ch_app" + Date.parse(new Date()) + Math.round(Math.random() * 10);
    sessionStorage.setItem(stKey, JSON.stringify(propertyData));
    layer.open({
        type: 2,
        title: '资产列表',
        closeBtn: 0,
        //anim: 1,
        shadeClose: true,
        shade: 0.5,
        area: ['900px', '600px'],
        fixed: true, //不固定
        maxmin: true,
        offset: '20px',
        content: encodeURI('/view/.../selProperty?cb=selPropertyConfirm&stKey='+stKey)
    });

弹出子页面：

var stKey = getQueryString("stKey");
if(stKey){
    multipleData = JSON.parse(sessionStorage.getItem(stKey));
}
//表格数据和格式
table.render({
    elem : '#tableName',
    text : {
        none : '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
    }, //查询条件 
    defaultToolbar : [],
    height : 'full',
    cellMinWidth : 150,
    url : '/property/query',
    page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ], //自定义分页布局 //,curr: 5 //设定初始在第 5 页 
        groups : 3, //只显示 1 个连续页码 
        first : false, //不显示首页 
        last : false,
        //limit: 10,
    //不显示尾页
    },
    parseData: function(res){
        //表格渲染前就会执行
        if(multipleData.length !== 0){
            res.data.forEach(function(val){
                for(var i=0; i<multipleData.length; i++){
                    if(val["id"] === multipleData[i]["infoId"]){
                        val.LAY_CHECKED = true;
                        break;
                    }
                }
            });
        }
        
        return res;
    },
    done : function(res, curr, count) {
        //表格渲染完后回调
    },
    cols : [ [
        .....
            
    ] ] ,//这里设置ID，搜索时重载该ID的table
    id : 'tableNameReload' 
});