• DataTable 带滚动刷新全选全不选


    引入
    ../../../../media/css/jquery.dataTables.css
    ../../css/scroller.dataTables.css
    
    
    https://code.jquery.com/jquery-3.3.1.js
    ../../../../media/js/jquery.dataTables.js
    ../../js/dataTables.scroller.js
    
    function getDgBgshTable(){
    		sjxmFwTable = $('#sjxmFwTable').DataTable({
    			destroy : true,
    			serverSide : true,
                            paging : true,
    			dom: "frtiS",
    			scrollX: true,
    			scrollY: 246,
    			scroller: {
    				loadingIndicator: true
    			},
    			responsive : true,
    			processing : true,
    			autoWidth : false,// 自动计算列宽
    			deferRender : true,// 设置延迟渲染,提高效率用
    			draw : false,
    			searching: false, 
    			bLengthChange: false,
    			order : [ 1, 'asc' ],
    			ajax : {
    				url : "sjxm2/getSjfw",
    				type : "POST",
    				data : function(d) {
    					var sentJson = GET_SENT_JSON(d);
    					sentJson.search1 = sjxmglArr[0].sjxmdm;  //sjxmdm
    					sentJson.search2 = $('#text_xmbh').val();//xmbh
    					sentJson.search3 = $('#text_bmbh').val();//bmbh
    
    					return sentJson;
    				},
    				error : function(e) {
    					ALERT_ERROR(sjxmFwTable, e);
    				},
    			},
    			lengthMenu : PAGELENGTH,
    			"language" : LANGUAGESETTING,
    			columnDefs : [
    				{ "targets": 0 ,"name":"bmbh"   ,"title": " <a><i class='fa fa-circle selectAll_bgdg'></a></i><a><i class='fa fa-circle-o QselectAll_bgdg'></a>", "width": "2%","orderable" : false,},
    				{ "targets": 1 ,"name":"bmbh" ,"title": "部门编号", "visible": true,"width": "2%", orderable:false,},
    				{ "targets": 2 ,"name":"bmmc","title": "部门名称" ,"visible": true,"width": "16%"  ,orderable :true ,},
    				{ "targets": 3 ,"name":"xmbh","title": "项目编号" ,"visible": true,"width": "20%" , orderable :false ,},
    				{ "targets": 4 ,"name":"xmmc","title": "项目名称" ,"visible": true,"width": "20%" , orderable :false ,},
    			],
    	        columns: [
    				{
    	            	"sClass": "text-center",
    	      			"data": "bmbh",
    	      			"render": function (data, type, row, meta) {
    	  					return '<input type="checkbox"  class="checkchild_bgdg" value="' + data + '"  name="childBox"/>';
    	      			},
    	            },
    	        	{data: 'bmbh'},
    				{data: 'bmmc'},
    				{data: 'xmbh'},
    				{data: 'xmmc'},
    	        ],
    		});
    		
    		//鼠标移动添加背景颜色
    		mouseEvent("sjxmFwTable");
        };
        
        
        var handleCheckbox = function() {
        	$(".selectAll_bgdg").click(function () {
    
    			var bgdg_data = $(sjxmFwTable).context[0].aoData; 
    	 		for(var i = 0 ; i < bgdg_data.length ; i++) {
    	 			//判断是否延迟渲染
    	 			if(bgdg_data[i].anCells != null) {
    		 			//没有勾选的场合
    		 			if(!bgdg_data[i].anCells[0].firstChild.checked) {
    		 				bgdg_orderArr.push(bgdg_data[i]._aData);
    		 			}
    	 			}
    	 		}
    	 		$(".checkchild_bgdg").prop("checked", true);
    		 });
    
        	$(".QselectAll_bgdg").click(function () {
    			
    			var bgdg_data = $(sjxmFwTable).context[0].aoData; 
    		 	for(var i = 0 ; i < bgdg_data.length ; i++) {
    
    		 		//判断是否延迟渲染
    		 		if(bgdg_data[i].anCells != null) {
    			 		//勾选的场合
    		 			if(bgdg_data[i].anCells[0].firstChild.checked) {
    		 				var xmbh = bgdg_data[i]._aData.xmbh;
    				 		for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
    				 			if(xmbh == bgdg_orderArr[m].xmbh) {
    						 		bgdg_orderArr.splice(m, 1);
    				 			}
    				 		}
    		 			}
    		 		}
    		 	}
    		 	$(".checkchild_bgdg").prop("checked", false);
    		 });
    		 
        	sjxmFwTable.off("click").on( 'click', '.checkchild_bgdg',  function (e) {
    			var checked = $(this).is(":checked");
    			nRow = $(this).parents('tr')[0];
    			var nData = sjxmFwTable.row( nRow ).data();
    			if (checked) {
    				bgdg_orderArr.push(nData);
    			} else {
    				var xmbh = nData.xmbh;
    		 		for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
    		 			if(xmbh == bgdg_orderArr[m].xmbh) {
    		 				bgdg_orderArr.splice(m, 1);
    		 			}
    		 		}
    			}
    		});
        }
    
    列表刷新   sjxmFwTable.ajax.reload();
    
    带滚轴时表头会产生错位,需要刷新
    setTimeout(function(){
    	sjxmFwTable.ajax.reload();
     },200);
    
  • 相关阅读:
    C#:将空间数据加载到树视图控件
    C# 常见错误
    C#:Application操作(待补充)
    C#:XML操作(简单)
    C#:xml操作(待补充)
    C#:消息框
    C#:数学运算(待补充)
    C#:Ini文件操作(待补充)
    C#:文件操作(待补充)
    2015河南省农村拆迁赔偿流程
  • 原文地址:https://www.cnblogs.com/sunBinary/p/11498670.html
Copyright © 2020-2023  润新知