在项目开发中遇到table框已经选择过的数据不支持二次选择从而要禁用复选框不许选中,但会导致复选框全选时layui的table组件源码中赋值时是根据全部复选框的下标顺序来赋值到数组中返回给你,这样已被禁用复选框的数据也会被push到数组中导致数据错乱;本layui 版本为2.4.5,现解决方案如下,找到layui的table.js源码文件
第一步 找到下面代码块
a. elem. on ( "click" , 'input[name="layTableCheckbox"]+' , function ( ) { var e = t ( this ) . prev ( ) , i = a. layBody. find ( 'input[name="layTableCheckbox"]' ) , l = e. parents ( "tr" ) . eq ( 0 ) . data ( "index" ) , n = e[ 0 ] . checked, o = "layTableAllChoose" === e. attr ( "lay-filter" ) ; o ? ( i. each ( function ( e, t ) { t. checked = n, a. setCheckData ( e, n) } ) , a. syncCheckAll ( ) , a. renderForm ( "checkbox" ) ) : ( a. setCheckData ( l, n) , a. syncCheckAll ( ) ) , layui. event . call ( e[ 0 ] , u, "checkbox(" + p + ")" , v . call ( e[ 0 ] , { checked : n, type : o ? "all" : "one" } ) ) } )
第二部 在第一步的代码快下面添加
a. elem. on ( "click" , 'input[name="checkChooseAll"]+' , function ( ) { var e = t ( this ) . prev ( ) , i = a. layBody. find ( 'input[name="checkChooseAll"]' ) , l = e. parents ( "tr" ) . eq ( 0 ) . data ( "index" ) , n = e[ 0 ] . checked, o = "tableCheckChooseAll" === e. attr ( "lay-filter" ) ; var _i = a. layBody. find ( 'input[name="layTableCheckbox"]' ) ; if ( o) { i. each ( function ( e, i ) { var idx = t ( i) . parents ( 'tr' ) . attr ( 'data-index' ) ; i. checked = n, a. setCheckData ( idx, n) } ) ; ( _i. each ( function ( e, i ) { var idx = t ( i) . parents ( 'tr' ) . attr ( 'data-index' ) ; i. checked = n, a. setCheckData ( idx, n) } ) , a. syncCheckAll ( ) , a. renderForm ( "checkbox" ) ) } else { var id = e. data ( 'id' ) ; var idName = e. data ( 'idKey' ) ; var bc = a. layBody. find ( '[data-check-id="' + id + '"]' ) ; ( bc. each ( function ( e, t ) { t. checked = n; } ) , a. renderForm ( "checkbox" ) ) ; var r = d. cache[ a. key] ; t. each ( r, function ( idx, ee ) { if ( ee[ idName] === id) { a. setCheckData ( idx, n) } } ) ; } layui. event . call ( e[ 0 ] , u, "checkbox(" + p + ")" , v . call ( e[ 0 ] , { checked : n, type : o ? "all" : "one" } ) ) } )
第三步 回到你渲染table数据的js中修改checkbox;其中注意data-id的值与data-id-key的字段需要一致,因在第一步代码块中有做判断处理
{ field : 'choosePatient' , width : 60 , align : 'center' , title : '<input type="checkbox" name="checkChooseAll" lay-skin="primary" lay-filter="tableCheckChooseAll">' , templet : function ( d ) { return '<input type="checkbox" lay-skin="primary" class="check-all" name="checkChooseAll" data-id="' + d. drugsInfo + '" data-id-key="drugsInfo">' } }