【layui-数据表格--跨页多选】(未删除)

 //记录选中的数据:做缓存使用,作为参数传递给后台,然后生成pdf ,压缩
        var ids =new Array();
   //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
   var table_data=new Array();
   	//存放缓存数据
   	var ids_data=new Array();
layui.use('table', function(){
				var table = layui.table;
				table.render({
		        	elem: '#test'
			        ,width: '473'
			        ,height:'263'
			        ,url: 
			        ,page: true //开启分页
			        ,limit:15
			        ,limits:[15,30,45,60,75,90]
					,cols:  [[  
			           {type: 'checkbox', fixed: 'index_id'}
			           ,{field:'index_name', title: '指标编号'}
			          ,{field:'index_number', title: '指标名称'}
					]]
					,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
						layout: [ 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
						//,curr: 5 //设定初始在第 5 页
						,groups: 1 //只显示 1 个连续页码
						,first: false //不显示首页
						,last: false //不显示尾页
		         	}
		         	,id:'listZhpjzb1'
		         	, even: true
		         	,done: function(res, curr, count){
			                //数据表格加载完成时调用此函数
			                //如果是异步请求数据方式,res即为你接口返回的信息。
			                //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
			
			                    //设置全部数据到全局变量
			                    table_data=res.data;
			 
			                    //在缓存中找到id ,然后设置data表格中的选中状态
			                    //循环所有数据,找出对应关系,设置checkbox选中状态
			                    for(var i=0;i< res.data.length;i++){
			                        for (var j = 0; j < ids.length; j++) {
			                            //数据id和要勾选的id相同时checkbox选中
			                            
			                            if(res.data[i].index_id == ids[j])
			                            {
			                                //这里才是真正的有效勾选
			                                res.data[i]["LAY_CHECKED"]='true';
			                                //找到对应数据改变勾选样式,呈现出选中效果
			                                var index= res.data[i]['LAY_TABLE_INDEX'];
			                                $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
			                                $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
			                            }
			                        }
			                    }
			                    //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
			                    var checkStatus = table.checkStatus('my-table');
			                    if(checkStatus.isAll){
			                        $(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
			                        $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
			                    }
			                //得到所有数据
			                //console.log(res);
			                //得到当前页码
			                //console.log(curr);
			                //得到数据总量
			                //console.log(count);
			            }
		    	});
			});
			//复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
        table.on('checkbox(test)', function (obj) {
           if(obj.checked==true){
               if(obj.type=='one'){
                   //ids.push(obj.data.index_id);
                    if(!isInArray(ids,obj.data.index_id)){
	                   		ids.push(obj.data.index_id);
	                   		ids_data.push(obj.data);
	           			}
              }else{
                   for(var i=0;i<table_data.length;i++){
	                   if(!isInArray(ids,table_data[i].index_id)){
	                   		ids.push(table_data[i].index_id);
	                   		ids_data.push(table_data[i]);
	           			}
                   }
               }
           }else{
               if(obj.type=='one'){
                   for(var i=0;i<ids.length;i++){
                      if(ids[i]==obj.data.index_id){
                           ids.remove(i);
                           ids_data.remove(i);
                       }
                  }
               }else{
                   for(var i=0;i<ids.length;i++){
                       for(var j=0;j<table_data.length;j++){
                           if(ids[i]==table_data[j].index_id){
                              ids.remove(i);
                              ids_data.remove(i);
                          }
                       }
                   }
               }
           }
        }); 
        //删除数组自定义函数
    Array.prototype.remove=function(dx)
    {
        if(isNaN(dx)||dx>this.length){return false;}
        for(var i=0,n=0;i<this.length;i++)
        {
            if(this[i]!=this[dx])
            {
                this[n++]=this[i]
            }
        }
        this.length-=1
    };
    //判断是否在数组中
    function isInArray(arr, value) {
	    for (var i = 0; i < arr.length; i++) {
	        if (value === arr[i]) {
	            return true;
	        }
	    }
	
	    return false;
	}

        //搜索加载--数据表格重载
        var $ = layui.$, active = {
            reload: function () {
                //执行重载
                table.reload('userTables', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                       searContent: $("input[name=searContent]").val()
                    }
                });
            }
        };

    
    }

其中index_id为数据表格的主键

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值