当前位置: 首页 > news >正文

layui中transfer两个table展示不同的数据列

在项目的任务开发中需要达到transfer右侧table需要有下拉框可选择状态,左侧table不变
在这里插入图片描述
使用的layui版本为2.4.5,该版本没有对transfer可自定义数据列的配置,所以改动transfer.js中的源码
以下为transfer.js部分源码 也是transfer.js去render的方法

	// 需要找到transfer.render的源码
	// 初始化表格
    Class.prototype.render = function () {
        var that = this, options = that.config; // 实际transfer的配置项
        var cols1 = [];
        var cols2 = [];
        if (options.separateCols) { // 这里是我自定义的配置项 用来检查是否使用自定义列
            cols1 = options.cols[0];
            cols2 = options.cols[1];
        } else {
            cols1 = options.cols; // 原本源码两个table使用的同一个cols
        }
        // table1 
        var d1_c = {
            elem: '#' + LEFT_TABLE + that.index
            , cols: [options.separateCols ? cols1 : options.cols] // table1 如果使用自定义列 则用clos1
            , data: (options.data[0] ? options.data[0] : [])
            , id: LEFT_TABLE + that.index
        }
        // table2 
        var d2_c = {
            elem: '#' + RIGHT_TABLE + that.index
            , cols: [options.separateCols ? cols2 : options.cols]// table2 如果使用自定义列 则用clos2
            , data: (options.data[1] ? options.data[1] : [])
            , id: RIGHT_TABLE + that.index
        }
        if (options.tabConfig) {
            d1_c = $.extend(d1_c, options.tabConfig)
            d2_c = $.extend(d2_c, options.tabConfig)
        }
        transfer.idData.push(that.index)
        transfer.data = [];
        transfer.data.push({id: LEFT_TABLE + that.index, data: (options.data[0] ? options.data[0] : [])})
        transfer.data.push({id: RIGHT_TABLE + that.index, data: (options.data[1] ? options.data[1] : [])})
        table.render(d1_c)
        table.render(d2_c)
        that.move()
    };

以下为render transfe的实例代码(可自行改动)

initData: function () {//初始化穿梭框
    var that = this;
    //数据源
    var data1 = that.lisItemData;
    var data2 = that.matchItemData;
    //表格列
    var cols = [{type: 'checkbox'}
        , {
            field: '', title: '项目名称', minWidth: 180, templet: function (d) {
                return d.itemCname + (d.itemEname ? "(" + d.itemEname + ")" : '');
            }
        }
    ];
    var cols1 = [{type: 'checkbox'}
            , {
                field: '', title: '项目名称', minWidth: 180, templet: function (d) {
                    return d.itemCname + (d.itemEname ? "(" + d.itemEname + ")" : '');
                }
            }
            , {
                field: '', title: '样本类型', minWidth: 180, templet: function (d) {
                	// 可去除 根据自己的需求来 我这是初始化下拉框
                    return that.initSelected(d);
                }
            }
        ];
    //表格配置文件
    var tabConfig1 = {
        page: false,
        limit: 1000,
        defaultToolbar: 'filter',
        height: 'full-100',
        done: function (res) {
            that.$.each(res.data, function (i, item) {
                that.form.on('select(changeTestResultType)', function (d) {
                    var infoId = that.$(d.elem).data('infoId');
                    that.changeItemResultType(infoId, d.value);
                });
            })
            that.$nextTick(function () {
                that.form.render();
            })
        }
    };
    // 可去掉 直接写在配置中也行
    var separateCols = true;
    var tb2 = that.transfer.render({
        elem: "#testRoot", //指定元素
        index: 2,
        cols: separateCols ? [cols, cols1] : cols, //表格列  支持layui数据表格所有配置
        separateCols: separateCols,
        data: [data1, data2], //[左表数据,右表数据[非必填]]
        tabConfig: tabConfig1, //表格配置项 支持layui数据表格所有配置
        titles: ["请选择匹配的检验项", "已匹配检验项"],
        leftClick: function (data) {
        },
        rightClick: function (data) {
        }
    });
}

相关文章:

  • 基于RV1126开发板实现多路网络摄像头取流方案
  • 设计模式:策略模式 - 消除复杂条件判断的利器
  • 【算法】——会了二分查找,对O(logn)真的很敏感
  • LabVIEW 中 “Flatten To Json String” VI 应用及优势
  • 【C++取经之路】lambda和bind
  • LeetCode 3396 题解
  • 安装vllm
  • 【mllm】——x64模拟htp的后端无法编译debug
  • MySQL深分页问题
  • 【Code】《代码整洁之道》笔记-Chapter11-系统
  • Cuto壁纸 2.6.9 | 解锁所有高清精选壁纸,无广告干扰
  • 单细胞多组学及空间组学数据分析与应用
  • 《系统分析师-浏览试卷(一)总结》
  • 元生代品牌建设:平台实现工作流(comfyui)创建与技术文档说明
  • CVE-2025-32375 | Windows下复现 BentoML runner 服务器远程命令执行漏洞
  • JavaScript:基本语法
  • 电脑的usb端口电压会大于开发板需要的电压吗
  • 【从零开始学习JVM | 第二篇】HotSpot虚拟机对象探秘
  • ai-warp 开源的Platformatic Stackable 与 AI 服务交互
  • 快速idea本地和推送到远程仓库
  • 互诺科技做网站怎么样/全国疫情一览表
  • 专业做二手网站/seo推广思路
  • 怎么做电影网站不违法/南京seo外包
  • 浙江网站建设推广公司找哪家/2024年重大新闻摘抄
  • 网站开发费 会计科目/热搜排行榜今日排名
  • 平面设计网页设计师招聘/比优化更好的词是