github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

release v2.8.14 

release v2.8.14
pull/1326/head v2.8.14
贤心 2023-08-16 10:31:24 +08:00 committed by GitHub
parent 2c057c8faf 9a3e6b8c93
commit ea44bceae5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 469 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/layui.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/layui.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/base.md
View File

@ -15,10 +15,10 @@ toc: true
``` ```
layui.config({ layui.config({
base: '' // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用 base: '', // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值 version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置 dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置
debug: false, // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面 debug: false // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
}); });
``` ```

14
docs/dropdown/detail/options.md
View File

@ -215,6 +215,20 @@ templet: function(d){
</td> </td>
<td>string</td> <td>string</td>
<td>-</td>
</tr>
<tr>
<td>
[customName](#options.customName) <sup>2.8.14+</sup>
</td>
<td>
自定义 `data` 数据源中常用的字段名称。
</td>
<td>object</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>

21
docs/dropdown/index.md
View File

@ -71,6 +71,27 @@ layui.use(function(){
{{- d.include("/dropdown/detail/options.data.md") }} {{- d.include("/dropdown/detail/options.data.md") }}
</div> </div>
<div id="options.customName" class="ws-anchor">
您可以对上述 `data` 中常用的字段进行自定义名称 <sup>2.8.14+</sup> :
</div>
```
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '', // 绑定元素选择器
data: [], // 数据源
customName: { // 自定义 data 字段名 --- 2.8.14+
id: 'id',
title: 'title',
children: 'child'
},
// 其他属性 …
});
```
<h3 id="reload" lay-toc="{level: 2, hot: true}">重载</h3> <h3 id="reload" lay-toc="{level: 2, hot: true}">重载</h3>

2
docs/table/examples/demo.md
View File

@ -90,7 +90,7 @@ layui.use(['table', 'dropdown'], function(){
var td = obj.td(this.field); // 获取当前 td var td = obj.td(this.field); // 获取当前 td
return td.find('select').val(); return td.find('select').val();
}}, }},
{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;', totalRow: '{{!人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>!}}'}, {field:'sign', title: '签名', edit: 'textarea', minWidth: 260, expandedWidth: 320, style: '-moz-box-align: start;', totalRow: '{{!人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>!}}'},
{field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{!{{= d.TOTAL_NUMS }} 😊!}}'}, {field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{!{{= d.TOTAL_NUMS }} 😊!}}'},
{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'}, {field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'},
{field:'ip', title:'IP', width: 120}, {field:'ip', title:'IP', width: 120},

10
docs/table/examples/editModes.md
View File

@ -3,7 +3,7 @@
<script type="text/html" id="TPL-select-primary"> <script type="text/html" id="TPL-select-primary">
{{# var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }} {{# var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
<select name="city" class="layui-border select-demo-primary" lay-ignore> <select name="city" class="layui-border select-demo-primary" lay-ignore>
<option value="">原生 select 框</option> <option value="">原生 select</option>
{{# layui.each(cityList, function(i, v){ }} {{# layui.each(cityList, function(i, v){ }}
<option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option> <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
{{# }); }} {{# }); }}
@ -53,17 +53,17 @@ layui.use(function(){
page: true, page: true,
css: [ // 设置单元格样式 css: [ // 设置单元格样式
// 取消默认的溢出隐藏，并设置适当高度 // 取消默认的溢出隐藏，并设置适当高度
'.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}', '.layui-table-cell{height: 50px; line-height: 40px;}',
'.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}', '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
'.layui-table-cell select{height: 36px; padding: 0 5px;}' '.layui-table-cell select{height: 36px; padding: 0 5px;}'
].join(''), ].join(''),
cols: [[ // 表头 cols: [[ // 表头
{field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'}, {field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'},
{field: 'city', title: '原生 select', width:150, templet: '#TPL-select-primary'}, {field: 'city', title: '原生 select', width:135, unresize: true, templet: '#TPL-select-primary'},
//{field: 'city', title: 'layui select', width:150, templet: '#TPL-select-city'}, //{field: 'city', title: 'layui select', width:150, templet: '#TPL-select-city'},
{field: 'sex', title: 'dropdown', width:115, align: 'center', templet: '#TPL-dropdpwn-demo'}, {field: 'sex', title: 'dropdown', width:115, unresize: true, align: 'center', templet: '#TPL-dropdpwn-demo'},
{field: 'date', title: 'laydate', width:150, templet: '#TPL-laydate-demo'}, {field: 'date', title: 'laydate', width:150, templet: '#TPL-laydate-demo'},
{field: 'color', title: 'colorpicker', width:100, align: 'center', templet: '#TPL-colorpicker-demo'}, {field: 'color', title: 'color', width:80, unresize: true, align: 'center', templet: '#TPL-colorpicker-demo'},
{field: 'sign', title: '文本', edit: 'textarea'} {field: 'sign', title: '文本', edit: 'textarea'}
]], ]],
done: function(res, curr, count){ done: function(res, curr, count){

14
docs/tree/detail/options.md
View File

@ -135,6 +135,20 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>
[customName](#options.customName) <sup>2.8.14+</sup>
</td>
<td>
自定义 `data` 数据源中常用的字段名称。
</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td>text</td> <td>text</td>
<td colspan="3"> <td colspan="3">

21
docs/tree/index.md
View File

@ -41,6 +41,27 @@ toc: true
{{- d.include("/tree/detail/options.data.md") }} {{- d.include("/tree/detail/options.data.md") }}
</div> </div>
<div id="options.customName" class="ws-anchor">
您可以对上述 `data` 中常用的字段进行自定义名称 <sup>2.8.14+</sup> :
</div>
```
var tree = layui.tree;
// 渲染
tree.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id 索引
data: [], // 数据源
customName: { // 自定义 data 字段名 --- 2.8.14+
id: 'id',
title: 'title',
children: 'children'
},
// 其他属性 …
});
```
<h3 id="getChecked" lay-pid="api" class="ws-anchor">获取选中的节点数据</h3> <h3 id="getChecked" lay-pid="api" class="ws-anchor">获取选中的节点数据</h3>

29
docs/versions.md
View File

@ -11,6 +11,29 @@ toc: true
> 导读：📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html) > 导读：📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
<h2 id="2.8.14" class="ws-anchor">
2.8.14
<span class="layui-badge-rim">2023-08-16</span>
</h2>
- #### table
- 新增 `expandedWidth` 表头属性，用于设置单元格被展开后的宽度
- 优化 单元格内容下拉展开状态面板，以解决此前因展开后内容不可操作等问题 # I7RS8S
- 优化 `table.reload()` 造成 `window resize` 事件重复绑定的问题 # I7RJWY
- #### layer
- 优化 开启默认动画弹出层后，鼠标移入按钮出现往上偏移的问题 # I7QVVP
- #### dropdown
- 新增 `customName` 属性，用于自定义 `data` 属性中常用的字段名称
- 修复 在某些特殊情况下调整浏览器窗口尺寸时出现的 `resize` 事件报错问题
- #### tree
- 新增 `customName` 属性，用于自定义 `data` 中常用的字段名称
- #### lay
- 新增 `lay.style()` 方法，用于向页面创建 style 样式
- 优化 `lay.position()` 方法，可让下拉弹出元素的定位更智能
### 下载： [layui-v2.8.14.zip](https://gitee.com/layui/layui/attach_files/1498186/download)
---
<h2 id="2.8.13" class="ws-anchor"> <h2 id="2.8.13" class="ws-anchor">
2.8.13 2.8.13
@ -19,10 +42,10 @@ toc: true
- #### table - #### table
- 优化 在自定义模板中放置 `checkbox` 时对应的文字显示异常问题 # I7LQNO - 优化 在自定义模板中放置 `checkbox` 时对应的文字显示异常问题 # I7LQNO
- 调整 `totalRow` 属性在 `table.reloadData()` 数据重载时的支持 # I7R6VY - 优化 `totalRow` 属性在 `table.reloadData()` 数据重载时的支持 # I7R6VY
- #### treeTable - #### treeTable
- 修复 执行 `treeTable.addNodes()` 增加节点导致当前节点选中状态丢失的问题 # I7Q6IP - 修复 执行 `treeTable.addNodes()` 增加节点导致当前节点选中状态丢失的问题 # I7Q6IP
- 优化 增加和删除节点时，对容器尺寸重新进行自动适配 - 优化 删除节点时，对容器尺寸重新进行自动适配
- #### tree - #### tree
- 优化 容器样式，以解决用于其他组件内部可能造成的样式异常问题 # I7QAO3 - 优化 容器样式，以解决用于其他组件内部可能造成的样式异常问题 # I7QAO3
- #### dropdown - #### dropdown
@ -334,7 +357,7 @@ toc: true
--- ---
<h2 id="2.8.0" lay-toc="{title: '2.8.0', hot: true}"> <h2 id="2.8.0" class="ws-anchor">
2.8.0 2.8.0
<span class="layui-badge-rim">2023-04-24</span> <span class="layui-badge-rim">2023-04-24</span>
</h2> </h2>

5
examples/dropdown.html
View File

@ -207,6 +207,9 @@ layui.use('dropdown', function(){
,trigger: 'contextmenu' //contextmenu ,trigger: 'contextmenu' //contextmenu
,isAllowSpread: false ,isAllowSpread: false
//,style: 'width: 200px' //,style: 'width: 200px'
,customName: {
children: 'children'
}
,data: [{ ,data: [{
title: 'menu item 1' title: 'menu item 1'
,id: '#1' ,id: '#1'
@ -216,7 +219,7 @@ layui.use('dropdown', function(){
},{type:'-'},{ },{type:'-'},{
title: 'menu item 3' title: 'menu item 3'
,id: '#3' ,id: '#3'
,child: [{ ,children: [{
title: 'menu item 3-1' title: 'menu item 3-1'
,id: '#1' ,id: '#1'
},{ },{

270
examples/table-test.html
View File

@ -94,109 +94,109 @@ layui.use(['table', 'dropdown'], function(){
// 仅用于各类测试的表头 // 仅用于各类测试的表头
var test_cols = [[ var test_cols = [[
{type: 'checkbox', fixed: 'left'} {type: 'checkbox', fixed: 'left'},
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'} {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
,{field:'username', title:'用户名', width:120, edit: 'text'} {field:'username', title:'用户名', width:120, edit: 'text'},
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'} {field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'},
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true} {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
,{field:'city', title:'城市', width: 120} {field:'city', title:'城市', width: 120},
,{field:'sign', title:'签名'} {field:'sign', title:'签名'},
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'} {field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'},
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]; ]];
// 全局设定某参数 // 全局设定某参数
table.set({ table.set({
where: { where: {
token: '默认 token 参数' token: '默认 token 参数'
} },
//,defaultToolbar: ['filter'] // defaultToolbar: ['filter'],
,limit: 30 limit: 30,
//,url: 'list' // url: 'list',
//,height: 300 // height: 300
}); });
//渲染 //渲染
window.ins1 = table.render({ window.ins1 = table.render({
elem: '#test' elem: '#test',
,height: 520 height: 520,
//,width: 600 // width: 600,
,title: '用户数据表' title: '用户数据表',
,url: 'json/table/demo1.json' url: 'json/table/demo1.json',
//,method: 'post' // method: 'post',
//,lineStyle: 'height: 95px;' // 行样式 // lineStyle: 'height: 95px;', // 行样式
,css: [ // 自定义样式 css: [ // 自定义样式
'.layui-table-page{text-align: right;}' '.layui-table-page{text-align: right;}',
,'.layui-table-pagebar{float: left;}' '.layui-table-pagebar{float: left;}'
].join('') ].join(''),
//,className: '.demo-table-view' // className: '.demo-table-view',
//,size: 'sm' // size: 'sm',
//,skin: 'line' // skin: 'line',
//,even: true // even: true,
//,loading: false // loading: false,
,totalRow: true totalRow: true,
,pagebar: '#pagebarDemo' // 分页栏模板 pagebar: '#pagebarDemo', // 分页栏模板
,page: !1 ? false : { page: !1 ? false : {
//curr: layui.data('tableCache').curr || 1 // 读取记录中的页码，赋值给起始页 // curr: layui.data('tableCache').curr || 1 // 读取记录中的页码，赋值给起始页
} },
,limit: 30 limit: 30,
,toolbar: '#toolbarDemo' toolbar: '#toolbarDemo',
,defaultToolbar: ['filter', 'exports', 'print', { defaultToolbar: ['filter', 'exports', 'print', {
title: '帮助' title: '帮助',
,layEvent: 'LAYTABLE_TIPS' layEvent: 'LAYTABLE_TIPS',
,icon: 'layui-icon-tips' icon: 'layui-icon-tips'
}] }],
//,escape: false // escape: false,
,editTrigger: 'dblclick' editTrigger: 'dblclick',
//,cellMaxWidth: 320 // cellMaxWidth: 320
,cols: !1 ? test_cols : [[ cols: !1 ? test_cols : [[
{type: 'checkbox', fixed: 'left'} {type: 'checkbox', fixed: 'left'},
//,{type: 'numbers', fixed: 'left'} //,{type: 'numbers', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'} {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
,{field:'username', title:'用户名 <i class="layui-icon layui-icon-username" lay-event="username"></i>', width:120, edit: function(d){ {field:'username', title:'用户名 <i class="layui-icon layui-icon-username" lay-event="username"></i>', width:120, edit: function(d){
return !d.LAY_DISABLED; return !d.LAY_DISABLED;
}, templet: '#usernameTpl'} }, templet: '#usernameTpl'},
,{field:'xxx', title:'测试', edit: 'text'} {field:'xxx', title:'测试', edit: 'text'},
,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 <i class="layui-icon layui-icon-email" lay-event="email"></i>', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){ {field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 <i class="layui-icon layui-icon-email" lay-event="email"></i>', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){
return '<em>'+ layui.util.escape(d.email) +'</em>' return '<em>'+ layui.util.escape(d.email) +'</em>'
}} }},
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false} {field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false},
,{field:'city', title:'城市', width:120, templet: '#cityTpl', exportTemplet: function(d, obj){ {field:'city', title:'城市', width:120, templet: '#cityTpl', exportTemplet: function(d, obj){
// return '=HYPERLINK("https://abc.com/a.jpg","截图")'; // 测试内容存在特殊符 // return '=HYPERLINK("https://abc.com/a.jpg","截图")'; // 测试内容存在特殊符
// console.log(obj) // console.log(obj)
var td = obj.td(this.field); //获取当前 td var td = obj.td(this.field); //获取当前 td
return td.find('select').val(); return td.find('select').val();
}} }},
,{field:'sign', title:'签名', minWidth: 200, style:'color: #5FB878', edit: 'textarea'} {field:'sign', title:'签名', minWidth: 200, expandedWidth: 350, 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: '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:'ip', title:'IP', width: 120, align: 'right'},
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= d.TOTAL_ROW.checkin }} 次'} {field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= d.TOTAL_ROW.checkin }} 次'},
,{field:'joinTime', title:'加入时间', width: 120} {field:'joinTime', title:'加入时间', width: 120},
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180} {fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
]] ]],
//,autoSort: false // 禁用前端自动排序，由服务的完成排序 // autoSort: false // 禁用前端自动排序，由服务的完成排序
,initSort111: { // 初始排序状态 initSort111: { // 初始排序状态
field: 'experience' //排序字段，对应 cols 设定的各字段名 field: 'experience', // 排序字段，对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 type: 'desc' // 排序方式 asc: 升序、desc: 降序、null: 默认排序
} },
,headers: {headers_token: 'sasasas'} headers: {headers_token: 'sasasas'},
,where: { where: {
test: '初始 test 参数' test: '初始 test 参数',
,token: '初始 token' token: '初始 token',
,key: 'experience' key: 'experience',
,order: 'asc' order: 'asc'
} },
,before: function(options){ before: function(options){
options.where.AAAAA = 123; options.where.AAAAA = 123;
//console.log(options) // console.log(options)
} },
,done: function(res, curr, count){ done: function(res, curr, count){
var id = this.id; var id = this.id;
// 记录当前页码 // 记录当前页码
@ -209,8 +209,8 @@ layui.use(['table', 'dropdown'], function(){
// 设置选中行状态 // 设置选中行状态
dropdown.render({ dropdown.render({
elem: '#setRowChecked' //可绑定在任意元素中，此处以上述按钮为例 elem: '#setRowChecked', // 可绑定在任意元素中，此处以上述按钮为例
,data: [{ data: [{
id: 'checked', id: 'checked',
title: '选中某行' title: '选中某行'
},{ },{
@ -219,9 +219,9 @@ layui.use(['table', 'dropdown'], function(){
},{ },{
id: 'reset-checked', id: 'reset-checked',
title: '给选中行取消选中状态' title: '给选中行取消选中状态'
}] }],
//菜单被点击的事件 // 菜单被点击的事件
,click: function(obj){ click: function(obj){
if(obj.id === 'reset-checked'){ if(obj.id === 'reset-checked'){
// 给选中行取消选中状态 // 给选中行取消选中状态
table.setRowChecked(id, { table.setRowChecked(id, {
@ -256,8 +256,8 @@ layui.use(['table', 'dropdown'], function(){
// 重载测试 // 重载测试
dropdown.render({ dropdown.render({
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例 elem: '#reloadTest', //可绑定在任意元素中，此处以上述按钮为例
,data: [{ data: [{
id: 'reload', id: 'reload',
title: '重载' title: '重载'
},{ },{
@ -269,27 +269,27 @@ layui.use(['table', 'dropdown'], function(){
},{ },{
id: 'reloadData-deep', id: 'reloadData-deep',
title: '仅重载数据 - 参数叠加' title: '仅重载数据 - 参数叠加'
}] }],
// 菜单被点击的事件 // 菜单被点击的事件
,click: function(obj){ click: function(obj){
switch(obj.id){ switch(obj.id){
case 'reload': case 'reload':
// 重载 - 默认（参数重置） // 重载 - 默认（参数重置）
table.reload('test', { table.reload('test', {
where: { where: {
abc: '123456' abc: '123456',
//,test: '新的 test2' // test: '新的 test2',
//,token: '新的 token2' // token: '新的 token2'
} },
,height: 'full-130' // 重载高度 height: 'full-130', // 重载高度
/* /*
,cols: [[ // 重置表头 cols: [[ // 重置表头
{type: 'checkbox', fixed: 'left'} {type: 'checkbox', fixed: 'left'},
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'} {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true} {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'} {field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'},
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true} {field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
,{field:'joinTime', title:'加入时间', width:120} {field:'joinTime', title:'加入时间', width:120}
]] ]]
*/ */
@ -299,11 +299,11 @@ layui.use(['table', 'dropdown'], function(){
// 重载 - 深度（参数叠加） // 重载 - 深度（参数叠加）
table.reload('test', { table.reload('test', {
where: { where: {
abc: 123 abc: 123,
,test: '新的 test1' test: '新的 test1'
} },
//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标 //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
,page: {curr: 5, limit: 20} page: {curr: 5, limit: 20}
//,cols: ins1.config.cols //,cols: ins1.config.cols
}, true); }, true);
break; break;
@ -311,23 +311,23 @@ layui.use(['table', 'dropdown'], function(){
// 数据重载 - 参数重置 // 数据重载 - 参数重置
table.reloadData('test', { table.reloadData('test', {
where: { where: {
abc: '123456' abc: '123456',
//,test: '新的 test2' // test: '新的 test2',
//,token: '新的 token2' // token: '新的 token2'
} },
,height: 2000 // 测试无效参数 height: 2000, // 测试无效参数
//,url: '404' // url: '404',
//,elem: null // elem: null,
//,page: {curr: 5, limit: 20} // page: {curr: 5, limit: 20},
,scrollPos: 'fixed' // 保持滚动条位置不变 scrollPos: 'fixed' // 保持滚动条位置不变
}); });
break; break;
case 'reloadData-deep': case 'reloadData-deep':
// 数据重载 - 参数叠加 // 数据重载 - 参数叠加
table.reloadData('test', { table.reloadData('test', {
where: { where: {
abc: 123 abc: 123,
,test: '新的 test1' test: '新的 test1'
} }
}, true); }, true);
break; break;
@ -339,8 +339,8 @@ layui.use(['table', 'dropdown'], function(){
// 更多测试 // 更多测试
dropdown.render({ dropdown.render({
elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例 elem: '#moreTest', //可绑定在任意元素中，此处以上述按钮为例
,data: [{ data: [{
id: 'add', id: 'add',
title: '添加' title: '添加'
},{ },{
@ -349,9 +349,9 @@ layui.use(['table', 'dropdown'], function(){
},{ },{
id: 'delete', id: 'delete',
title: '删除' title: '删除'
}] }],
//菜单被点击的事件 // 菜单被点击的事件
,click: function(obj){ click: function(obj){
var checkStatus = table.checkStatus(id) var checkStatus = table.checkStatus(id)
var data = checkStatus.data; // 获取选中的数据 var data = checkStatus.data; // 获取选中的数据
@ -381,26 +381,26 @@ layui.use(['table', 'dropdown'], function(){
} }
} }
}); });
} },
,error: function(res, msg){
console.log(res, msg)
}
/* /*
,request: { // 自定义请求参数名称 request: { // 自定义请求参数名称
pageName: 'curr' //页码的参数名称，默认：page pageName: 'curr', //页码的参数名称，默认：page
,limitName: 'nums' //每页数据量的参数名，默认：limit limitName: 'nums' //每页数据量的参数名，默认：limit
} },
,parseData: function(res){ // 任意数据格式的解析 parseData: function(res){ // 任意数据格式的解析
return { return {
"status": res.status "status": res.status,
,"msg": res.message "msg": res.message,
,"count": res.total "count": res.total,
,"data": res.data.list "data": res.data.list
}; };
} },
*/ */
error: function(res, msg){
console.log(res, msg)
}
}); });
//排序事件 //排序事件

10
examples/treeTable.html
View File

@ -23,6 +23,14 @@ layui.use(['treeTable'], function(){
elem: '#test', elem: '#test',
url: './json/treeTable/demo-1.json', url: './json/treeTable/demo-1.json',
maxHeight: 'full-32', maxHeight: 'full-32',
tree: {
customName: {
name: 'name'
},
view: {
iconLeaf: ''
}
},
cols: [[ cols: [[
{type: 'checkbox', fixed: 'left'}, {type: 'checkbox', fixed: 'left'},
{type: 'numbers', fixed: 'left'}, {type: 'numbers', fixed: 'left'},
@ -33,7 +41,7 @@ layui.use(['treeTable'], function(){
{field: 'score', title: '评分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true},
{field: 'city', title: '城市', width: 150}, {field: 'city', title: '城市', width: 150},
{field: 'description', title: '描述', minWidth: 200}, {field: 'description', title: '描述', minWidth: 200},
{field: 'createTime', title: '创建时间', width: 170, fixed: 'right'}, {field: 'createTime', title: '创建时间', width: 170, fixed: 'right'}
]], ]],
page: true page: true
}); });

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "layui", "name": "layui",
"version": "2.8.13", "version": "2.8.14",
"description": "Classic modular Front-End UI library", "description": "Classic modular Front-End UI library",
"main": "dist/layui.js", "main": "dist/layui.js",
"license": "MIT", "license": "MIT",

14
src/css/layui.css
View File

@ -1131,15 +1131,15 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
/* 展开溢出的单元格 */ /* 展开溢出的单元格 */
.layui-table-grid .layui-table-cell{overflow: visible;} .layui-table-grid .layui-table-cell{overflow: visible;}
.layui-table-grid-down{position: absolute; top: 0; right: 0; width: 26px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer;} .layui-table-grid-down{position: absolute; top: 0; right: 0; width: 24px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer;}
.layui-table-grid-down .layui-icon{position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px;} .layui-table-grid-down .layui-icon{position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; font-size: 14px;}
.layui-table-grid-down:hover{background-color: #fbfbfb;} .layui-table-grid-down:hover{background-color: #fbfbfb;}
body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);} .layui-table-expanded{height: 95px;}
.layui-table-tips-main{margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;} .layui-table-expanded .layui-table-cell{height: auto; max-height: 95px; white-space: normal; text-overflow: clip;}
.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5F5F5F; border-radius: 50%; color: #fff;} .layui-table-cell-c{position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: 0.3s all; font-size: 14px;}
.layui-table-tips-c:hover{background-color: #777;} .layui-table-cell-c:hover{border-color: #16b777;}
.layui-table-tips-c:before{position: relative; right: -2px;} .layui-table-expanded td:hover .layui-table-cell{overflow: auto;}
/** 树表 **/ /** 树表 **/
.layui-table-tree-nodeIcon {max-width: 20px;} .layui-table-tree-nodeIcon {max-width: 20px;}

10
src/css/modules/layer.css
View File

@ -13,7 +13,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
.layui-layer-content{position:relative;} .layui-layer-content{position:relative;}
.layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} .layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.layui-layer-setwin span, .layui-layer-setwin span,
.layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} .layui-layer-btn a{display: inline-block; vertical-align: middle; *display: inline; *zoom:1; }
.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;} .layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;}
.layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;} .layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;}
@ -120,8 +120,8 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
/* 标题栏 */ /* 标题栏 */
.layui-layer-title{padding: 0 81px 0 16px; height: 50px; line-height: 50px; border-bottom:1px solid #F0F0F0; font-size: 14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0;} .layui-layer-title{padding: 0 81px 0 16px; height: 50px; line-height: 50px; border-bottom:1px solid #F0F0F0; font-size: 14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0;}
.layui-layer-setwin{position:absolute; right: 15px; *right:0; top: 16px; font-size:0; line-height: initial;} .layui-layer-setwin{position:absolute; right: 15px; *right:0; top: 16px; font-size:0; line-height: initial;}
.layui-layer-setwin span{position:relative; width: 16px; height: 16px; line-height: 18px; margin-left: 10px; text-align: center; font-size: 16px; cursor: pointer; color: #000; _overflow:hidden;} .layui-layer-setwin span{position:relative; width: 16px; height: 16px; line-height: 18px; margin-left: 10px; text-align: center; font-size: 16px; cursor: pointer; color: #000; _overflow: hidden; box-sizing: border-box;}
.layui-layer-setwin .layui-layer-min:before{content: ''; position: absolute; width: 12px; height: 1px; left: 50%; top: 50%; margin: -0.5px 0 0 -6px; background-color: #2E2D3C; cursor: pointer; _overflow:hidden;} .layui-layer-setwin .layui-layer-min:before{content: ''; position: absolute; width: 12px; border-bottom: 1px solid #2E2D3C; left: 50%; top: 50%; margin: -0.5px 0 0 -6px; cursor: pointer; _overflow:hidden;}
.layui-layer-setwin .layui-layer-min:hover:before{background-color: #2D93CA} .layui-layer-setwin .layui-layer-min:hover:before{background-color: #2D93CA}
.layui-layer-setwin .layui-layer-max:before, .layui-layer-setwin .layui-layer-max:before,
.layui-layer-setwin .layui-layer-max:after{content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid #2E2D3C;} .layui-layer-setwin .layui-layer-max:after{content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid #2E2D3C;}
@ -138,10 +138,10 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
/* 按钮栏 */ /* 按钮栏 */
.layui-layer-btn{text-align: right; padding: 0 15px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;} .layui-layer-btn{text-align: right; padding: 0 15px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;}
.layui-layer-btn a{height: 28px; line-height: 28px; margin: 5px 5px 0; padding: 0 15px; border: 1px solid #dedede; background-color:#fff; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;} .layui-layer-btn a{height: 30px; line-height: 30px; margin: 5px 5px 0; padding: 0 16px; border: 1px solid #dedede; background-color: #fff; color: #333; border-radius: 2px; font-weight: 400; cursor: pointer; text-decoration: none; box-sizing: border-box;}
.layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;} .layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;}
.layui-layer-btn a:active{opacity: 0.8;} .layui-layer-btn a:active{opacity: 0.8;}
.layui-layer-btn .layui-layer-btn0{border-color: #1E9FFF; background-color: #1E9FFF; color:#fff;} .layui-layer-btn .layui-layer-btn0{border-color: transparent; background-color: #1E9FFF; color:#fff;}
.layui-layer-btn-l{text-align: left;} .layui-layer-btn-l{text-align: left;}
.layui-layer-btn-c{text-align: center;} .layui-layer-btn-c{text-align: center;}

2
src/layui.js
View File

@ -16,7 +16,7 @@
}; };
var Layui = function(){ var Layui = function(){
this.v = '2.8.13'; // Layui 版本号 this.v = '2.8.14'; // Layui 版本号
}; };
// 识别预先可能定义的指定全局对象 // 识别预先可能定义的指定全局对象

134
src/modules/demo.js
View File

@ -1,134 +0,0 @@
/**
* MODULE_DEMO_NAME 模块组件通用结构
* MIT Licensed
*/
layui.define([''], function(exports){
"use strict";
var $ = layui.$
//模块名
,MOD_NAME = 'MODULE_DEMO_NAME'
,MOD_INDEX = 'layui_'+ MOD_NAME +'_index' //模块索引名
//外部接口
,MODULE_DEMO_NAME = {
config: {}
,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
//设置全局项
,set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
,thisModule = function(){
var that = this
,options = that.config
,id = options.id || that.index;
thisModule.that[id] = that; //记录当前实例对象
return {
config: options
//重置实例
,reload: function(options){
that.reload.call(that, options);
}
}
}
//字符常量
,STR_ELEM = 'layui-MODULE_DEMO_NAME', STR_HIDE = 'layui-hide', STR_DISABLED = 'layui-disabled', STR_NONE = 'layui-none'
//主模板
,TPL_MAIN = [''].join('')
//构造器
,Class = function(options){
var that = this;
that.index = ++MODULE_DEMO_NAME.index;
that.config = $.extend({}, that.config, MODULE_DEMO_NAME.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
};
//重载实例
Class.prototype.reload = function(options){
var that = this;
//防止数组深度合并
layui.each(options, function(key, item){
if(layui.type(item) === 'array') delete that.config[key];
});
that.config = $.extend(true, {}, that.config, options);
that.render();
};
//渲染
Class.prototype.render = function(){
var that = this
,options = that.config;
//解析模板
var thisElem = that.elem = $(laytpl(TPL_MAIN).render({
data: options
,index: that.index //索引
}));
var othis = options.elem = $(options.elem);
if(!othis[0]) return;
that.events(); //事件
};
//事件
Class.prototype.events = function(){
var that = this
,options = that.config;
};
//记录所有实例
thisModule.that = {}; //记录所有实例对象
//获取当前实例对象
thisModule.getThis = function(id){
var that = thisModule.that[id];
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required');
return that
};
//重载实例
MODULE_DEMO_NAME.reload = function(id, options){
var that = thisModule.that[id];
that.reload(options);
return thisModule.call(that);
};
//核心入口
MODULE_DEMO_NAME.render = function(options){
var inst = new Class(options);
return thisModule.call(inst);
};
exports(MOD_NAME, MODULE_DEMO_NAME);
});

31
src/modules/dropdown.js
View File

@ -19,7 +19,13 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
// 外部接口 // 外部接口
var dropdown = { var dropdown = {
config: {}, config: {
customName: { // 自定义 data 字段名
id: 'id',
title: 'title',
children: 'child'
}
},
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0, index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
// 设置全局项 // 设置全局项
@ -140,6 +146,9 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
elem.attr('id') || that.index elem.attr('id') || that.index
); );
// 初始化自定义字段名
options.customName = $.extend({}, dropdown.config.customName, options.customName);
if(options.show || (type === 'reloadData' && that.elemView && $('body').find(that.elemView.get(0)).length)) that.render(rerender, type); //初始即显示或者面板弹出之后执行了刷新数据 if(options.show || (type === 'reloadData' && that.elemView && $('body').find(that.elemView.get(0)).length)) that.render(rerender, type); //初始即显示或者面板弹出之后执行了刷新数据
that.events(); // 事件 that.events(); // 事件
}; };
@ -148,6 +157,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
Class.prototype.render = function(rerender, type){ Class.prototype.render = function(rerender, type){
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName;
var elemBody = $('body'); var elemBody = $('body');
// 默认菜单内容 // 默认菜单内容
@ -164,9 +174,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
// 遍历菜单项 // 遍历菜单项
var eachItemView = function(views, data){ var eachItemView = function(views, data){
// var views = []; // var views = [];
layui.each(data, function(index, item){ layui.each(data, function(index, item){
// 是否存在子级 // 是否存在子级
var isChild = item.child && item.child.length > 0; var isChild = item[customName.children] && item[customName.children].length > 0;
var isSpreadItem = ('isSpreadItem' in item) ? item.isSpreadItem : options.isSpreadItem var isSpreadItem = ('isSpreadItem' in item) ? item.isSpreadItem : options.isSpreadItem
var title = function(title){ var title = function(title){
var templet = item.templet || options.templet; var templet = item.templet || options.templet;
@ -176,7 +187,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
: laytpl(templet).render(item); : laytpl(templet).render(item);
} }
return title; return title;
}(util.escape(item.title)); }(util.escape(item[customName.title]));
// 初始类型 // 初始类型
var type = function(){ var type = function(){
@ -193,7 +204,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
return ''; return '';
}(); }();
if(type !== '-' && (!item.title && !item.id && !isChild)) return; if(type !== '-' && (!item[customName.title] && !item[customName.id] && !isChild)) return;
//列表元素 //列表元素
var viewLi = $(['<li'+ function(){ var viewLi = $(['<li'+ function(){
@ -240,14 +251,14 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
//子级区 //子级区
if(isChild){ if(isChild){
var elemPanel = $('<div class="layui-panel layui-menu-body-panel"></div>') var elemPanel = $('<div class="layui-panel layui-menu-body-panel"></div>');
,elemUl = $('<ul></ul>'); var elemUl = $('<ul></ul>');
if(type === 'parent'){ if(type === 'parent'){
elemPanel.append(eachItemView(elemUl, item.child)); elemPanel.append(eachItemView(elemUl, item[customName.children]));
viewLi.append(elemPanel); viewLi.append(elemPanel);
} else { } else {
viewLi.append(eachItemView(elemUl, item.child)); viewLi.append(eachItemView(elemUl, item[customName.children]));
} }
} }
@ -314,7 +325,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
that.elemView.find('.layui-menu li').on('click', function(e){ that.elemView.find('.layui-menu li').on('click', function(e){
var othis = $(this); var othis = $(this);
var data = othis.data('item') || {}; var data = othis.data('item') || {};
var isChild = data.child && data.child.length > 0; var isChild = data[customName.children] && data[customName.children].length > 0;
var isClickAllScope = options.clickScope === 'all'; // 是否所有父子菜单均触发点击事件 var isClickAllScope = options.clickScope === 'all'; // 是否所有父子菜单均触发点击事件
if(data.disabled) return; // 菜单项禁用状态 if(data.disabled) return; // 菜单项禁用状态
@ -455,7 +466,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var that = thisModule.getThis(dropdown.thisId); var that = thisModule.getThis(dropdown.thisId);
if(!that) return; if(!that) return;
if(!that.elemView[0] || !$('.'+ STR_ELEM)[0]){ if((that.elemView && !that.elemView[0]) || !$('.'+ STR_ELEM)[0]){
return false; return false;
} }

103
src/modules/lay.js
View File

@ -110,46 +110,77 @@
lay.hasScrollbar = function(){ lay.hasScrollbar = function(){
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}; };
// 创建 style 样式
lay.style = function(options){
options = options || {};
var style = lay.elem('style');
var styleText = options.text || '';
var target = options.target || lay('body')[0];
if(!styleText) return;
// 添加样式
if('styleSheet' in style){
style.setAttribute('type', 'text/css');
style.styleSheet.cssText = styleText;
} else {
style.innerHTML = styleText;
}
lay.style.index = lay.style.index || 0;
lay.style.index++;
var id = style.id = 'LAY-STYLE-'+ (options.id || 'DF-'+ lay.style.index)
var styleElem = lay(target).find('#'+ id);
styleElem[0] && styleElem.remove();
lay(target).append(style);
};
// 元素定位 // 元素定位
lay.position = function(elem, elemView, obj){ lay.position = function(target, elem, opts){
if(!elemView) return; if(!elem) return;
obj = obj || {}; opts = opts || {};
// 如果绑定的是 document 或 body 元素，则直接获取鼠标坐标 // 如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
if(elem === document || elem === lay('body')[0]){ if(target === document || target === lay('body')[0]){
obj.clickType = 'right'; opts.clickType = 'right';
} }
// 绑定绑定元素的坐标 // 绑定绑定元素的坐标
var rect = obj.clickType === 'right' ? function(){ var rect = opts.clickType === 'right' ? function(){
var e = obj.e || window.event || {}; var e = opts.e || window.event || {};
return { return {
left: e.clientX left: e.clientX,
,top: e.clientY top: e.clientY,
,right: e.clientX right: e.clientX,
,bottom: e.clientY bottom: e.clientY
} }
}() : elem.getBoundingClientRect() }() : target.getBoundingClientRect();
,elemWidth = elemView.offsetWidth // 控件的宽度 var elemWidth = elem.offsetWidth; // 控件的宽度
,elemHeight = elemView.offsetHeight // 控件的高度 var elemHeight = elem.offsetHeight; // 控件的高度
// 滚动条高度 // 滚动条高度
,scrollArea = function(type){ var scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop'; type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type]; return document.body[type] | document.documentElement[type];
} };
// 窗口宽高 // 窗口宽高
,winArea = function(type){ var winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight'] return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom; };
var margin = 'margin' in opts ? opts.margin : 5;
var left = rect.left;
var top = rect.bottom;
// 相对元素居中 // 相对元素居中
if(obj.align === 'center'){ if(opts.align === 'center'){
left = left - (elemWidth - elem.offsetWidth)/2; left = left - (elemWidth - target.offsetWidth) / 2;
} else if(obj.align === 'right'){ } else if(opts.align === 'right'){
left = left - elemWidth + elem.offsetWidth; left = left - elemWidth + target.offsetWidth;
} }
// 判断右侧是否超出边界 // 判断右侧是否超出边界
@ -159,7 +190,18 @@
// 左侧是否超出边界 // 左侧是否超出边界
if(left < margin) left = margin; if(left < margin) left = margin;
// 判断底部和顶部是否超出边界 // 判断底部和顶部是否超出边界
if(rect.bottom + elemHeight + margin > winArea()){ // 底部超出边界
// 优先判断顶部是否有足够区域显示完全，且底部不能超出边界
if(rect.top > elemHeight + margin && rect.top <= winArea() ){
top = rect.top - elemHeight - margin*2; // 顶部有足够的区域显示
} else if(!opts.allowBottomOut){ // 顶部没有足够区域显示时，是否允许底部溢出
top = winArea() - elemHeight - margin*2; // 面板向底部靠齐
if(top < 0) top = 0; // 如果面板底部靠齐时，又溢出窗口顶部，则只能将顶部靠齐
}
}
/*
if(top + elemHeight + margin > winArea()){ if(top + elemHeight + margin > winArea()){
// 优先顶部是否有足够区域显示完全 // 优先顶部是否有足够区域显示完全
if(rect.top > elemHeight + margin){ if(rect.top > elemHeight + margin){
@ -174,23 +216,24 @@
} }
} }
} }
*/
// 定位类型 // 定位类型
var position = obj.position; var position = opts.position;
if(position) elemView.style.position = position; if(position) elem.style.position = position;
// 设置坐标 // 设置坐标
elemView.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px'; elem.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elemView.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px'; elem.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
// 防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差 // 防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
if(!lay.hasScrollbar()){ if(!lay.hasScrollbar()){
var rect1 = elemView.getBoundingClientRect(); var rect1 = elem.getBoundingClientRect();
// 如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标 // 如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标
if(!obj.SYSTEM_RELOAD && (rect1.bottom + margin) > winArea()){ if(!opts.SYSTEM_RELOAD && (rect1.bottom + margin) > winArea()){
obj.SYSTEM_RELOAD = true; opts.SYSTEM_RELOAD = true;
setTimeout(function(){ setTimeout(function(){
lay.position(elem, elemView, obj); lay.position(target, elem, opts);
}, 50); }, 50);
} }
} }

6
src/modules/layer.js
View File

@ -377,7 +377,11 @@ Class.pt.vessel = function(conType, callback){
for(var i = 0, len = config.btn.length; i < len; i++){ for(var i = 0, len = config.btn.length; i < len; i++){
button += '<a class="'+ doms[6] +''+ i +'">'+ config.btn[i] +'</a>' button += '<a class="'+ doms[6] +''+ i +'">'+ config.btn[i] +'</a>'
} }
return '<div class="'+ doms[6] +' layui-layer-btn-'+ (config.btnAlign||'') +'">'+ button +'</div>' return '<div class="'+ function(){
var className = [doms[6]];
if(config.btnAlign) className.push(doms[6] + '-' + config.btnAlign);
return className.join(' ');
}() +'">'+ button +'</div>'
}() : '') }() : '')
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '') + (config.resize ? '<span class="layui-layer-resize"></span>' : '')
+ '</div>' + '</div>'

113
src/modules/table.js
View File

@ -136,6 +136,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var ELEM_GROUP = 'laytable-cell-group'; var ELEM_GROUP = 'laytable-cell-group';
var ELEM_COL_SPECIAL = 'layui-table-col-special'; var ELEM_COL_SPECIAL = 'layui-table-col-special';
var ELEM_TOOL_PANEL = 'layui-table-tool-panel'; var ELEM_TOOL_PANEL = 'layui-table-tool-panel';
var ELEM_EXPAND = 'layui-table-expanded'
var DATA_MOVE_NAME = 'LAY_TABLE_MOVE_DICT'; var DATA_MOVE_NAME = 'LAY_TABLE_MOVE_DICT';
@ -1273,7 +1274,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}, 50); }, 50);
that.haveInit = true; that.haveInit = true;
layer.close(that.tipsIndex);
}; };
table.cache[that.key] = data; //记录数据 table.cache[that.key] = data; //记录数据
@ -1495,13 +1495,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}; };
// 标记当前活动行背景色 // 标记当前活动行背景色
Class.prototype.setRowActive = function(index, className){ Class.prototype.setRowActive = function(index, className, removeClass){
var that = this; var that = this;
var options = that.config; var options = that.config;
var tr = that.layBody.find('tr[data-index="'+ index +'"]'); var tr = that.layBody.find('tr[data-index="'+ index +'"]');
className = className || 'layui-table-click'; className = className || 'layui-table-click';
tr.addClass(className)
.siblings('tr').removeClass(className); if(removeClass) return tr.removeClass(className);
tr.addClass(className);
tr.siblings('tr').removeClass(className);
}; };
// 设置行选中状态 // 设置行选中状态
@ -1659,10 +1662,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 获取 cssRule // 获取 cssRule
Class.prototype.getCssRule = function(key, callback){ Class.prototype.getCssRule = function(key, callback){
var that = this; var that = this;
var style = that.elem.find('style')[0]; var style = that.elem.children('style')[0];
var sheet = style.sheet || style.styleSheet || {}; var sheet = style.sheet || style.styleSheet || {};
var rules = sheet.cssRules || sheet.rules; var rules = sheet.cssRules || sheet.rules;
layui.each(rules, function(i, item){ layui.each(rules, function(i, item){
if(item.selectorText === ('.laytable-cell-'+ key)){ if(item.selectorText === ('.laytable-cell-'+ key)){
return callback(item), true; return callback(item), true;
@ -1837,7 +1839,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
layui.stope(e); layui.stope(e);
_DOC.trigger('table.tool.panel.remove'); _DOC.trigger('table.tool.panel.remove');
layer.close(that.tipsIndex);
switch(events){ switch(events){
case 'LAYTABLE_COLS': // 筛选列 case 'LAYTABLE_COLS': // 筛选列
@ -2030,7 +2031,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
dict.rule.style.width = setWidth + 'px'; dict.rule.style.width = setWidth + 'px';
thatTable.setGroupWidth(thisTable.eventMoveElem); thatTable.setGroupWidth(thisTable.eventMoveElem);
layer.close(that.tipsIndex);
} }
} }
}).on('mouseup', function(e){ }).on('mouseup', function(e){
@ -2270,7 +2270,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER) that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
}).on('click', 'tr', function(e){ // 单击行 }).on('click', 'tr', function(e){ // 单击行
// 不支持行单击事件的元素 // 不支持行单击事件的元素
var UNROW = '.layui-form-checkbox,.layui-form-switch,.layui-form-radio,[lay-unrow]'; var UNROW = [
'.layui-form-checkbox',
'.layui-form-switch',
'.layui-form-radio',
'[lay-unrow]'
].join(',');
if( $(e.target).is(UNROW) || $(e.target).closest(UNROW)[0]){ if( $(e.target).is(UNROW) || $(e.target).closest(UNROW)[0]){
return; return;
}; };
@ -2394,7 +2399,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var othis = $(this); var othis = $(this);
var elemCell = othis.children(ELEM_CELL); var elemCell = othis.children(ELEM_CELL);
if(othis.data('off')) return; //不触发事件 if(othis.data('off')) return; // 不触发事件
if(othis.parent().hasClass(ELEM_EXPAND)) return; // 是否已为展开状态
if(hide){ if(hide){
othis.find('.layui-table-grid-down').remove(); othis.find('.layui-table-grid-down').remove();
@ -2406,39 +2412,54 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>'); othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');
} }
}; };
// 单元格内容展开 // 展开单元格内容
var gridExpand = function(e){ var gridExpand = function(e){
var othis = $(this); var othis = $(this);
var td = othis.parent(); var td = othis.parent();
var key = td.data('key');
var col = that.col(key);
var index = td.parent().data('index');
var elemCell = td.children(ELEM_CELL); var elemCell = td.children(ELEM_CELL);
var ELEM_CELL_C = 'layui-table-cell-c';
var elemCellClose = $('<i class="layui-icon layui-icon-up '+ ELEM_CELL_C +'">');
that.tipsIndex = layer.tips([ // 恢复其他已经展开的单元格
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 23) +'px;'+ function(){ that.elem.find('.'+ ELEM_CELL_C).trigger('click');
if(options.size === 'sm'){
return 'padding: 4px 15px; font-size: 12px;'; // 设置当前单元格展开宽度
} that.getCssRule(key, function(item){
if(options.size === 'lg'){ var width = item.style.width;
return 'padding: 14px 15px;'; var expandedWidth = col.expandedWidth || (that.elem.width() / 3);
}
return ''; // 展开后的宽度不能小于当前宽度
}() +'">', if(expandedWidth < parseFloat(width)) expandedWidth = parseFloat(width);
elemCell.html(),
'</div>', elemCellClose.data('cell-width', width);
'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>' item.style.width = expandedWidth + 'px';
].join(''), elemCell[0], {
tips: [3, ''], that.scrollPatch(); // 滚动条补丁
time: -1,
anim: -1,
maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2,
isOutAnim: false,
skin: 'layui-table-tips',
success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
}
}); });
// 设置当前单元格展开样式
that.setRowActive(index, ELEM_EXPAND);
// 插入关闭按钮
if(!elemCell.next('.'+ ELEM_CELL_C)[0]){
elemCell.after(elemCellClose);
}
// 关闭展开状态
elemCellClose.on('click', function(){
var $this = $(this);
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
that.getCssRule(key, function(item){
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
that.resize(); // 滚动条补丁
});
$this.remove();
});
othis.remove();
layui.stope(e); layui.stope(e);
}; };
@ -2494,21 +2515,23 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
layer.close(that.tipsIndex); layer.close(that.tipsIndex);
}); });
// 适应
_WIN.on('resize', function(){
that.resize();
});
}; };
//一次性事件 // 全局事件
;(function(){ (function(){
//全局点击 // 自适应尺寸
_WIN.on('resize', function(){
layui.each(thisTable.that, function(){
this.resize();
});
});
// 全局点击
_DOC.on('click', function(){ _DOC.on('click', function(){
_DOC.trigger('table.remove.tool.panel'); _DOC.trigger('table.remove.tool.panel');
}); });
//工具面板移除事件 // 工具面板移除事件
_DOC.on('table.remove.tool.panel', function(){ _DOC.on('table.remove.tool.panel', function(){
$('.' + ELEM_TOOL_PANEL).remove(); $('.' + ELEM_TOOL_PANEL).remove();
}); });

51
src/modules/tree.js
View File

@ -14,7 +14,13 @@ layui.define('form', function(exports){
// 外部接口 // 外部接口
var tree = { var tree = {
config: {}, config: {
customName: { // 自定义 data 字段名
id: 'id',
title: 'title',
children: 'children'
}
},
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0, index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
// 设置全局项 // 设置全局项
@ -122,6 +128,9 @@ layui.define('form', function(exports){
Class.prototype.render = function(){ Class.prototype.render = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
// 初始化自定义字段名
options.customName = $.extend({}, tree.config.customName, options.customName);
that.checkids = []; that.checkids = [];
@ -178,13 +187,14 @@ layui.define('form', function(exports){
Class.prototype.tree = function(elem, children){ Class.prototype.tree = function(elem, children){
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName;
var data = children || options.data; var data = children || options.data;
// 遍历数据 // 遍历数据
layui.each(data, function(index, item){ layui.each(data, function(index, item){
var hasChild = item.children && item.children.length > 0; var hasChild = item[customName.children] && item[customName.children].length > 0;
var packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>'); var packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>');
var entryDiv = $(['<div data-id="'+ item.id +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">' var entryDiv = $(['<div data-id="'+ item[customName.id] +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">'
,'<div class="layui-tree-entry">' ,'<div class="layui-tree-entry">'
,'<div class="layui-tree-main">' ,'<div class="layui-tree-main">'
// 箭头 // 箭头
@ -202,15 +212,15 @@ layui.define('form', function(exports){
// 复选框 // 复选框
,function(){ ,function(){
return options.showCheckbox ? '<input type="checkbox" name="'+ (item.field || ('layuiTreeCheck_'+ item.id)) +'" same="layuiTreeCheck" lay-skin="primary" '+ (item.disabled ? "disabled" : "") +' value="'+ item.id +'">' : ''; return options.showCheckbox ? '<input type="checkbox" name="'+ (item.field || ('layuiTreeCheck_'+ item[customName.id])) +'" same="layuiTreeCheck" lay-skin="primary" '+ (item.disabled ? "disabled" : "") +' value="'+ item[customName.id] +'">' : '';
}() }()
// 节点 // 节点
,function(){ ,function(){
if(options.isJump && item.href){ if(options.isJump && item.href){
return '<a href="'+ item.href +'" target="_blank" class="'+ ELEM_TEXT +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</a>'; return '<a href="'+ item.href +'" target="_blank" class="'+ ELEM_TEXT +'">'+ (item[customName.title] || item.label || options.text.defaultNodeName) +'</a>';
}else{ }else{
return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</span>'; return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'">'+ (item[customName.title] || item.label || options.text.defaultNodeName) +'</span>';
} }
}() }()
,'</div>' ,'</div>'
@ -241,7 +251,7 @@ layui.define('form', function(exports){
// 如果有子节点，则递归继续生成树 // 如果有子节点，则递归继续生成树
if(hasChild){ if(hasChild){
entryDiv.append(packDiv); entryDiv.append(packDiv);
that.tree(packDiv, item.children); that.tree(packDiv, item[customName.children]);
}; };
elem.append(entryDiv); elem.append(entryDiv);
@ -261,7 +271,7 @@ layui.define('form', function(exports){
// 选择框 // 选择框
if(options.showCheckbox){ if(options.showCheckbox){
item.checked && that.checkids.push(item.id); item.checked && that.checkids.push(item[customName.id]);
that.checkClick(entryDiv, item); that.checkClick(entryDiv, item);
} }
@ -351,16 +361,17 @@ layui.define('form', function(exports){
Class.prototype.setCheckbox = function(elem, item, elemCheckbox){ Class.prototype.setCheckbox = function(elem, item, elemCheckbox){
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName;
var checked = elemCheckbox.prop('checked'); var checked = elemCheckbox.prop('checked');
if(elemCheckbox.prop('disabled')) return; if(elemCheckbox.prop('disabled')) return;
// 同步子节点选中状态 // 同步子节点选中状态
if(typeof item.children === 'object' || elem.find('.'+ELEM_PACK)[0]){ if(typeof item[customName.children] === 'object' || elem.find('.'+ELEM_PACK)[0]){
var elemCheckboxs = elem.find('.'+ ELEM_PACK).find('input[same="layuiTreeCheck"]'); var elemCheckboxs = elem.find('.'+ ELEM_PACK).find('input[same="layuiTreeCheck"]');
elemCheckboxs.each(function(index){ elemCheckboxs.each(function(index){
if(this.disabled) return; // 不可点击则跳过 if(this.disabled) return; // 不可点击则跳过
var children = item.children[index]; var children = item[customName.children][index];
if(children) that.updateFieldValue(children, 'checked', checked); if(children) that.updateFieldValue(children, 'checked', checked);
that.updateFieldValue(this, 'checked', checked); that.updateFieldValue(this, 'checked', checked);
}); });
@ -433,6 +444,7 @@ layui.define('form', function(exports){
Class.prototype.operate = function(elem, item){ Class.prototype.operate = function(elem, item){
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName;
var entry = elem.children('.'+ ELEM_ENTRY); var entry = elem.children('.'+ ELEM_ENTRY);
var elemMain = entry.children('.'+ ELEM_MAIN); var elemMain = entry.children('.'+ ELEM_MAIN);
@ -466,8 +478,8 @@ layui.define('form', function(exports){
var key = options.operate && options.operate(returnObj); var key = options.operate && options.operate(returnObj);
var obj = {}; var obj = {};
obj.title = options.text.defaultNodeName; obj[customName.title] = options.text.defaultNodeName;
obj.id = key; obj[customName.id] = key;
that.tree(elem.children('.'+ELEM_PACK), [obj]); that.tree(elem.children('.'+ELEM_PACK), [obj]);
// 放在新增后面，因为要对元素进行操作 // 放在新增后面，因为要对元素进行操作
@ -544,7 +556,7 @@ layui.define('form', function(exports){
elemMain.children('.'+ ELEM_TEXT).html(textNew); elemMain.children('.'+ ELEM_TEXT).html(textNew);
// 同步数据 // 同步数据
returnObj.data.title = textNew; returnObj.data[customName.title] = textNew;
// 节点修改的回调 // 节点修改的回调
options.operate && options.operate(returnObj); options.operate && options.operate(returnObj);
@ -563,7 +575,7 @@ layui.define('form', function(exports){
// 删除 // 删除
} else { } else {
layer.confirm('确认删除该节点 "<span style="color: #999;">'+ (item.title || '') +'</span>" 吗？', function(index){ layer.confirm('确认删除该节点 "<span style="color: #999;">'+ (item[customName.title] || '') +'</span>" 吗？', function(index){
options.operate && options.operate(returnObj); // 节点删除的回调 options.operate && options.operate(returnObj); // 节点删除的回调
returnObj.status = 'remove'; // 标注节点删除 returnObj.status = 'remove'; // 标注节点删除
@ -750,6 +762,7 @@ layui.define('form', function(exports){
Class.prototype.getChecked = function(){ Class.prototype.getChecked = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName;
var checkId = []; var checkId = [];
var checkData = []; var checkData = [];
@ -762,17 +775,17 @@ layui.define('form', function(exports){
var eachNodes = function(data, checkNode){ var eachNodes = function(data, checkNode){
layui.each(data, function(index, item){ layui.each(data, function(index, item){
layui.each(checkId, function(index2, item2){ layui.each(checkId, function(index2, item2){
if(item.id == item2){ if(item[customName.id] == item2){
that.updateFieldValue(item, 'checked', true); that.updateFieldValue(item, 'checked', true);
var cloneItem = $.extend({}, item); var cloneItem = $.extend({}, item);
delete cloneItem.children; delete cloneItem[customName.children];
checkNode.push(cloneItem); checkNode.push(cloneItem);
if(item.children){ if(item[customName.children]){
cloneItem.children = []; cloneItem[customName.children] = [];
eachNodes(item.children, cloneItem.children); eachNodes(item[customName.children], cloneItem[customName.children]);
} }
return true return true
} }

7
src/modules/treeTable.js
View File

@ -1245,7 +1245,7 @@ layui.define(['table'], function (exports) {
options.hasNumberCol && formatNumber(that); options.hasNumberCol && formatNumber(that);
// 重新适配尺寸 // 重新适配尺寸
table.resize(id); treeTable.resize(id);
} }
/** /**
@ -1396,9 +1396,6 @@ layui.define(['table'], function (exports) {
tableViewElem.find(ELEM_MAIN).find('tr[lay-data-index="' + newNodes[0][LAY_DATA_INDEX] + '"]').get(0).scrollIntoViewIfNeeded(); tableViewElem.find(ELEM_MAIN).find('tr[lay-data-index="' + newNodes[0][LAY_DATA_INDEX] + '"]').get(0).scrollIntoViewIfNeeded();
} }
// 重新适配尺寸
table.resize(id);
return newNodes; return newNodes;
} }
@ -1526,7 +1523,7 @@ layui.define(['table'], function (exports) {
var index = tr.data('index'); var index = tr.data('index');
var tableViewElem = options.elem.next(); var tableViewElem = options.elem.next();
tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 主体行 tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 主体行
// 右侧固定行 // 右侧固定行