tableSelect组件更新，添加分页与部分也两种模式，删除无用功能

wtt

2025-01-18 3073495378f5702355e507d5c91ea241086df901

tableSelect组件更新，添加分页与部分也两种模式，删除无用功能

 WebTM/layuiadmin/modules/tableSelect.js

@@ -10,7 +10,7 @@
        table = layui.table,
        form = layui.form;
    var tableSelect = function () {
        this.v = '1.2.0';
        this.v = '1.3.0';
    };

    /**
@@ -21,7 +21,6 @@
        
        //默认设置
        opt.searchKey = opt.searchKey || 'keyword';
        opt.checkedKey = opt.checkedKey;
        opt.table.page = opt.table.page || false;
        opt.table.height = opt.table.height || 290;
        elem.off('click').on('click', function(e) {
@@ -41,12 +40,15 @@
                tableBox += '</div>';
                tableBox = $(tableBox);
            $('body').append(tableBox);
            //数据缓存
            var checkedData = [];
            //渲染TABLE
            opt.table.elem = "#"+tableName;
            opt.table.id = tableName;
            opt.table.where['sWhere'] = opt.sWhere
            //若没有where表示为前端分页
            if (opt.table.url != undefined) {
                opt.table.where['sWhere'] = opt.sWhere
            } else {
                opt.table.data = opt.ajaxSelect(opt.sWhere);
            }
            opt.table.request={//设置页参数
                pageName: 'page', // é¡µç çš„参数名称，默认：page
                limitName: 'size' // æ¯é¡µæ•°æ®æ¡æ•°çš„参数名，默认：limit
@@ -59,97 +61,19 @@
                    "data": res.data // è§£æžæ•°æ®åˆ—表
                };
            }
            opt.table.done = function(res, curr, count){
                defaultChecked(res, curr, count);
                setChecked(res, curr, count);
            };
            //用jump替代原来表格pagejump用于更新按钮选中数量此功能发现无用删除
            //opt.table.done = function (res, curr, count, origin) {
            //    this.page.jump = jump;
            //}

            var tableSelect_table = table.render(opt.table);

            //分页选中保存数组
            table.on('radio('+tableName+')', function(obj){
                if(opt.checkedKey){
                    checkedData = table.checkStatus(tableName).data
                }
                updataButton(table.checkStatus(tableName).data.length)
            })
            table.on('checkbox(' + tableName + ')', function (obj) {
                if(opt.checkedKey){
                    if(obj.checked){
                        for (var i=0;i<table.checkStatus(tableName).data.length;i++){
                            checkedData.push(table.checkStatus(tableName).data[i])
                        }
                    }else{
                        if(obj.type=='all'){
                            for (var j=0;j<table.cache[tableName].length;j++) {
                                for (var i=0;i<checkedData.length;i++){
                                    if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){
                                        checkedData.splice(i,1)
                                    }
                                }
                            }
                        }else{
                            //因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。
                            function nu (){
                                var noCheckedKey = '';
                                for (var i=0;i<table.cache[tableName].length;i++){
                                    if(!table.cache[tableName][i].LAY_CHECKED){
                                        noCheckedKey = table.cache[tableName][i][opt.checkedKey];
                                    }
                                }
                                return noCheckedKey
                            }
                            var noCheckedKey = obj.data[opt.checkedKey] || nu();
                            for (var i=0;i<checkedData.length;i++){
                                if(checkedData[i][opt.checkedKey] == noCheckedKey){
                                    checkedData.splice(i,1);
                                }
                            }
                        }
                    }
                    checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                    updataButton(checkedData.length)
                }else{
                    updataButton(table.checkStatus(tableName).data.length)
                }
            });

            //渲染表格后选中
            function setChecked (res, curr, count) {
                for(var i=0;i<res.data.length;i++){
                    for (var j=0;j<checkedData.length;j++) {
                        if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){
                            res.data[i].LAY_CHECKED = true;
                            var index= res.data[i]['LAY_TABLE_INDEX'];
                            var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
                                checkbox.prop('checked', true).next().addClass('layui-form-checked');
                            var radio  = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]');
                            radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;');
                            radio.closest('tr').addClass('layui-table-click');
                        }
                    }
                }
                var checkStatus = table.checkStatus(tableName);
                if(checkStatus.isAll){
                    $('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                    $('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                }
                updataButton(checkedData.length)
            }
            
            //写入默认选中值(puash checkedData)
            function defaultChecked (res, curr, count){
                if(opt.checkedKey && elem.attr('ts-selected')){
                    var selected = elem.attr('ts-selected').split(",");
                    for(var i=0;i<res.data.length;i++){
                        for(var j=0;j<selected.length;j++){
                            if(res.data[i][opt.checkedKey] == selected[j]){
                                checkedData.push(res.data[i])
                            }
                        }
                    }
                    checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                }
            }
            //jump分页触发函数
            //function jump(obj, first) {
            //    table.reload(tableName);
            //    //更新按钮
            //    updataButton(table.checkStatus(tableName).data.length)
            //}

            //更新选中数量
            function updataButton (n) {
@@ -247,28 +171,23 @@
            elem.off('input').on('input', function (e) {
                // é˜»æ­¢è¡¨å•æäº¤ï¼ˆå¦‚果输入框在表单内）
                e.preventDefault();
                opt.table.where['sWhere'] = opt.sWhere + " and " + opt.searchKey + " like '%" + elem.val() + "%' ";
                tableSelect_table.reload({
                    where: opt.table.where,
                    page: {
                        curr: 1
                    }
                });
                //后端分页搜索
                if (opt.table.where != undefined) {
                    opt.table.where['sWhere'] = opt.sWhere + " and " + opt.searchKey + " like '%" + elem.val() + "%' ";
                    tableSelect_table.reload({
                        where: opt.table.where,
                        page: {
                            curr: 1
                        }
                    });
                } else {
                    var sWhere = opt.sWhere + " and " + opt.searchKey + " like '%" + elem.val() + "%' ";
                    tableSelect_table.reload({
                        data: opt.ajaxSelect(sWhere)
                    });
                }
                
            })
            // //关键词搜索
            // form.on('submit(tableSelect_btn_search)', function(data){
            //     // console.log(" and "+opt.searchKey +"='" + data.opt.searchKey +"'")
            //     console.log(data);
            //     opt.table.where['sWhere'] = " and "+opt.searchKey +" like '%" + data.field[opt.searchKey] +"%' ";
            //     tableSelect_table.reload({
            //         where: opt.table.where,
            //         page: {
            //         curr: 1
            //         }
            //     });
            //     return false;
            // });

            //双击行选中
            table.on('rowDouble('+tableName+')', function(obj){
@@ -298,32 +217,21 @@
                            l.LAY_CHECKED = flag;
                        }
                    });
                    //更新按钮
                    updataButton(table.checkStatus(tableName).data.length)
                    //更新按钮（无用删除）
                    //updataButton(table.checkStatus(tableName).data.length)
                }
            })
            //按钮选中
            tableBox.find('.tableSelect_btn_select').on('click', function() {
                var checkStatus = table.checkStatus(tableName);
                if(checkedData.length > 1){
                checkStatus.data = checkedData;
                }
                selectDone(checkStatus);
            })

            //写值回调和关闭
            function selectDone (checkStatus){
                if(opt.checkedKey){
                    var selected = [];
                    for(var i=0;i<checkStatus.data.length;i++){
                        selected.push(checkStatus.data[i][opt.checkedKey])
                    }
                    elem.attr("ts-selected",selected.join(","));
                }
                opt.done(elem, checkStatus);
                tableBox.remove();
                delete table.cache[tableName];
                checkedData = [];
            }
            
            //点击其他区域关闭
@@ -332,7 +240,6 @@
                if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
                    tableBox.remove();
                    delete table.cache[tableName];
                    checkedData = [];
                }
            });
        })

 WebTM/views/²É¹º¹ÜÀí/²É¹º¶©µ¥/Cg_POOrderBillEdit.html

@@ -1015,14 +1015,31 @@
                //供应商输入框
                tableSelect.render({
                    elem: '#HSupName',//输入框dom选择
                    checkedKey: 'HItemID',//查询列表主键用于获取历史
                    searchKey: '供应商名称',//查询的列名
                    sWhere: '',//table搜索sWhere条件 //默认筛选项
                    ajaxSelect: function (sWhere) {
                        var data = '';
                        $.ajax({
                            url: GetWEBURL() + '/Gy_Supplier/list',
                            type: "GET",
                            data: { "sWhere": sWhere, "user": '翁涛涛', "Organization": '浙江智云迈思' },
                            async: false,
                            success: function (data1) {
                                if (data1.count == 1) {
                                    data = data1.data
                                }
                            },
                            error: function () {
                                layer.alert('获取列表失败！', { icon: 15, title: '通信错误' });
                            }
                        });
                        return data;
                    },//设置前端分页时可以设置的
                    table: {
                        url: GetWEBURL() + 'Gy_Supplier/page',
                        where: { user: '翁涛涛', Organization: '浙江智云迈思' },
                        //url: GetWEBURL() + 'Gy_Supplier/page',
                        //where: { user: '翁涛涛', Organization: '浙江智云迈思' },
                        cols: [[
                            { type: 'radio' },
                            { type: 'checkbox', fixed: 'left' },//需要加这个fixed属性不然点击checkbox会触发行点击导致无法正确点击
                            { field: 'HItemID', title: 'HItemID' },
                            { field: '供应商名称', title: '供应商名称' },
                        ]],