release v2.8.7
release v2.8.7
This commit is contained in:
commit
12c3cba183
2
dist/css/layui.css
vendored
2
dist/css/layui.css
vendored
File diff suppressed because one or more lines are too long
2
dist/layui.js
vendored
2
dist/layui.js
vendored
File diff suppressed because one or more lines are too long
@ -11,7 +11,7 @@
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-cellphone"></i>
|
||||
</div>
|
||||
<input type="text" name="cellphone" value="" lay-verify="phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
|
||||
<input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
|
@ -269,7 +269,10 @@ totalRow: true // 开启合计行,并默认对当前所有行数据进行前
|
||||
|
||||
{{!
|
||||
```
|
||||
// 获取前端统计的动态字段
|
||||
totalRow: '{{= d.TOTAL_NUMS }} 单位' // 还比如只取整:'{{= parseInt(d.TOTAL_NUMS) }}'
|
||||
// 获取返回数据中的统计字段
|
||||
totalRow: '分数:{{= d.TOTAL_ROW.score }}' // TOTAL_ROW 即对应返回据中的 totalRow
|
||||
```
|
||||
!}}
|
||||
|
||||
@ -334,13 +337,17 @@ edit: function(d){
|
||||
<td>ignoreExport <sup>2.8.3+</sup></td>
|
||||
<td>
|
||||
|
||||
是否导出时忽略该列
|
||||
是否导出时忽略该列。支持以下可选值:
|
||||
|
||||
- `true` : 忽略导出
|
||||
- `false` : 强制导出,对所有列适用
|
||||
- `null` : 只对常规列导出(默认)
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
-
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -409,10 +409,11 @@ initSort: {
|
||||
|
||||
```
|
||||
table.render({
|
||||
done: function(res, curr, count){
|
||||
done: function(res, curr, count, origin){
|
||||
console.log(res); // 得到当前渲染的数据
|
||||
console.log(curr); // 得到当前页码
|
||||
console.log(count); // 得到数据总量
|
||||
console.log(origin); // 回调函数所执行的来源 --- 2.8.7+
|
||||
}
|
||||
// … // 其它属性
|
||||
});
|
||||
|
@ -345,7 +345,6 @@ console.log(checkStatus.isAll ) // 表格是否全选
|
||||
| type | 选中方式。可选值: `checkbox,radio` | string | `checkbox` |
|
||||
| index | 选中行的下标。即数据的所在数组下标(`0` 开头)。<br>可设置 `all` 表示全选。 | number<br>string | - |
|
||||
| checked | 选中状态值。 <ul><li>若传递该属性,则赋值固定值。</li><li>若不传递该属性(默认),则 `checkbox` 将在 `true\|false` 中自动切换值,而 `radio` 将赋值 `true` 固定值。<sup>2.8.4+</sup></li></ul> | boolean | - |
|
||||
| selectedStyle | 是否仅设置样式状态。若为 `true` 则只标注选中样式,不对数据中的 `LAY_CHECKED` 属性赋值。 | boolean | `false` |
|
||||
|
||||
该方法用于设置行的选中样式及相关的特定属性值 `LAY_CHECKED`。
|
||||
|
||||
|
@ -85,6 +85,7 @@ treeTable.render({
|
||||
| iconLeaf | 叶子节点的图标 | string | - |
|
||||
| showFlexIconIfNotParent | 若非父节点时,是否显示折叠图标 | boolean | `false` |
|
||||
| dblClickExpand | 双击节点时,是否自动展开父节点 | boolean | `true` |
|
||||
| expandAllDefault <sup>2.8.7+</sup> | 是否默认展开全部节点 | boolean | `false` |
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -11,6 +11,32 @@ toc: true
|
||||
|
||||
> 导读:📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
|
||||
|
||||
|
||||
<h2 id="2.8.7" class="ws-anchor">
|
||||
2.8.7
|
||||
<span class="layui-badge-rim">2023-06-16</span>
|
||||
</h2>
|
||||
|
||||
#### form
|
||||
- 优化 `select` 开启搜索时输入状态,将值转义到 `placeholder`,便于输入 # 1280
|
||||
#### table
|
||||
- 新增 表头复选框的半选效果,当数据项部分选中且未全选时显示
|
||||
- 优化 `table.setRowChecked()` 方法,新增当前行选中背景色,便于与 hover 等活动背景色区分
|
||||
- 剔除 `table.setRowChecked()` 方法中的 `selectedStyle` 属性,因为没有实质意义
|
||||
- 优化 表头部分字段为 `hide` 在数据异常的情况下可能出现的表头错位的问题 # 1281
|
||||
- 优化 `done` 回调函数,新增参数 `origin` 用于区分重载和重新渲染数据 # 1281
|
||||
- 加强 `ignoreExport` 表头属性,允许指定不排除哪些字段 # 1281
|
||||
#### treeTable
|
||||
- 新增 `view.expandAllDefault` 属性,用于设置是否默认展开全部节点 # 1281
|
||||
- 修复 开启排序且在 `done` 回调中执行了 `expandAll` 展开全部导致死循环问题 # 1281
|
||||
- 修复 执行 `treeTable.reload(id)` 若 `id` 未匹配到对应实例时出现的报错问题 # 1281/I7CXLN
|
||||
#### grid
|
||||
- 修复 space30 和 space32 边距相同的问题 # I7D7YP
|
||||
|
||||
### 下载: [layui-v2.8.7.zip](https://gitee.com/layui/layui/attach_files/1441026/download)
|
||||
|
||||
---
|
||||
|
||||
<h2 id="2.8.6" class="ws-anchor">
|
||||
2.8.6
|
||||
<span class="layui-badge-rim">2023-06-08</span>
|
||||
@ -38,7 +64,7 @@ toc: true
|
||||
|
||||
---
|
||||
|
||||
因 `2.8.5` 版本中存在一个 tab 删除时下标的异常问题,因此 `2.8.5` 已被跳过。
|
||||
因 `2.8.5` 版本中存在一个 tab 删除时下标的异常问题,`2.8.5` 已被跳过。
|
||||
|
||||
---
|
||||
|
||||
|
@ -174,7 +174,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
,{field:'sign', title:'签名', minWidth: 200, style:'color: #5FB878', edit: 'textarea'}
|
||||
,{field: 'experience', title: '积分', width: 100, sort: true, align:'center', totalRow: !1 ? true : '{{= d.TOTAL_NUMS }} 分 😊', templet: '<div><a href="" class="layui-table-link">{{= d[d.LAY_COL.field] }}</a> 分</div>'}
|
||||
,{field:'ip', title:'IP', width: 120, align: 'right'}
|
||||
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}
|
||||
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= d.TOTAL_ROW.checkin }} 次'}
|
||||
,{field:'joinTime', title:'加入时间', width: 120}
|
||||
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
|
||||
]]
|
||||
@ -489,9 +489,14 @@ layui.use(['table', 'dropdown'], function(){
|
||||
|
||||
// 行单击事件
|
||||
table.on('row(test)', function(obj){
|
||||
//console.log(obj);
|
||||
//layer.closeAll('tips');
|
||||
// console.log(obj);
|
||||
// layer.closeAll('tips');
|
||||
obj.setRowChecked({
|
||||
// type: 'radio'
|
||||
});
|
||||
// layer.msg('row 事件')
|
||||
});
|
||||
|
||||
// 行双击事件
|
||||
table.on('rowDouble(test)', function(obj){
|
||||
console.log(obj);
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"version": "2.8.6",
|
||||
"version": "2.8.7",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"main": "dist/layui.js",
|
||||
"license": "MIT",
|
||||
|
@ -509,8 +509,8 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-col-space28>*{padding: 14px;}
|
||||
.layui-col-space30{margin: -15px;}
|
||||
.layui-col-space30>*{padding: 15px;}
|
||||
.layui-col-space32{margin: -15px;}
|
||||
.layui-col-space32>*{padding: 15px;}
|
||||
.layui-col-space32{margin: -16px;}
|
||||
.layui-col-space32>*{padding: 16px;}
|
||||
|
||||
|
||||
/** 页面元素 **/
|
||||
@ -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,
|
||||
|
@ -16,7 +16,7 @@
|
||||
};
|
||||
|
||||
var Layui = function(){
|
||||
this.v = '2.8.6'; // Layui 版本号
|
||||
this.v = '2.8.7'; // Layui 版本号
|
||||
};
|
||||
|
||||
// 识别预先可能定义的指定全局对象
|
||||
|
@ -265,29 +265,33 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||
|
||||
// 下拉选择框
|
||||
,select: function(elem){
|
||||
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
|
||||
,NONE = 'layui-select-none', initValue = '', thatInput
|
||||
,selects = elem || elemForm.find('select')
|
||||
var TIPS = '请选择';
|
||||
var CLASS = 'layui-form-select';
|
||||
var TITLE = 'layui-select-title';
|
||||
var NONE = 'layui-select-none';
|
||||
var initValue = '';
|
||||
var thatInput;
|
||||
var selects = elem || elemForm.find('select');
|
||||
|
||||
// 隐藏 select
|
||||
,hide = function(e, clear){
|
||||
var hide = function(e, clear){
|
||||
if(!$(e.target).parent().hasClass(TITLE) || clear){
|
||||
$('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up');
|
||||
thatInput && initValue && thatInput.val(initValue);
|
||||
}
|
||||
thatInput = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 各种事件
|
||||
,events = function(reElem, disabled, isSearch){
|
||||
var select = $(this)
|
||||
,title = reElem.find('.' + TITLE)
|
||||
,input = title.find('input')
|
||||
,dl = reElem.find('dl')
|
||||
,dds = dl.children('dd')
|
||||
,dts = dl.children('dt') // select分组dt元素
|
||||
,index = this.selectedIndex // 当前选中的索引
|
||||
,nearElem; // select 组件当前选中的附近元素,用于辅助快捷键功能
|
||||
var events = function(reElem, disabled, isSearch){
|
||||
var select = $(this);
|
||||
var title = reElem.find('.' + TITLE);
|
||||
var input = title.find('input');
|
||||
var dl = reElem.find('dl');
|
||||
var dds = dl.children('dd');
|
||||
var dts = dl.children('dt'); // select 分组dt元素
|
||||
var index = this.selectedIndex; // 当前选中的索引
|
||||
var nearElem; // select 组件当前选中的附近元素,用于辅助快捷键功能
|
||||
|
||||
if(disabled) return;
|
||||
|
||||
@ -296,8 +300,8 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||
|
||||
// 展开下拉
|
||||
var showDown = function(){
|
||||
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
|
||||
,dlHeight = dl.outerHeight();
|
||||
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop();
|
||||
var dlHeight = dl.outerHeight();
|
||||
|
||||
index = select[0].selectedIndex; // 获取最新的 selectedIndex
|
||||
reElem.addClass(CLASS+'ed');
|
||||
@ -314,17 +318,19 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||
reElem.addClass(CLASS + 'up');
|
||||
}
|
||||
|
||||
// 删除input已有文本并放入 placeholder,方便输入
|
||||
if (input.val()) {
|
||||
// 有值时才删除并替换placeholder
|
||||
input.attr('placeholder', input.val());
|
||||
// 删除 input 已有文本并放入 placeholder,方便输入
|
||||
var inputValue = $.trim(input.val());
|
||||
// 有值时才删除并替换 placeholder
|
||||
if(inputValue){
|
||||
input.attr('placeholder', inputValue);
|
||||
input.val(''); // 清空输入框的值
|
||||
}
|
||||
|
||||
followScroll();
|
||||
}
|
||||
};
|
||||
|
||||
// 隐藏下拉
|
||||
,hideDown = function(choose){
|
||||
var hideDown = function(choose){
|
||||
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
|
||||
input.blur();
|
||||
nearElem = null;
|
||||
@ -347,17 +353,17 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||
input.val(initValue || '');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 定位下拉滚动条
|
||||
,followScroll = function(){
|
||||
var followScroll = function(){
|
||||
var thisDd = dl.children('dd.'+ THIS);
|
||||
|
||||
if(!thisDd[0]) return;
|
||||
|
||||
var posTop = thisDd.position().top
|
||||
,dlHeight = dl.height()
|
||||
,ddHeight = thisDd.height();
|
||||
var posTop = thisDd.position().top;
|
||||
var dlHeight = dl.height();
|
||||
var ddHeight = thisDd.height();
|
||||
|
||||
// 若选中元素在滚动条不可见底部
|
||||
if(posTop > dlHeight){
|
||||
|
@ -84,6 +84,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var options = this.config || {};
|
||||
var item3 = obj.item3; // 表头数据
|
||||
var content = obj.content; // 原始内容
|
||||
if (item3.type === 'numbers') content = obj.tplData[table.config.numbersName];
|
||||
|
||||
// 是否编码 HTML
|
||||
var escaped = 'escape' in item3 ? item3.escape : options.escape;
|
||||
@ -129,6 +130,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';
|
||||
@ -918,6 +920,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
Class.prototype.pullData = function(curr, opts){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
// 同步表头父列的相关值
|
||||
options.HAS_SET_COLS_PATCH || that.setColsPatch();
|
||||
options.HAS_SET_COLS_PATCH = true;
|
||||
var request = options.request;
|
||||
var response = options.response;
|
||||
var sort = function(){
|
||||
@ -929,10 +934,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
});
|
||||
}
|
||||
};
|
||||
var done = function(res){
|
||||
var done = function(res, origin){
|
||||
that.setColsWidth();
|
||||
typeof options.done === 'function' && options.done(
|
||||
res, curr, res[response.countName]
|
||||
res, curr, res[response.countName], origin
|
||||
);
|
||||
};
|
||||
|
||||
@ -959,7 +964,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
curr: curr,
|
||||
count: res[response.countName],
|
||||
type: opts.type,
|
||||
}), sort(), done(res);
|
||||
}), sort(), done(res, 'renderData');
|
||||
} else if(options.url){ // Ajax请求
|
||||
var params = {};
|
||||
// 当 page 开启,默认自动传递 page、limit 参数
|
||||
@ -1155,9 +1160,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}() +' lay-type="layTableCheckbox">';
|
||||
break;
|
||||
case 'radio': // 单选
|
||||
if(tplData[checkName]){
|
||||
that.thisCheckedRowIndex = i1;
|
||||
}
|
||||
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
|
||||
+ function(){
|
||||
var arr = [];
|
||||
@ -1188,9 +1190,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
if(item3.fixed === 'right') tds_fixed_r.push(td);
|
||||
});
|
||||
|
||||
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
|
||||
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
|
||||
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
|
||||
// 添加 tr 属性
|
||||
var trAttr = function(){
|
||||
var arr = ['data-index="'+ i1 +'"'];
|
||||
if(item1[table.config.checkName]) arr.push('class="'+ ELEM_CHECKED +'"');
|
||||
return arr.join(' ');
|
||||
}();
|
||||
|
||||
trs.push('<tr '+ trAttr +'>'+ tds.join('') + '</tr>');
|
||||
trs_fixed.push('<tr '+ trAttr +'>'+ tds_fixed.join('') + '</tr>');
|
||||
trs_fixed_r.push('<tr '+ trAttr +'>'+ tds_fixed_r.join('') + '</tr>');
|
||||
});
|
||||
|
||||
return {
|
||||
@ -1224,11 +1233,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 渲染视图
|
||||
var render = function(){ // 后续性能提升的重点
|
||||
// 同步表头父列的相关值
|
||||
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,63 @@ 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;
|
||||
};
|
||||
var checkStatus = table.checkStatus(that.key);
|
||||
|
||||
if(!checkAllElem[0]) return;
|
||||
|
||||
// 选中状态
|
||||
syncColsCheck(checkStatus.isAll);
|
||||
checkAllElem.prop({
|
||||
checked: checkStatus.isAll,
|
||||
indeterminate: !checkStatus.isAll && checkStatus.data.length // 半选
|
||||
});
|
||||
form.render(checkAllElem);
|
||||
};
|
||||
|
||||
// 标记当前活动行背景色
|
||||
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 +1527,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 设置数据选中属性
|
||||
layui.each(thisData, function(i, item){
|
||||
if(opts.index === i || opts.index === 'all'){
|
||||
item[options.checkName] = getChecked(item[options.checkName]);
|
||||
if(layui.type(item) === 'array') return; // 空项
|
||||
if(Number(opts.index) === i || opts.index === 'all'){
|
||||
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 +1656,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;
|
||||
@ -2127,20 +2110,20 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 事件返回的公共成员
|
||||
var obj = {
|
||||
tr: tr //行元素
|
||||
,config: options
|
||||
,data: table.clearCacheKey(data) //当前行数据
|
||||
,index: index
|
||||
,del: function(){ //删除行数据
|
||||
tr: tr, // 行元素
|
||||
config: options,
|
||||
data: table.clearCacheKey(data), // 当前行数据
|
||||
index: index,
|
||||
del: function(){ // 删除行数据
|
||||
table.cache[that.key][index] = [];
|
||||
tr.remove();
|
||||
that.scrollPatch();
|
||||
}
|
||||
,update: function(fields, related){ // 修改行数据
|
||||
},
|
||||
update: function(fields, related){ // 修改行数据
|
||||
fields = fields || {};
|
||||
layui.each(fields, function(key, value){
|
||||
var td = tr.children('td[data-field="'+ key +'"]');
|
||||
var cell = td.children(ELEM_CELL); //获取当前修改的列
|
||||
var cell = td.children(ELEM_CELL); // 获取当前修改的列
|
||||
|
||||
// 更新缓存中的数据
|
||||
data[key] = obj.data[key] = value;
|
||||
@ -2175,9 +2158,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 +2183,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 +2222,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(
|
||||
@ -2274,12 +2254,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
|
||||
}).on('click', 'tr', function(e){ // 单击行
|
||||
// 不支持行单击事件的元素
|
||||
var UNROW = '.layui-form-checkbox,.layui-form-radio,[lay-unrow]';
|
||||
var container = $(this).find(UNROW);
|
||||
if(
|
||||
$(e.target).is(UNROW) ||
|
||||
container[0] && $.contains(container[0], e.target)
|
||||
){
|
||||
var UNROW = '.layui-form-checkbox,.layui-form-switch,.layui-form-radio,[lay-unrow]';
|
||||
if( $(e.target).is(UNROW) || $(e.target).closest(UNROW)[0]){
|
||||
return;
|
||||
};
|
||||
setRowEvent.call(this, 'row');
|
||||
@ -2464,7 +2440,10 @@ 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');
|
||||
// 标记当前活动行
|
||||
that.setRowActive(index);
|
||||
|
||||
// 执行事件
|
||||
layui.event.call(
|
||||
this,
|
||||
MOD_NAME,
|
||||
@ -2476,11 +2455,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
})
|
||||
);
|
||||
// 设置当前行选中样式
|
||||
that.setRowChecked({
|
||||
type: 'radio',
|
||||
index: index
|
||||
}, true);
|
||||
};
|
||||
|
||||
// 行工具条单击事件
|
||||
@ -2667,15 +2641,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 获取表格选中状态
|
||||
table.checkStatus = function(id){
|
||||
var nums = 0
|
||||
,invalidNum = 0
|
||||
,arr = []
|
||||
,data = table.cache[id] || [];
|
||||
var nums = 0;
|
||||
var invalidNum = 0;
|
||||
var arr = [];
|
||||
var data = table.cache[id] || [];
|
||||
|
||||
//计算全选个数
|
||||
layui.each(data, function(i, item){
|
||||
if(layui.type(item) === 'array'){
|
||||
invalidNum++; //无效数据,或已删除的
|
||||
invalidNum++; // 无效数据,或已删除的
|
||||
return;
|
||||
}
|
||||
if(item[table.config.checkName]){
|
||||
@ -2686,8 +2660,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
});
|
||||
return {
|
||||
data: arr //选中的数据
|
||||
,isAll: data.length ? (nums === (data.length - invalidNum)) : false //是否全选
|
||||
data: arr, // 选中的数据
|
||||
isAll: data.length ? (nums === (data.length - invalidNum)) : false // 是否全选
|
||||
};
|
||||
};
|
||||
|
||||
@ -2765,7 +2739,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
});
|
||||
} else {
|
||||
table.eachCols(id, function(i3, item3){
|
||||
if(item3.field && item3.type == 'normal'){
|
||||
if(item3.ignoreExport === false || item3.field && item3.type == 'normal'){
|
||||
// 不导出隐藏列
|
||||
if(item3.hide || item3.ignoreExport){
|
||||
if(i1 == 0) fieldsIsHide[item3.field] = true; // 记录隐藏列
|
||||
@ -2806,7 +2780,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 表合计
|
||||
thatTable && layui.each(thatTable.dataTotal, function(i, o){
|
||||
fieldsIsHide[o.field] || dataTotal.push(o.total + '\t');
|
||||
fieldsIsHide[o.field] || dataTotal.push(o.total);
|
||||
});
|
||||
|
||||
return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(',');
|
||||
|
@ -54,11 +54,6 @@ layui.define(['table'], function (exports) {
|
||||
return that || null;
|
||||
}
|
||||
|
||||
// 获取当前实例配置项
|
||||
var getThisTableConfig = function (id) {
|
||||
return getThisTable(id).config;
|
||||
}
|
||||
|
||||
// 字符
|
||||
var MOD_NAME = 'treeTable';
|
||||
var HIDE = 'layui-hide';
|
||||
@ -166,9 +161,6 @@ layui.define(['table'], function (exports) {
|
||||
if (treeOptions.data.isSimpleData) {
|
||||
options.data = that.flatToTree(options.data);
|
||||
}
|
||||
if (options.initSort && options.initSort.type) {
|
||||
layui.sort(options.data, options.initSort.field, options.initSort.type === 'desc', true)
|
||||
}
|
||||
that.initData(options.data);
|
||||
}
|
||||
|
||||
@ -176,6 +168,10 @@ layui.define(['table'], function (exports) {
|
||||
options.done = function () {
|
||||
var args = arguments;
|
||||
var doneThat = this;
|
||||
var isRenderData = args[3]; // 是否是 renderData
|
||||
if (!isRenderData) {
|
||||
delete that.isExpandAll;
|
||||
}
|
||||
|
||||
var tableView = this.elem.next();
|
||||
that.updateStatus(null, {
|
||||
@ -229,7 +225,7 @@ layui.define(['table'], function (exports) {
|
||||
name: "name", // 节点数据保存节点名称的属性名称
|
||||
id: "id", // 唯一标识的属性名称
|
||||
pid: "parentId", // 父节点唯一标识的属性名称
|
||||
icon: "icon", // 图标的属性名称
|
||||
icon: "icon" // 图标的属性名称
|
||||
},
|
||||
view: {
|
||||
indent: 14, // 层级缩进量
|
||||
@ -242,6 +238,7 @@ layui.define(['table'], function (exports) {
|
||||
iconLeaf: '<i class="layui-icon layui-icon-leaf"></i>', // 叶子节点的图标
|
||||
showFlexIconIfNotParent: false, // 当节点不是父节点的时候是否显示折叠图标
|
||||
dblClickExpand: true, // 双击节点时,是否自动展开父节点的标识
|
||||
expandAllDefault: false // 默认展开所有节点
|
||||
},
|
||||
data: {
|
||||
isSimpleData: false, // 是否简单数据模式
|
||||
@ -254,11 +251,11 @@ layui.define(['table'], function (exports) {
|
||||
contentType: null, // 提交参数的数据类型,设置可缺省同上
|
||||
headers: null, // 设置可缺省同上
|
||||
where: null, // 设置可缺省同上
|
||||
autoParam: [], // 自动参数
|
||||
autoParam: [] // 自动参数
|
||||
},
|
||||
callback: {
|
||||
beforeExpand: null, // 展开前的回调 return false 可以阻止展开的动作
|
||||
onExpand: null, // 展开之后的回调
|
||||
onExpand: null // 展开之后的回调
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -738,6 +735,7 @@ layui.define(['table'], function (exports) {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
treeTableThat.isExpandAll = false;
|
||||
// 关闭
|
||||
if (sonSign && !isToggle) { // 非状态切换的情况下
|
||||
layui.each(childNodes, function (i1, item1) {
|
||||
@ -812,8 +810,9 @@ layui.define(['table'], function (exports) {
|
||||
}
|
||||
|
||||
var that = getThisTable(id);
|
||||
if(!that) return;
|
||||
if (!that) return;
|
||||
|
||||
that.isExpandAll = expandFlag;
|
||||
var options = that.getOptions();
|
||||
var treeOptions = options.tree;
|
||||
var tableView = options.elem.next();
|
||||
@ -1012,6 +1011,10 @@ layui.define(['table'], function (exports) {
|
||||
});
|
||||
});
|
||||
|
||||
if (!level && treeOptions.view.expandAllDefault && that.isExpandAll === undefined) {
|
||||
return treeTable.expandAll(tableId, true); // 默认展开全部
|
||||
}
|
||||
|
||||
// 当前层的数据看看是否需要展开
|
||||
if (sonSign !== false && dataExpand) {
|
||||
layui.each(dataExpand, function (index, item) {
|
||||
@ -1064,7 +1067,7 @@ layui.define(['table'], function (exports) {
|
||||
});
|
||||
|
||||
// 根据需要处理options中的一些参数
|
||||
updateOptions(that.config.id, options, type || true);
|
||||
updateOptions(that.getOptions().id, options, type || true);
|
||||
|
||||
// 对参数进行深度或浅扩展
|
||||
that.config = $.extend(deep, {}, that.config, options);
|
||||
@ -1128,26 +1131,9 @@ layui.define(['table'], function (exports) {
|
||||
if(!that) return;
|
||||
|
||||
var options = that.getOptions();
|
||||
var initSort = options.initSort;
|
||||
|
||||
if (!options.url) {
|
||||
if (initSort.type) {
|
||||
layui.sort(options.data, initSort.field, initSort.type === 'desc', true);
|
||||
} else {
|
||||
layui.sort(options.data, table.config.indexName, null, true);
|
||||
}
|
||||
that.initData(options.data);
|
||||
treeTable.reloadData(id);
|
||||
} else {
|
||||
// url异步取数的表格一般需要自己添加监听之后进行reloadData并且把排序参数加入到where中
|
||||
if (options.autoSort) {
|
||||
var tableData = that.initData();
|
||||
var res = {};
|
||||
res[options.response.dataName] = tableData;
|
||||
typeof options.done === 'function' && options.done(
|
||||
res, that.page, that.count
|
||||
);
|
||||
}
|
||||
if (!options.url || options.autoSort) {
|
||||
that.initData();
|
||||
treeTable.renderData(id);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1856,12 +1842,9 @@ layui.define(['table'], function (exports) {
|
||||
// 重载
|
||||
treeTable.reload = function (id, options, deep, type) {
|
||||
deep = deep !== false; // 默认采用深拷贝
|
||||
var config = getThisTableConfig(id); // 获取当前实例配置项
|
||||
if (!config) return;
|
||||
|
||||
var that = getThisTable(id);
|
||||
if (!that) return;
|
||||
that.reload(options, deep, type);
|
||||
|
||||
return thisTreeTable.call(that);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user