diff --git a/src/css/layui.css b/src/css/layui.css index 7a3fb8f9..2bbfab20 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -963,7 +963,9 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-hover, .layui-table-click, .layui-table[lay-even] tbody tr:nth-child(even){background-color: #f8f8f8;} - +.layui-table-checked{background-color: #dbfbf0;} +.layui-table-checked.layui-table-hover, +.layui-table-checked.layui-table-click{background-color: #abf8dd;} .layui-table th, diff --git a/src/modules/table.js b/src/modules/table.js index 9221aff2..1ccb6b0b 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -129,6 +129,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ var ELEM_PAGE = '.layui-table-page'; var ELEM_PAGE_VIEW = '.layui-table-pageview'; var ELEM_SORT = '.layui-table-sort'; + var ELEM_CHECKED = 'layui-table-checked'; var ELEM_EDIT = 'layui-table-edit'; var ELEM_HOVER = 'layui-table-hover'; var ELEM_GROUP = 'laytable-cell-group'; @@ -1155,9 +1156,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ }() +' lay-type="layTableCheckbox">'; break; case 'radio': // 单选 - if(tplData[checkName]){ - that.thisCheckedRowIndex = i1; - } return ''+ tds.join('') + ''); - trs_fixed.push(''+ tds_fixed.join('') + ''); - trs_fixed_r.push(''+ tds_fixed_r.join('') + ''); + // 添加 tr 属性 + var trAttr = function(){ + var arr = ['data-index="'+ i1 +'"']; + if(item1[table.config.checkName]) arr.push('class="'+ ELEM_CHECKED +'"'); + return arr.join(' '); + }(); + + trs.push(''+ tds.join('') + ''); + trs_fixed.push(''+ tds_fixed.join('') + ''); + trs_fixed_r.push(''+ tds_fixed_r.join('') + ''); }); return { @@ -1228,7 +1233,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ options.HAS_SET_COLS_PATCH || that.setColsPatch(); options.HAS_SET_COLS_PATCH = true; - that.thisCheckedRowIndex = ''; if(!sort && that.sortKey){ return that.sort({ field: that.sortKey.field, @@ -1256,15 +1260,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ that.layFixLeft.find('tbody').html(trs_fixed.join('')); that.layFixRight.find('tbody').html(trs_fixed_r.join('')); - that.renderForm(); - - // 标注选中行样式 - typeof that.thisCheckedRowIndex === 'number' && that.setRowChecked({ - type: 'radio', - index: that.thisCheckedRowIndex - }, true); - + // 渲染表单 that.syncCheckAll(); + that.renderForm(); // 因为 page 参数有可能发生变化 先重新铺满 that.fullSize(); @@ -1462,35 +1460,67 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ return parent.eq(0).find('.laytable-cell-'+ key + ':eq(0)'); }; - //渲染表单 + // 渲染表单 Class.prototype.renderForm = function(type){ - var that = this - ,options = that.config - ,filter = that.elem.attr('lay-filter'); + var that = this; + var options = that.config; + var filter = that.elem.attr('lay-filter'); form.render(type, filter); }; - // 标记行选中状态 - Class.prototype.setRowChecked = function(opts, selectedStyle){ + // 同步全选按钮状态 + Class.prototype.syncCheckAll = function(){ + var that = this + var options = that.config + var checkAllElem = that.layHeader.find('input[name="layTableCheckbox"]') + var syncColsCheck = function(checked){ + that.eachCols(function(i, item){ + if(item.type === 'checkbox'){ + item[options.checkName] = checked; + } + }); + return checked; + }; + + if(!checkAllElem[0]) return; + + if(table.checkStatus(that.key).isAll){ + if(!checkAllElem[0].checked){ + checkAllElem.prop('checked', true); + that.renderForm('checkbox'); + } + syncColsCheck(true); + } else { + if(checkAllElem[0].checked){ + checkAllElem.prop('checked', false); + that.renderForm('checkbox'); + } + syncColsCheck(false); + } + }; + + // 标记当前活动行背景色 + Class.prototype.setRowActive = function(index, className){ + var that = this; + var options = that.config; + var tr = that.layBody.find('tr[data-index="'+ index +'"]'); + className = className || 'layui-table-click'; + tr.addClass(className).siblings('tr').removeClass(className); + }; + + // 设置行选中状态 + Class.prototype.setRowChecked = function(opts){ var that = this; var options = that.config; - var ELEM_CLICK = 'layui-table-click'; var tr = that.layBody.find('tr'+ ( opts.index === 'all' ? '' : '[data-index="'+ opts.index +'"]' )); + // 默认属性 opts = $.extend({ type: 'checkbox' // 选中方式 }, opts); - // 标注当前行选中样式 - if(opts.index !== 'all'){ - tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK); - } - - // 仅设置样式状态,不设置数据中的选中属性 - if(opts.selectedStyle || selectedStyle) return; - // 同步数据选中属性值 var thisData = table.cache[that.key]; var existChecked = 'checked' in opts; @@ -1501,8 +1531,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // 设置数据选中属性 layui.each(thisData, function(i, item){ + if(layui.type(item) === 'array') return; // 空项 if(opts.index === i || opts.index === 'all'){ - item[options.checkName] = getChecked(item[options.checkName]); + var checked = item[options.checkName] = getChecked(item[options.checkName]); + tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 标记当前选中行背景色 + // 若为 radio 类型,则取消其他行选中背景色 + if(opts.type === 'radio'){ + tr.siblings().removeClass(ELEM_CHECKED); + } } else if(opts.type === 'radio') { delete item[options.checkName]; } @@ -1624,55 +1660,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ } }; - // 同步选中值状态 - Class.prototype.setCheckData = function(index, checked, radio){ - var that = this; - var options = that.config; - var thisData = table.cache[that.key]; - - if(!thisData[index]) return; - if(layui.type(thisData[index]) === 'array') return; - - layui.each(thisData, function(i, item){ - if(index === i){ - item[options.checkName] = checked; - } else if(radio) { // 是否单选 - delete item[options.checkName]; - } - }); - }; - - // 同步全选按钮状态 - Class.prototype.syncCheckAll = function(){ - var that = this - ,options = that.config - ,checkAllElem = that.layHeader.find('input[name="layTableCheckbox"]') - ,syncColsCheck = function(checked){ - that.eachCols(function(i, item){ - if(item.type === 'checkbox'){ - item[options.checkName] = checked; - } - }); - return checked; - }; - - if(!checkAllElem[0]) return; - - if(table.checkStatus(that.key).isAll){ - if(!checkAllElem[0].checked){ - checkAllElem.prop('checked', true); - that.renderForm('checkbox'); - } - syncColsCheck(true); - } else { - if(checkAllElem[0].checked){ - checkAllElem.prop('checked', false); - that.renderForm('checkbox'); - } - syncColsCheck(false); - } - }; - // 获取 cssRule Class.prototype.getCssRule = function(key, callback){ var that = this; @@ -2175,9 +2162,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ }); that.renderForm(); - } + }, // 设置行选中状态 - ,setRowChecked: function(opts){ + setRowChecked: function(opts){ that.setRowChecked($.extend({ index: index }, opts)); @@ -2200,17 +2187,17 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ if(checkbox[0].disabled) return; - //全选 + // 全选 if(isAll){ - children.each(function(i, item){ - item.checked = checked; - that.setCheckData(i, checked); + that.setRowChecked({ + index: 'all', + checked: checked }); - that.syncCheckAll(); - that.renderForm('checkbox'); } else { - that.setCheckData(index, checked); - that.syncCheckAll(); + that.setRowChecked({ + index: index, + checked: checked + }); layui.stope(e); } @@ -2239,14 +2226,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ layui.stope(e); if(radio[0].disabled) return false; - // 标注数据中的选中属性 - that.setCheckData(index, checked, 'radio'); - // 标注选中样式 that.setRowChecked({ type: 'radio', index: index - }, true); + }); // 事件 layui.event.call( @@ -2460,7 +2444,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ var othis = $(this); var td = othis.closest('td'); var index = othis.parents('tr').eq(0).data('index'); - + // 执行事件 layui.event.call( this, MOD_NAME, @@ -2472,11 +2456,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ } }) ); - // 设置当前行选中样式 - that.setRowChecked({ - type: 'radio', - index: index - }, true); + // 标记当前活动行 + that.setRowActive(index); }; // 行工具条单击事件