mirror of https://github.com/layui/layui
commit
13cc163309
File diff suppressed because one or more lines are too long
|
@ -36,6 +36,16 @@
|
|||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
设定实例唯一索引,以便用于其他方法对例进行相关操作。若该属性未设置,则默认从 `elem` 属性绑定的元素中的 `id` 属性值中获取。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
@ -5,7 +5,7 @@ toc: true
|
|||
|
||||
<h1 id="introduce" lay-toc="{title: '简介'}">开始使用</h1>
|
||||
|
||||
> Layui 是一套开源免费的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现的元素与交互信手拈来。
|
||||
> Layui 是一套免费的开源 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现的元素与交互信手拈来。
|
||||
|
||||
<p style="font-size: 68px; text-align: center; color: #16baaa;">
|
||||
Layui
|
||||
|
|
|
@ -53,6 +53,16 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
设定实例唯一索引,以便用于其他方法对例进行相关操作。若该属性未设置,则默认从 `elem` 属性绑定的元素中的 `id` 属性值中获取。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[range](#options.range)
|
||||
|
|
|
@ -37,7 +37,8 @@ layui.use(function(){
|
|||
element.tabAdd('test-handle', {
|
||||
title: '新选项'+ label,
|
||||
content: '内容-'+ label,
|
||||
id: new Date().getTime() // 实际使用一般是规定好的id,这里以时间戳模拟下
|
||||
id: new Date().getTime(), // 实际使用一般是规定好的id,这里以毫秒数模拟
|
||||
change: true // 是否添加完毕后即自动切换
|
||||
})
|
||||
},
|
||||
tabDelete: function(othis){
|
||||
|
|
|
@ -182,11 +182,12 @@ layui.use(function(){
|
|||
- 参数 `filter` : tab 容器(`class="layui-tab"`)的 `lay-filter` 属性值
|
||||
- 参数 `options` : 添加 tab 时的属性可选项,见下表:
|
||||
|
||||
| options | 描述 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| title | 选项卡的标题 | string |
|
||||
| content | 选项卡的内容,支持传入 `html` | string |
|
||||
| id | 选项卡标题元素的 `lay-id` 属性值 | string |
|
||||
| options | 描述 | 类型 | 默认 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 选项卡的标题 | string | - |
|
||||
| content | 选项卡的内容,支持传入 `html` | string | - |
|
||||
| id | 选项卡标题元素的 `lay-id` 属性值 | string | - |
|
||||
| change | 是否添加 tab 完毕后即自动切换 | boolean | `false` |
|
||||
|
||||
该方法用于添加 tab 选项。用法详见 : [#示例](#examples)
|
||||
|
||||
|
|
|
@ -20,10 +20,12 @@ toc: true
|
|||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var table = layui.table | 获得 `table` 模块。 |
|
||||
| [table.set(options)](#set) | 设定全局默认属性项。 |
|
||||
| [table.render(options)](#render) | table 组件渲染,核心方法。 |
|
||||
| [table.init(filter, options)](#table.init) | 初始化渲染静态表格。 |
|
||||
| [table.reload(id, options, deep)](#table.reload) | 表格完整重载。 |
|
||||
| [table.reloadData(id, options, deep)](#table.reloadData) <sup>2.7+</sup> | 表格数据重载。 |
|
||||
| [table.renderData(id)](#table.renderData) <sup>2.8.5+</sup> | 重新渲染数据。 |
|
||||
| [table.checkStatus(id)](#table.checkStatus) | 获取选中行相关数据。 |
|
||||
| [table.setRowChecked(id, opts)](#table.setRowChecked) <sup>2.8+</sup> | 设置行选中状态。 |
|
||||
| [table.getData(id)](#table.getData) | 获取当前页所有行表格数据。 |
|
||||
|
@ -35,6 +37,25 @@ toc: true
|
|||
| [table.on(\'event(filter)\', callback)](#table.on) | table 相关事件。 |
|
||||
|
||||
|
||||
<h3 id="set" class="ws-anchor ws-bold">全局设置</h3>
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
该方法主要用于初始化设置属性默认值。实际应用时,必须先设置该方法,再执行渲染、重载等操作。
|
||||
|
||||
```js
|
||||
layui.use(function(){
|
||||
var table = layui.table;
|
||||
// 全局设置
|
||||
table.set({
|
||||
headers: {token: '123'}
|
||||
});
|
||||
// 渲染
|
||||
table.render(options);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}" class="ws-anchor ws-bold">渲染</h3>
|
||||
|
||||
table 提供了以下三种渲染模式,在实际使用时,一般按情况选择其中一种即可。
|
||||
|
@ -266,6 +287,31 @@ table.reloadData('test', {
|
|||
});
|
||||
```
|
||||
|
||||
<h3 id="table.renderData" lay-pid="api" class="ws-anchor ws-bold">重新渲染数据 <sup>2.8.5+</sup></h3>
|
||||
|
||||
`table.renderData(id);`
|
||||
- 参数 `id` : table 渲染时的 `id` 属性值
|
||||
|
||||
该方法用于重新渲染数据,一般在修改 `table.cache` 后使用。
|
||||
|
||||
```js
|
||||
// 渲染
|
||||
table.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id 索引
|
||||
// 其他属性 …
|
||||
});
|
||||
// 获取当前实例的数据缓存
|
||||
var data = table.cache['test'];
|
||||
// 获取某行数据,并从 data 中移除该行
|
||||
var item = data.splice(index, 1) // index 为当前行下标,一般可在事件中通过 obj.index 得到
|
||||
// 将某行数据移动到另外某行
|
||||
data.splice(newIndex, 0, item[0]);
|
||||
// 根据 table.cache 重新渲染数据
|
||||
table.renderData('test');
|
||||
```
|
||||
|
||||
|
||||
<h3 id="table.checkStatus" lay-pid="api" class="ws-anchor ws-bold">获取选中行</h3>
|
||||
|
||||
`table.checkStatus(id);`
|
||||
|
|
|
@ -11,6 +11,33 @@ toc: true
|
|||
|
||||
> 导读:📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
|
||||
|
||||
<h2 id="2.8.5" class="ws-anchor">
|
||||
2.8.5
|
||||
<span class="layui-badge-rim">2023-06-08</span>
|
||||
</h2>
|
||||
|
||||
- #### table
|
||||
- 新增 `table.renderData(id)` 方法,用于重新渲染数据,可搭配 `table.cache` 使用 # 1273
|
||||
- 修复 `table.hideCol(id, cols)` 第二个参数为普通对象时的异常问题 # 1270/I7AAUN
|
||||
- 修复 多级表头在某些缩放比例的情况下出现表头跟表体错位问题 # 1273/I7A33T
|
||||
- 修复 `table.getTrHtml()` 方法 `tr` 节点代码中的 `numbers` 列信息错误问题
|
||||
- 优化 `table setRowChecked()` 方法中标注当前选中行样式的判断逻辑 # 1273
|
||||
- #### treeTable
|
||||
- 修复 `treeTable.expandAll()` 展开全部之后节点的折叠状态没有记忆的问题 # 1273
|
||||
- 修复 无主键的树表 reloadData 之后节点被展开的问题 # 1273
|
||||
- 修复 部分情况下父节点展开之后子节点中的单选复选列和其他表单元素没有渲染的问题 1273/I7AWNV
|
||||
- 修复 初始化无数据时出现的数据报错的问题 # 1273
|
||||
- #### tab
|
||||
- 修复 删除选项卡时,若标题栏存在其他元素,下标获取异常的问题 # 1271/I7AO7F
|
||||
- 优化 `element.tabAdd()` 方法,第二个参数中新增 `change` 属性支持,以支持添加即自动切换功能
|
||||
- 优化 折叠功能,切换选项时不自动折叠选项卡,且添加选项时若处于折叠状态则自动展开 # I79HUD
|
||||
- #### util
|
||||
- 修复 fixbar 中添加了无效样式问题 # I79JTH
|
||||
|
||||
### 下载: [layui-v2.8.5.zip](https://gitee.com/layui/layui/attach_files/1432345/download)
|
||||
|
||||
---
|
||||
|
||||
<h2 id="2.8.4" class="ws-anchor">
|
||||
2.8.4
|
||||
<span class="layui-badge-rim">2023-05-30</span>
|
||||
|
|
|
@ -32,7 +32,7 @@ body{padding:20px;}
|
|||
</div>
|
||||
|
||||
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date, change: true})">添加Tab</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
|
@ -78,16 +78,18 @@ body{padding:20px;}
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this"><a href="#1">标题题题题题题1</a></li>
|
||||
<li><a href="#2">标题题题2</a></li>
|
||||
<li><a href="#3">标题3</a></li>
|
||||
<li><a href="#4">标题题题题题题题4</a></li>
|
||||
<li><a href="#5">标题5</a></li>
|
||||
<li><a href="#6">标题6</a></li>
|
||||
<li><a href="#7">标题7</a></li>
|
||||
<li><a href="#8">标题题题题题题题8</a></li>
|
||||
</ul>
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this"><a href="#1">标题题题题题题1</a></li>
|
||||
<li><a href="#2">标题题题2</a></li>
|
||||
<li><a href="#3">标题3</a></li>
|
||||
<li><a href="#4">标题题题题题题题4</a></li>
|
||||
<li><a href="#5">标题5</a></li>
|
||||
<li><a href="#6">标题6</a></li>
|
||||
<li><a href="#7">标题7</a></li>
|
||||
<li><a href="#8">标题题题题题题题8</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
|
||||
<ul class="layui-tab-title">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "layui",
|
||||
"version": "2.8.4",
|
||||
"version": "2.8.5",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"main": "dist/layui.js",
|
||||
"license": "MIT",
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
};
|
||||
|
||||
var Layui = function(){
|
||||
this.v = '2.8.4'; // Layui 版本号
|
||||
this.v = '2.8.5'; // Layui 版本号
|
||||
};
|
||||
|
||||
// 识别预先可能定义的指定全局对象
|
||||
|
|
|
@ -49,8 +49,11 @@ layui.define('jquery', function(exports){
|
|||
|
||||
barElem[0] ? barElem.before(li) : titElem.append(li);
|
||||
contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
|
||||
call.hideTabMore(true);
|
||||
call.tabAuto();
|
||||
// call.hideTabMore(true);
|
||||
// 是否添加即切换
|
||||
options.change && this.tabChange(filter, options.id);
|
||||
titElem.data('LAY_TAB_CHANGE', options.change);
|
||||
call.tabAuto(options.change ? 'change' : null);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
@ -152,7 +155,7 @@ layui.define('jquery', function(exports){
|
|||
// Tab 删除
|
||||
,tabDelete: function(e, othis){
|
||||
var li = othis || $(this).parent();
|
||||
var index = li.index();
|
||||
var index = li.index('li');
|
||||
var tabElem = li.closest('.layui-tab');
|
||||
var item = tabElem.children('.layui-tab-content').children('.layui-tab-item');
|
||||
var filter = tabElem.attr('lay-filter');
|
||||
|
@ -180,19 +183,22 @@ layui.define('jquery', function(exports){
|
|||
}
|
||||
|
||||
// Tab 自适应
|
||||
,tabAuto: function(){
|
||||
var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar'
|
||||
,CLOSE = 'layui-tab-close', that = this;
|
||||
,tabAuto: function(spread){
|
||||
var SCROLL = 'layui-tab-scroll';
|
||||
var MORE = 'layui-tab-more';
|
||||
var BAR = 'layui-tab-bar';
|
||||
var CLOSE = 'layui-tab-close';
|
||||
var that = this;
|
||||
|
||||
$('.layui-tab').each(function(){
|
||||
var othis = $(this)
|
||||
,title = othis.children('.layui-tab-title')
|
||||
,item = othis.children('.layui-tab-content').children('.layui-tab-item')
|
||||
,STOPE = 'lay-stope="tabmore"'
|
||||
,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
|
||||
var othis = $(this);
|
||||
var title = othis.children('.layui-tab-title');
|
||||
var item = othis.children('.layui-tab-content').children('.layui-tab-item');
|
||||
var STOPE = 'lay-stope="tabmore"';
|
||||
var span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
|
||||
|
||||
if(that === window && device.ie != 8){
|
||||
call.hideTabMore(true)
|
||||
// call.hideTabMore(true)
|
||||
}
|
||||
|
||||
// 开启关闭图标
|
||||
|
@ -210,16 +216,28 @@ layui.define('jquery', function(exports){
|
|||
if(typeof othis.attr('lay-unauto') === 'string') return;
|
||||
|
||||
// 响应式
|
||||
if(title.prop('scrollWidth') > title.outerWidth()+1){
|
||||
if(
|
||||
title.prop('scrollWidth') > title.outerWidth() + 1 ||
|
||||
title.height() > function(height){
|
||||
return height + height/2;
|
||||
}(title.find('li').eq(0).height())
|
||||
){
|
||||
// 若执行是来自于切换,则自动展开
|
||||
(
|
||||
spread === 'change' && title.data('LAY_TAB_CHANGE')
|
||||
) && title.addClass(MORE);
|
||||
|
||||
if(title.find('.'+BAR)[0]) return;
|
||||
title.append(span);
|
||||
othis.attr('overflow', '');
|
||||
|
||||
// 展开图标事件
|
||||
span.on('click', function(e){
|
||||
title[this.title ? 'removeClass' : 'addClass'](MORE);
|
||||
this.title = this.title ? '' : '收缩';
|
||||
var isSpread = title.hasClass(MORE);
|
||||
title[isSpread ? 'removeClass' : 'addClass'](MORE);
|
||||
});
|
||||
} else {
|
||||
title.find('.'+BAR).remove();
|
||||
title.find('.'+ BAR).remove();
|
||||
othis.removeAttr('overflow');
|
||||
}
|
||||
});
|
||||
|
@ -530,7 +548,7 @@ layui.define('jquery', function(exports){
|
|||
});
|
||||
|
||||
dom.on('click', '.layui-tab-title li', call.tabClick); // Tab 切换
|
||||
dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
|
||||
// dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
|
||||
$(window).on('resize', call.tabAuto); // 自适应
|
||||
|
||||
exports(MOD_NAME, element);
|
||||
|
|
|
@ -686,7 +686,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
});
|
||||
|
||||
// 给组合表头赋值最大宽度
|
||||
if(maxWidth) othis.css('max-width', maxWidth);
|
||||
if(maxWidth) othis.css('max-width', maxWidth - 1);
|
||||
|
||||
// 若当前活动的组合表头仍存在上级,则继续向上设置
|
||||
if(th && othis.parent().data('parentkey')){
|
||||
|
@ -929,6 +929,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
});
|
||||
}
|
||||
};
|
||||
var done = function(res){
|
||||
that.setColsWidth();
|
||||
typeof options.done === 'function' && options.done(
|
||||
res, curr, res[response.countName]
|
||||
);
|
||||
};
|
||||
|
||||
opts = opts || {};
|
||||
|
||||
|
@ -938,7 +944,23 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
);
|
||||
that.startTime = new Date().getTime(); // 渲染开始时间
|
||||
|
||||
if(options.url){ // Ajax请求
|
||||
if (opts.renderData) { // 将 cache 信息重新渲染
|
||||
var res = {};
|
||||
res[response.dataName] = table.cache[that.key];
|
||||
res[response.countName] = options.url ? (layui.type(options.page) === 'object' ? options.page.count : res[response.dataName].length) : options.data.length;
|
||||
|
||||
// 记录合计行数据
|
||||
if(typeof options.totalRow === 'object'){
|
||||
res[response.totalRowName] = $.extend({}, that.totalRow);
|
||||
}
|
||||
|
||||
that.renderData({
|
||||
res: res,
|
||||
curr: curr,
|
||||
count: res[response.countName],
|
||||
type: opts.type,
|
||||
}), sort(), done(res);
|
||||
} else if(options.url){ // Ajax请求
|
||||
var params = {};
|
||||
// 当 page 开启,默认自动传递 page、limit 参数
|
||||
if(options.page){
|
||||
|
@ -955,14 +977,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
that.loading();
|
||||
|
||||
$.ajax({
|
||||
type: options.method || 'get'
|
||||
,url: options.url
|
||||
,contentType: options.contentType
|
||||
,data: data
|
||||
,dataType: options.dataType || 'json'
|
||||
,jsonpCallback: options.jsonpCallback
|
||||
,headers: options.headers || {}
|
||||
,success: function(res){
|
||||
type: options.method || 'get',
|
||||
url: options.url,
|
||||
contentType: options.contentType,
|
||||
data: data,
|
||||
dataType: options.dataType || 'json',
|
||||
jsonpCallback: options.jsonpCallback,
|
||||
headers: options.headers || {},
|
||||
success: function(res){
|
||||
// 若有数据解析的回调,则获得其返回的数据
|
||||
if(typeof options.parseData === 'function'){
|
||||
res = options.parseData(res) || res;
|
||||
|
@ -974,6 +996,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
('返回的数据不符合规范,正确的成功状态码应为:"'+ response.statusName +'": '+ response.statusCode)
|
||||
);
|
||||
} else {
|
||||
that.totalRow = res[response.totalRowName];
|
||||
that.renderData({
|
||||
res: res,
|
||||
curr: curr,
|
||||
|
@ -981,15 +1004,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
type: opts.type
|
||||
}), sort();
|
||||
|
||||
//耗时(接口请求+视图渲染)
|
||||
// 耗时(接口请求+视图渲染)
|
||||
options.time = (new Date().getTime() - that.startTime) + ' ms';
|
||||
}
|
||||
that.setColsWidth();
|
||||
typeof options.done === 'function' && options.done(
|
||||
res, curr, res[response.countName]
|
||||
);
|
||||
}
|
||||
,error: function(e, msg){
|
||||
done(res);
|
||||
},
|
||||
error: function(e, msg){
|
||||
that.errorView('请求异常,错误提示:'+ msg);
|
||||
typeof options.error === 'function' && options.error(e, msg);
|
||||
}
|
||||
|
@ -1004,10 +1024,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
: newData;
|
||||
res[response.countName] = options.data.length;
|
||||
|
||||
//记录合计行数据
|
||||
// 记录合计行数据
|
||||
if(typeof options.totalRow === 'object'){
|
||||
res[response.totalRowName] = $.extend({}, options.totalRow);
|
||||
}
|
||||
that.totalRow = res[response.totalRowName];
|
||||
|
||||
that.renderData({
|
||||
res: res,
|
||||
|
@ -1016,11 +1037,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
type: opts.type
|
||||
}), sort();
|
||||
|
||||
that.setColsWidth();
|
||||
|
||||
typeof options.done === 'function' && options.done(
|
||||
res, curr, res[response.countName]
|
||||
);
|
||||
done(res);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1186,7 +1203,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
// 返回行节点代码
|
||||
table.getTrHtml = function (id, data) {
|
||||
var that = getThisTable(id);
|
||||
return that.getTrHtml(data);
|
||||
return that.getTrHtml(data, null, that.page);
|
||||
}
|
||||
|
||||
// 数据渲染
|
||||
|
@ -1196,7 +1213,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
|
||||
var res = opts.res;
|
||||
var curr = opts.curr;
|
||||
var count = opts.count;
|
||||
var count = that.count = opts.count;
|
||||
var sort = opts.sort;
|
||||
|
||||
var data = res[options.response.dataName] || []; //列表数据
|
||||
|
@ -1318,6 +1335,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
}
|
||||
};
|
||||
|
||||
// 重新渲染数据
|
||||
table.renderData = function (id) {
|
||||
var that = getThisTable(id);
|
||||
if (!that) {
|
||||
return;
|
||||
}
|
||||
|
||||
that.pullData(that.page, {
|
||||
renderData: true,
|
||||
type: 'reloadData'
|
||||
});
|
||||
}
|
||||
|
||||
// 数据合计行
|
||||
Class.prototype.renderTotal = function(data, totalRowData){
|
||||
var that = this;
|
||||
|
@ -1454,7 +1484,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
}, opts);
|
||||
|
||||
// 标注当前行选中样式
|
||||
if(opts.type !== 'checkbox' && opts.index !== 'all'){
|
||||
if(opts.index !== 'all'){
|
||||
tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK);
|
||||
}
|
||||
|
||||
|
@ -2817,6 +2847,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
}
|
||||
})
|
||||
} else {
|
||||
cols = layui.isArray(cols) ? cols : [cols];
|
||||
layui.each(cols, function (i1, item1) {
|
||||
that.eachCols(function (i2, item2) {
|
||||
if (item1.field === item2.field) {
|
||||
|
|
|
@ -26,7 +26,8 @@ layui.define(['table'], function (exports) {
|
|||
},
|
||||
resize: table.resize,
|
||||
getOptions: table.getOptions,
|
||||
hideCol: table.hideCol
|
||||
hideCol: table.hideCol,
|
||||
renderData: table.renderData
|
||||
};
|
||||
|
||||
// 操作当前实例
|
||||
|
@ -146,7 +147,7 @@ layui.define(['table'], function (exports) {
|
|||
}
|
||||
// 处理节点状态
|
||||
updateStatus(retData[dataName], function (item) {
|
||||
item[LAY_EXPAND] = that.status.expand[item[idKey]]
|
||||
item[LAY_EXPAND] = LAY_EXPAND in item ? item[LAY_EXPAND] : (item[idKey] !== undefined && that.status.expand[item[idKey]])
|
||||
}, childrenKey);
|
||||
|
||||
if (parseDataThat.autoSort && parseDataThat.initSort && parseDataThat.initSort.type) {
|
||||
|
@ -561,8 +562,9 @@ layui.define(['table'], function (exports) {
|
|||
treeOptions.view.showIcon && trsElem
|
||||
.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)')
|
||||
.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose);
|
||||
|
||||
treeTableThat.status.expand[trData[customName.id]] = trData[LAY_EXPAND] = trExpand;
|
||||
trData[LAY_EXPAND] = trExpand;
|
||||
var trDataId = trData[customName.id];
|
||||
trDataId !== undefined && (treeTableThat.status.expand[trDataId] = trExpand);
|
||||
if (retValue === null) {
|
||||
return retValue;
|
||||
}
|
||||
|
@ -816,15 +818,18 @@ layui.define(['table'], function (exports) {
|
|||
var treeOptions = options.tree;
|
||||
var tableView = options.elem.next();
|
||||
var isParentKey = treeOptions.customName.isParent;
|
||||
var idKey = treeOptions.customName.id;
|
||||
var showFlexIconIfNotParent = treeOptions.view.showFlexIconIfNotParent;
|
||||
|
||||
if (!expandFlag) {
|
||||
// 关闭所有
|
||||
// 将所有已经打开的节点的状态设置为关闭,
|
||||
that.updateStatus(null, function (d) {
|
||||
if (d[isParentKey]) {
|
||||
if (d[isParentKey] || showFlexIconIfNotParent) {
|
||||
d[LAY_EXPAND] = false;
|
||||
d[idKey] !== undefined && (that.status.expand[d[idKey]] = false);
|
||||
}
|
||||
}) // {LAY_EXPAND: false}); // 只处理当前页,如果需要处理全部表格,需要用treeTable.updateStatus
|
||||
}) // 只处理当前页,如果需要处理全部表格,需要用treeTable.updateStatus
|
||||
// 隐藏所有非顶层的节点
|
||||
tableView.find('.layui-table-box tbody tr[data-level!="0"]').addClass(HIDE);
|
||||
|
||||
|
@ -862,7 +867,7 @@ layui.define(['table'], function (exports) {
|
|||
// 先判断是否全部打开过了
|
||||
var isAllExpanded = true;
|
||||
layui.each(tableDataFlat, function (i1, item1) {
|
||||
if (!item1[LAY_HAS_EXPANDED]) {
|
||||
if (item1[isParentKey] && !item1[LAY_HAS_EXPANDED]) {
|
||||
isAllExpanded = false;
|
||||
return true;
|
||||
}
|
||||
|
@ -870,8 +875,9 @@ layui.define(['table'], function (exports) {
|
|||
// 如果全部节点已经都打开过,就可以简单处理跟隐藏所有节点反操作
|
||||
if (isAllExpanded) {
|
||||
that.updateStatus(null, function (d) {
|
||||
if (d[isParentKey]) {
|
||||
if (d[isParentKey] || showFlexIconIfNotParent) {
|
||||
d[LAY_EXPAND] = true;
|
||||
d[idKey] !== undefined && (that.status.expand[d[idKey]] = true);
|
||||
}
|
||||
});
|
||||
// 显示所有子节点
|
||||
|
@ -884,9 +890,10 @@ layui.define(['table'], function (exports) {
|
|||
} else {
|
||||
// 如果有未打开过的父节点,将 tr 内容全部重新生成
|
||||
that.updateStatus(null, function (d) {
|
||||
if (d[isParentKey]) {
|
||||
if (d[isParentKey] || showFlexIconIfNotParent) {
|
||||
d[LAY_EXPAND] = true;
|
||||
d[LAY_HAS_EXPANDED] = true;
|
||||
d[idKey] !== undefined && (that.status.expand[d[idKey]] = true);
|
||||
}
|
||||
});
|
||||
if (options.initSort && options.initSort.type && (!options.url || options.autoSort)) {
|
||||
|
@ -964,7 +971,7 @@ layui.define(['table'], function (exports) {
|
|||
trElem = tableViewElem.find('tr[lay-data-index="' + trIndex + '"]');
|
||||
var trData = treeTableThat.getNodeDataByIndex(trIndex);
|
||||
|
||||
if (trData[LAY_EXPAND]) {
|
||||
if (trData[LAY_EXPAND] && trData[isParentKey]) {
|
||||
// 需要展开
|
||||
dataExpand = dataExpand || {};
|
||||
dataExpand[trIndex] = true;
|
||||
|
@ -1015,7 +1022,7 @@ layui.define(['table'], function (exports) {
|
|||
} else {
|
||||
debounceFn('renderTreeTable-' + tableId, function () {
|
||||
options.hasNumberCol && formatNumber(that);
|
||||
form.render(null, tableFilterId);
|
||||
form.render(options.elem.next());
|
||||
}, 0)();
|
||||
}
|
||||
}
|
||||
|
@ -1296,6 +1303,11 @@ layui.define(['table'], function (exports) {
|
|||
// 将新节点添加到页面
|
||||
tableData = that.initData();
|
||||
|
||||
if (tableViewElem.find('.layui-none').length) {
|
||||
table.renderData(id);
|
||||
return newNodes;
|
||||
}
|
||||
|
||||
var newNodesHtml = table.getTrHtml(id, newNodes);
|
||||
var newNodesHtmlObj = {
|
||||
trs: $(newNodesHtml.trs.join('')),
|
||||
|
@ -1360,7 +1372,7 @@ layui.define(['table'], function (exports) {
|
|||
}
|
||||
// 删除已经存在的同级节点以及他们的子节点,并且把中间节点的已展开过的状态设置为false
|
||||
that.updateStatus(childrenNodes, function (d) {
|
||||
if (d[isParentKey]) {
|
||||
if (d[isParentKey] || treeOptions.view.showFlexIconIfNotParent) {
|
||||
d[LAY_HAS_EXPANDED] = false;
|
||||
}
|
||||
});
|
||||
|
@ -1766,7 +1778,7 @@ layui.define(['table'], function (exports) {
|
|||
* @param {String} id 表格id
|
||||
* @param {String} dataIndex 父节点的dataIndex
|
||||
* */
|
||||
treeTable.reAsync = function (id, dataIndex) {
|
||||
treeTable.reloadAsyncNode = function (id, dataIndex) {
|
||||
var that = getThisTable(id);
|
||||
if (!that) {
|
||||
return;
|
||||
|
|
|
@ -64,7 +64,7 @@ layui.define('jquery', function(exports){
|
|||
// 设置 bar 相关属性
|
||||
elemBar.addClass(item.icon).attr({
|
||||
'lay-type': item.type,
|
||||
'style': item.style || ('background-color: '+ options.bgcolor || '')
|
||||
'style': item.style || (options.bgcolor ? 'background-color: '+ options.bgcolor : '')
|
||||
}).html(item.content);
|
||||
|
||||
// bar 点击事件
|
||||
|
|
Loading…
Reference in New Issue