mirror of https://github.com/layui/layui
贤心
GitHub
commit
75cf47a169
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
title: 🚀 Layui 2.8.0 正式发布，朴实归来
|
||||||
|
toc: false
|
||||||
|
---
|
||||||
|
|
||||||
|
# 🚀 Layui 2.8.0 正式发布，朴实归来
|
||||||
|
|
||||||
|
我们终于迎来了 Layui `2.8.0` 的正式版本，以及全新的文档站。
|
||||||
|
|
||||||
|
在 Layui 过往七年的开源历程中，从未用多达**二十个预览版**去为一个正式版而引路。 显然，`2.8.0` 是 Layui 一次朴实的回归，更是情怀的延续。但却并不是想以此呼吁人们重新去选择它，我们仍然坚持两年前那则《[Layui 原官网下线公告](https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png)》中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。
|
||||||
|
|
||||||
|
Layui 虽然并不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作，作为开源创作者的我们，应该要为这些坚持者而守望。
|
||||||
|
|
||||||
|
### 新文档站
|
||||||
|
|
||||||
|
在 2021 年 Layui 原官网下线后，互联网出现了许多第三方的 Layui 文档镜像站点，这在当时，给大家能继续阅读文档确实提供了便利，但原官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，当时的公告其实也说的很清楚了，但或许是由于那则公告的用词过于「悲壮」，使得各大自媒体有所误读，从而让大家都以为是 Layui 停更了。 事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 `2.6.9` 一直迭代到今天的 `2.8.0`，而现存的第三方文档镜像站点的内容却仍然定格在 Layui `2.6.8` 的版本，已严重滞后于 Layui 的当前版本，显然是不利于开发者们对 Layui 的应用。 两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 **Gitee Pages** 为文档的承载，但似乎很难形成一个焦点和归属感。 随着 `2.8.0` 正式版本的发布，它所包含的上百项的更新内容，使得全新的文档站点呼之欲出。
|
||||||
|
|
||||||
|
此次上线的新版文档站，旨在为朴实归来的 Layui 提供一个新的精神「基站」，它基于 laytpl 和 markdown 驱动，在版面上进行了大量优化，内容重新编写、力求精简，以辅助大家更好地使用 Layui。 同时，Layui 文档也已和 Layui 本身一同开源在项目中，以供大家在线和离线都能阅读以及协同维护。
|
||||||
|
|
||||||
|
- **文档协作:** https://github.com/layui/layui/tree/main/docs
|
||||||
|
- **文档阅读:** https://layui.dev
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
---
|
||||||
|
title: Layui 2.8 《升级指南》
|
||||||
|
toc: false
|
||||||
|
---
|
||||||
|
|
||||||
|
# Layui 2.8 《升级指南》
|
||||||
|
|
||||||
|
Layui `2.8` 总体向下兼容，但仍有以下变更需要注意：
|
||||||
|
|
||||||
|
1. `2.8` 剔除了 ~~layedit~~ 组件，若是之前用到该组件的，注意采用第三方成熟富文本组件替换，详见：#I5JSE3
|
||||||
|
1. `2.8` 调整了 `table` 的 `page,limit` 属性，当 `page` 未开启时，则默认不再向后端传递这两个参数
|
||||||
|
1. `2.8` 调整了 `table` 的特定属性名。序号: `LAY_INDEX` → `LAY_NUM`；下标: `LAY_TABLE_INDEX` → `LAY_INDEX`，若是之前用到这几个特定属性，需更换为新版名称。
|
||||||
|
1. `2.8` 调整了 `checkbox` 的 `lay-skin` 属性默认为原始风格，原来的标签风格可通过 `lay-skin="tag"` 来设置。
|
||||||
|
1. `2.8` 调整了 `checkbox` 的私有属性 `lay-text`，采用统一的 `title` 属性替代
|
||||||
|
1. `2.8` 调整了 `util.fixbar` 的 `showHeight` 属性名称为 `margin`
|
||||||
|
|
||||||
|
### 2.7.6 升级到 2.8
|
||||||
|
|
||||||
|
`2.8` 对 `2.7.6` 最友好，可直接覆盖升级，只需按照上述提到的几点进行适配即可。
|
||||||
|
|
||||||
|
### 2.6.x 升级到 2.8
|
||||||
|
|
||||||
|
该跨度相对较大，主要是中间的 `2.6.11` 和 `2.7.x` 的几处调整要适配，包括：
|
||||||
|
|
||||||
|
1. **重要**：`2.6.11` 调整了 `laytpl` 的 `{{ d.field }}` 标签的输出为默认开启编码。即与 {{= d.field }} 等同。因此，若输出内容包含 `HTML` 且需要正常渲染的，需采用 `{{- d.field }}` 的标签语句。详细可参考：#I5AXSP
|
||||||
|
1. `2.6.11` 调整了 `table` 组件的 `escape` 属性默认为 `true`，即默认开启编码功能（之前默认为 `false`）
|
||||||
|
1. `2.7.5` 调整了 `table` 表头的 `edit` 属性，支持函数写法，且单元格是否编辑不再以 `<td>` 标签上的 `data-edit` 属性为准，而是统一以 `cols` 属性中的 `edit` 属性为准，详细可参考新版文档关于 `edit` 的用法：https://layui.dev/docs/table/#cols.edit
|
||||||
|
|
||||||
|
### 2.6.0 以下版本 升级到 2.8
|
||||||
|
|
||||||
|
若当前用的版本低于 `2.6.0`，一般不建议升级。但如果非升级不可，除了结合上述提到的变更外，还要重点参考 `2.6.0` 的更新日志中提到的「重要提示」进行适配：https://layui.dev/2.7/docs/base/changelog.html#2.6.0
|
||||||
|
|
||||||
|
同时，还要特别注意，`2.6.0` 之前的版本是按需加载内置组件，从 `2.6.0` 开始，统一构建到 `layui.js` 中。因此，要注意下之前引入的 `JS` 业务代码的放置位置，若是放在 `<head>` 区域，需调整放置到 `<body>` 标签内部的尾端。
|
||||||
|
|
||||||
|
### layuiAdmin 主题升级 Layui 到 2.8
|
||||||
|
|
||||||
|
主要还是根据当前主题中所用的 Layui 的版本，进行对应的适配，尤其是单页版中的动态模板，需按照前面提到的 `laytpl` 的调整进行修改。具体也可以参考：#I65D80
|
||||||
|
|
||||||
|
### 其他细节
|
||||||
|
|
||||||
|
若按照以上调整后仍然存在兼容性问题，也可以详细阅读过往所有版本的更新日志：
|
||||||
|
https://layui.dev/docs/versions.html
|
||||||
|
|
||||||
|
或新建 `Issue` 进行详细反馈。
|
||||||
|
|
@ -79,13 +79,13 @@ layui.use(function(){
|
||||||
// 表单赋值
|
// 表单赋值
|
||||||
$('#LAY-component-form-setval').on('click', function(){
|
$('#LAY-component-form-setval').on('click', function(){
|
||||||
form.val('demo-val-filter', {
|
form.val('demo-val-filter', {
|
||||||
"username": "贤心" // "name": "value"
|
"username": "贤心", // "name": "value"
|
||||||
,"password": "AAAAAA"
|
"password": "AAAAAA",
|
||||||
,"interest": 1
|
"interest": 1,
|
||||||
,"like[write]": true // 复选框选中状态
|
"like[write]": true, // 复选框选中状态
|
||||||
,"close": true // 开关状态
|
"close": true, // 开关状态
|
||||||
,"sex": "女"
|
"sex": "女",
|
||||||
,"desc": "Layui 用于更简单快速地构建网页界面"
|
"desc": "Layui 用于更简单快速地构建网页界面"
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// 表单取值
|
// 表单取值
|
||||||
|
|
|
||||||
|
|
@ -1172,3 +1172,48 @@ toc: true
|
||||||
<h2 id="cors" lay-toc="">跨域处理</h2>
|
<h2 id="cors" lay-toc="">跨域处理</h2>
|
||||||
|
|
||||||
由于浏览器存在同源策略，若 Layui 文件地址与你当前的页面地址*不在同一个域下*，即会出现图标跨域问题。因此，要么将 Layui 文件与网站放在同一服务器，要么对 Layui 文件所在的静态资源服务器的 `Response Headers` 添加：`Access-Control-Allow-Origin: *` 或对跨资源共享指定域名，即可解决图标跨域问题。
|
由于浏览器存在同源策略，若 Layui 文件地址与你当前的页面地址*不在同一个域下*，即会出现图标跨域问题。因此，要么将 Layui 文件与网站放在同一服务器，要么对 Layui 文件所在的静态资源服务器的 `Response Headers` 添加：`Access-Control-Allow-Origin: *` 或对跨资源共享指定域名，即可解决图标跨域问题。
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#ID-icon-copy{display: none;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-options="{preview: true, layout: ['preview'], id: 'ID-icon-copy'}">
|
||||||
|
<textarea>
|
||||||
|
<script>
|
||||||
|
layui.use(function(){
|
||||||
|
var $ = layui.jquery;
|
||||||
|
var layer = layui.layer;
|
||||||
|
|
||||||
|
$('.ws-docs-icon > div').on('click', function(){
|
||||||
|
var iconclass = $(this).find('.docs-icon-fontclass').text();
|
||||||
|
var copied = copy(iconclass);
|
||||||
|
if(copied){
|
||||||
|
layer.msg('已复制 '+ iconclass, {
|
||||||
|
icon: 1,
|
||||||
|
offset: '5%',
|
||||||
|
anim: 'slideDown',
|
||||||
|
isOutAnim: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function copy(text){
|
||||||
|
var textarea = document.createElement('textarea');
|
||||||
|
textarea.value = text;
|
||||||
|
textarea.style.position = 'absolute';
|
||||||
|
textarea.style.opacity = '0';
|
||||||
|
document.body.appendChild(textarea);
|
||||||
|
textarea.select();
|
||||||
|
var copied = false;
|
||||||
|
try{
|
||||||
|
copied = document.execCommand('copy');
|
||||||
|
}catch(err){
|
||||||
|
console.log('error', err);
|
||||||
|
}
|
||||||
|
textarea.remove();
|
||||||
|
return copied;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</textarea>
|
||||||
|
</pre>
|
||||||
|
|
|
||||||
|
|
@ -36,12 +36,12 @@ layui.use(function(){
|
||||||
laydate.render({
|
laydate.render({
|
||||||
elem: '#ID-laydate-mark',
|
elem: '#ID-laydate-mark',
|
||||||
mark: {
|
mark: {
|
||||||
'0-10-14': '生日'
|
'0-10-14': '生日',
|
||||||
,'0-12-31': '跨年' //每年的日期
|
'0-12-31': '跨年', //每年的日期
|
||||||
,'0-0-10': '工资' //每月某天
|
'0-0-10': '工资', //每月某天
|
||||||
,'0-0-15': '月中'
|
'0-0-15': '月中',
|
||||||
,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
|
'2017-8-15': '', //如果为空字符，则默认显示数字+徽章
|
||||||
,'2099-10-14': '呵呵'
|
'2099-10-14': '呵呵'
|
||||||
},
|
},
|
||||||
done: function(value, date){
|
done: function(value, date){
|
||||||
// 点击每年的 10月14日，弹出提示语
|
// 点击每年的 10月14日，弹出提示语
|
||||||
|
|
|
||||||
|
|
@ -78,18 +78,9 @@ layui.use(function(){
|
||||||
form.render(); // 表单组件渲染
|
form.render(); // 表单组件渲染
|
||||||
input.focus();
|
input.focus();
|
||||||
|
|
||||||
// 回车
|
|
||||||
input.on('keyup', function(e){
|
|
||||||
var elem = this;
|
|
||||||
var keyCode = e.keyCode;
|
|
||||||
if(keyCode === 13){
|
|
||||||
if(elem.value === PASS){
|
|
||||||
layer.close(index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 点击解锁按钮
|
// 点击解锁按钮
|
||||||
layero.find('#ID-layer-demo-unlock').on('click', function(){
|
var elemUnlock = layero.find('#ID-layer-demo-unlock');
|
||||||
|
elemUnlock.on('click', function(){
|
||||||
if($.trim(input[0].value) === PASS){
|
if($.trim(input[0].value) === PASS){
|
||||||
layer.close(index);
|
layer.close(index);
|
||||||
layer.closeLast('dialog'); // 关闭最新打开的信息框
|
layer.closeLast('dialog'); // 关闭最新打开的信息框
|
||||||
|
|
@ -98,6 +89,15 @@ layui.use(function(){
|
||||||
input.focus();
|
input.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 回车
|
||||||
|
input.on('keyup', function(e){
|
||||||
|
var elem = this;
|
||||||
|
var keyCode = e.keyCode;
|
||||||
|
if(keyCode === 13){
|
||||||
|
elemUnlock.trigger('click');
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -240,7 +240,7 @@ toc: true
|
||||||
<div class="grid-demo grid-demo-bg1">偏移3列</div>
|
<div class="grid-demo grid-demo-bg1">偏移3列</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-col-md3">
|
<div class="layui-col-md3">
|
||||||
<div class="grid-demo">不便宜</div>
|
<div class="grid-demo">不偏移</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</textarea>
|
</textarea>
|
||||||
|
|
|
||||||
|
|
@ -48,20 +48,20 @@
|
||||||
|
|
||||||
// 创建渲染实例
|
// 创建渲染实例
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-css'
|
elem: '#ID-table-demo-css',
|
||||||
,url:'{{d.root}}/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,page: true
|
page: true,
|
||||||
,height: 'full-35'
|
height: 'full-35',
|
||||||
,lineStyle: 'height: 151px;' // 定义表格的多行样式
|
lineStyle: 'height: 151px;', // 定义表格的多行样式
|
||||||
,css: [ // 直接给当前表格主容器重置 css 样式
|
css: [ // 直接给当前表格主容器重置 css 样式
|
||||||
'.layui-table-page{text-align: center;}' // 让分页栏居中
|
'.layui-table-page{text-align: center;}' // 让分页栏居中
|
||||||
].join('')
|
].join(''),
|
||||||
,className: 'layui-table-testcss' // 用于给表格主容器追加 css 类名
|
className: 'layui-table-testcss', // 用于给表格主容器追加 css 类名
|
||||||
,cols: [[
|
cols: [[
|
||||||
{field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'}
|
{field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'},
|
||||||
// 设置单元格样式
|
// 设置单元格样式
|
||||||
,{field:'sign', minWidth:100, title: '签名', style:'color: #000;'}
|
{field:'sign', minWidth:100, title: '签名', style:'color: #000;'},
|
||||||
,{width:160, title: '操作', templet: '#ID-table-demo-css-tool'}
|
{width:160, title: '操作', templet: '#ID-table-demo-css-tool'}
|
||||||
]]
|
]]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,78 +6,78 @@ layui.use('table', function(){
|
||||||
|
|
||||||
// 已知数据渲染
|
// 已知数据渲染
|
||||||
var inst = table.render({
|
var inst = table.render({
|
||||||
elem: '#ID-table-demo-data'
|
elem: '#ID-table-demo-data',
|
||||||
,cols: [[ //标题栏
|
cols: [[ //标题栏
|
||||||
{field: 'id', title: 'ID', width: 80, sort: true}
|
{field: 'id', title: 'ID', width: 80, sort: true},
|
||||||
,{field: 'username', title: '用户', width: 120}
|
{field: 'username', title: '用户', width: 120},
|
||||||
,{field: 'sign', title: '签名', minWidth: 160}
|
{field: 'sign', title: '签名', minWidth: 160},
|
||||||
,{field: 'sex', title: '性别', width: 80}
|
{field: 'sex', title: '性别', width: 80},
|
||||||
,{field: 'city', title: '城市', width: 100}
|
{field: 'city', title: '城市', width: 100},
|
||||||
,{field: 'experience', title: '积分', width: 80, sort: true}
|
{field: 'experience', title: '积分', width: 80, sort: true}
|
||||||
]]
|
]],
|
||||||
,data: [{ // 赋值已知数据
|
data: [{ // 赋值已知数据
|
||||||
"id": "10001"
|
"id": "10001",
|
||||||
,"username": "张三1"
|
"username": "张三1",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "116"
|
"experience": "116"
|
||||||
}, {
|
}, {
|
||||||
"id": "10002"
|
"id": "10002",
|
||||||
,"username": "张三2"
|
"username": "张三2",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "12"
|
"experience": "12",
|
||||||
,"LAY_CHECKED": true
|
"LAY_CHECKED": true
|
||||||
}, {
|
}, {
|
||||||
"id": "10003"
|
"id": "10003",
|
||||||
,"username": "张三3"
|
"username": "张三3",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "65"
|
"experience": "65"
|
||||||
}, {
|
}, {
|
||||||
"id": "10004"
|
"id": "10004",
|
||||||
,"username": "张三4"
|
"username": "张三4",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "777"
|
"experience": "777"
|
||||||
}, {
|
}, {
|
||||||
"id": "10005"
|
"id": "10005",
|
||||||
,"username": "张三5"
|
"username": "张三5",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "86"
|
"experience": "86"
|
||||||
}, {
|
}, {
|
||||||
"id": "10006"
|
"id": "10006",
|
||||||
,"username": "张三6"
|
"username": "张三6",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "12"
|
"experience": "12"
|
||||||
}, {
|
}, {
|
||||||
"id": "10007"
|
"id": "10007",
|
||||||
,"username": "张三7"
|
"username": "张三7",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "16"
|
"experience": "16"
|
||||||
}, {
|
}, {
|
||||||
"id": "10008"
|
"id": "10008",
|
||||||
,"username": "张三8"
|
"username": "张三8",
|
||||||
,"sex": "男"
|
"sex": "男",
|
||||||
,"city": "浙江杭州"
|
"city": "浙江杭州",
|
||||||
,"sign": "人生恰似一场修行"
|
"sign": "人生恰似一场修行",
|
||||||
,"experience": "106"
|
"experience": "106"
|
||||||
}]
|
}],
|
||||||
//,skin: 'line' // 表格风格
|
//skin: 'line', // 表格风格
|
||||||
//,even: true
|
//even: true,
|
||||||
,page: true // 是否显示分页
|
page: true, // 是否显示分页
|
||||||
,limits: [5, 10, 15]
|
limits: [5, 10, 15],
|
||||||
,limit: 5 // 每页默认显示的数量
|
limit: 5 // 每页默认显示的数量
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -63,47 +63,47 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
|
|
||||||
// 创建渲染实例
|
// 创建渲染实例
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#test'
|
elem: '#test',
|
||||||
,url:'{{d.root}}/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,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'
|
||||||
}]
|
}],
|
||||||
,height: 'full-35' // 最大高度减去其他容器已占有的高度差
|
height: 'full-35', // 最大高度减去其他容器已占有的高度差
|
||||||
,css: [ // 重设当前表格样式
|
css: [ // 重设当前表格样式
|
||||||
'.layui-table-tool-temp{padding-right: 145px;}'
|
'.layui-table-tool-temp{padding-right: 145px;}'
|
||||||
].join('')
|
].join(''),
|
||||||
,cellMinWidth: 80
|
cellMinWidth: 80,
|
||||||
,totalRow: true // 开启合计行
|
totalRow: true, // 开启合计行
|
||||||
,page: true
|
page: true,
|
||||||
,cols: [[
|
cols: [[
|
||||||
{type: 'checkbox', fixed: 'left'}
|
{type: 'checkbox', fixed: 'left'},
|
||||||
,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'}
|
{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},
|
||||||
,{field:'username', width:80, title: '用户'}
|
{field:'username', width:80, title: '用户'},
|
||||||
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'}
|
{field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'},
|
||||||
,{field:'sex', width:80, title: '性别', sort: true}
|
{field:'sex', width:80, title: '性别', sort: true},
|
||||||
,{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
|
{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
|
||||||
// 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: '签名', 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, 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},
|
||||||
,{field:'joinTime', title:'加入时间', width: 120}
|
{field:'joinTime', title:'加入时间', width: 120},
|
||||||
,{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
|
{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
|
||||||
]]
|
]],
|
||||||
,done: function(){
|
done: function(){
|
||||||
var id = this.id;
|
var id = this.id;
|
||||||
|
|
||||||
// 下拉按钮测试
|
// 下拉按钮测试
|
||||||
dropdown.render({
|
dropdown.render({
|
||||||
elem: '#dropdownButton' // 可绑定在任意元素中，此处以上述按钮为例
|
elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
|
||||||
,data: [{
|
data: [{
|
||||||
id: 'add',
|
id: 'add',
|
||||||
title: '添加'
|
title: '添加'
|
||||||
},{
|
},{
|
||||||
|
|
@ -112,9 +112,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; // 获取选中的数据
|
||||||
|
|
||||||
|
|
@ -148,8 +148,8 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
|
|
||||||
// 重载测试
|
// 重载测试
|
||||||
dropdown.render({
|
dropdown.render({
|
||||||
elem: '#reloadTest' // 可绑定在任意元素中，此处以上述按钮为例
|
elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
|
||||||
,data: [{
|
data: [{
|
||||||
id: 'reload',
|
id: 'reload',
|
||||||
title: '重载'
|
title: '重载'
|
||||||
},{
|
},{
|
||||||
|
|
@ -161,26 +161,26 @@ 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'
|
||||||
}
|
},
|
||||||
/*{{!
|
/*{{!
|
||||||
,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}
|
||||||
]]
|
]]
|
||||||
!}}*/
|
!}}*/
|
||||||
});
|
});
|
||||||
|
|
@ -189,33 +189,33 @@ 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'], // 重载头部工具栏右侧图标
|
||||||
//,cols: ins1.config.cols
|
//cols: ins1.config.cols
|
||||||
}, true);
|
}, true);
|
||||||
break;
|
break;
|
||||||
case 'reloadData':
|
case 'reloadData':
|
||||||
// 数据重载 - 参数重置
|
// 数据重载 - 参数重置
|
||||||
table.reloadData('test', {
|
table.reloadData('test', {
|
||||||
where: {
|
where: {
|
||||||
abc: '123456'
|
abc: '123456',
|
||||||
//,test: '新的 test2'
|
//test: '新的 test2',
|
||||||
//,token: '新的 token2'
|
//token: '新的 token2'
|
||||||
}
|
},
|
||||||
,scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
|
scrollPos: 'fixed', // 保持滚动条位置不变 - v2.7.3 新增
|
||||||
,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
|
height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
|
||||||
//,url: '404'
|
//url: '404',
|
||||||
//,page: {curr: 1, limit: 30} // 重新指向分页
|
//page: {curr: 1, limit: 30} // 重新指向分页
|
||||||
});
|
});
|
||||||
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;
|
||||||
|
|
@ -226,16 +226,16 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
|
|
||||||
// 行模式
|
// 行模式
|
||||||
dropdown.render({
|
dropdown.render({
|
||||||
elem: '#rowMode'
|
elem: '#rowMode',
|
||||||
,data: [{
|
data: [{
|
||||||
id: 'default-row',
|
id: 'default-row',
|
||||||
title: '单行模式（默认）'
|
title: '单行模式（默认）'
|
||||||
},{
|
},{
|
||||||
id: 'multi-row',
|
id: 'multi-row',
|
||||||
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; // 获取选中的数据
|
||||||
|
|
||||||
|
|
@ -258,8 +258,8 @@ layui.use(['table', 'dropdown'], function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
,error: function(res, msg){
|
error: function(res, msg){
|
||||||
console.log(res, msg)
|
console.log(res, msg)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -47,25 +47,25 @@ layui.use(function(){
|
||||||
|
|
||||||
// 渲染
|
// 渲染
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-editmodes'
|
elem: '#ID-table-demo-editmodes',
|
||||||
,url: '{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,page: true
|
page: true,
|
||||||
,css: [ // 设置单元格样式
|
css: [ // 设置单元格样式
|
||||||
// 取消默认的溢出隐藏，并设置适当高度
|
// 取消默认的溢出隐藏，并设置适当高度
|
||||||
'.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}',
|
'.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}',
|
||||||
'.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:150, 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, 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: 'colorpicker', width:100, 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){
|
||||||
var options = this;
|
var options = this;
|
||||||
|
|
||||||
// 获取当前行数据
|
// 获取当前行数据
|
||||||
|
|
@ -94,20 +94,20 @@ layui.use(function(){
|
||||||
|
|
||||||
// dropdown 方式的下拉选择
|
// dropdown 方式的下拉选择
|
||||||
dropdown.render({
|
dropdown.render({
|
||||||
elem: '.dropdpwn-demo'
|
elem: '.dropdpwn-demo',
|
||||||
// ,trigger: 'hover'
|
// trigger: 'hover',
|
||||||
// 此处的 data 值，可根据 done 返回的 res 遍历来赋值
|
// 此处的 data 值，可根据 done 返回的 res 遍历来赋值
|
||||||
,data: [{
|
data: [{
|
||||||
title: '男'
|
title: '男',
|
||||||
,id: 100
|
id: 100
|
||||||
},{
|
},{
|
||||||
title: '女'
|
title: '女',
|
||||||
,id: 101
|
id: 101
|
||||||
},{
|
},{
|
||||||
title: '保密'
|
title: '保密',
|
||||||
,id: 102
|
id: 102
|
||||||
}]
|
}],
|
||||||
,click: function(obj){
|
click: function(obj){
|
||||||
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
||||||
|
|
||||||
this.elem.find('span').html(obj.title);
|
this.elem.find('span').html(obj.title);
|
||||||
|
|
|
||||||
|
|
@ -12,24 +12,24 @@ layui.use(function(){
|
||||||
|
|
||||||
// 创建表格实例
|
// 创建表格实例
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-editable'
|
elem: '#ID-table-demo-editable',
|
||||||
,url: '{{d.root}}/static/json/table/edit.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url: '{{d.root}}/static/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,page: true
|
page: true,
|
||||||
//,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
|
//,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
|
||||||
,css: [
|
css: [
|
||||||
// 对开启了编辑的单元格追加样式
|
// 对开启了编辑的单元格追加样式
|
||||||
'.layui-table-view td[data-edit]{color: #16B777;}'
|
'.layui-table-view td[data-edit]{color: #16B777;}'
|
||||||
].join('')
|
].join(''),
|
||||||
,cols: [[
|
cols: [[
|
||||||
{checkbox: true, fixed: true}
|
{checkbox: true, fixed: true},
|
||||||
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
|
{field:'id', title: 'ID', width:80, sort: true, fixed: true},
|
||||||
,{field:'username', title: '用户名', width:80, edit: editable}
|
{field:'username', title: '用户名', width:80, edit: editable},
|
||||||
,{field:'sex', title: '性别', width:80, sort: true, edit: editable}
|
{field:'sex', title: '性别', width:80, sort: true, edit: editable},
|
||||||
,{field:'city', title: '城市', width:80, edit: editable}
|
{field:'city', title: '城市', width:80, edit: editable},
|
||||||
,{field:'sign', title: '签名', edit: editable}
|
{field:'sign', title: '签名', edit: editable},
|
||||||
,{field:'experience', title: '积分', sort: true, width:80, edit: editable}
|
{field:'experience', title: '积分', sort: true, width:80, edit: editable}
|
||||||
]]
|
]],
|
||||||
,height: 310
|
height: 310
|
||||||
});
|
});
|
||||||
|
|
||||||
// 单元格编辑后的事件
|
// 单元格编辑后的事件
|
||||||
|
|
|
||||||
|
|
@ -7,18 +7,18 @@ layui.use(function(){
|
||||||
|
|
||||||
// 渲染
|
// 渲染
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-filter'
|
elem: '#ID-table-demo-filter',
|
||||||
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,toolbar: 'default'
|
toolbar: 'default',
|
||||||
,height: 315
|
height: 315,
|
||||||
,cols: [function(){
|
cols: [function(){
|
||||||
var arr = [
|
var arr = [
|
||||||
{field:'id', title:'ID', width:80, fixed: 'left'}
|
{field:'id', title:'ID', width:80, fixed: 'left'},
|
||||||
,{field:'username', title:'用户', width:120}
|
{field:'username', title:'用户', width:120},
|
||||||
,{field:'sex', title:'性别'}
|
{field:'sex', title:'性别'},
|
||||||
,{field:'city', title:'城市'}
|
{field:'city', title:'城市'},
|
||||||
,{field:'sign', title:'签名'}
|
{field:'sign', title:'签名'},
|
||||||
,{field:'classify', title:'职业'}
|
{field:'classify', title:'职业'}
|
||||||
];
|
];
|
||||||
|
|
||||||
// 初始化筛选状态
|
// 初始化筛选状态
|
||||||
|
|
@ -29,8 +29,8 @@ layui.use(function(){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return arr;
|
return arr;
|
||||||
}() ]
|
}() ],
|
||||||
,done: function(){
|
done: function(){
|
||||||
// 记录筛选状态
|
// 记录筛选状态
|
||||||
var that = this;
|
var that = this;
|
||||||
that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
|
that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
|
||||||
|
|
|
||||||
|
|
@ -12,23 +12,23 @@ layui.use('table', function(){
|
||||||
|
|
||||||
// 创建渲染实例
|
// 创建渲染实例
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-page'
|
elem: '#ID-table-demo-page',
|
||||||
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
||||||
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
|
||||||
//,curr: 5 //设定初始在第 5 页
|
//curr: 5, //设定初始在第 5 页
|
||||||
,groups: 1 //只显示 1 个连续页码
|
groups: 1, //只显示 1 个连续页码
|
||||||
,first: false //不显示首页
|
first: false, //不显示首页
|
||||||
,last: false //不显示尾页
|
last: false //不显示尾页
|
||||||
}
|
},
|
||||||
,pagebar: '#ID-table-demo-page-pagebar' // 分页栏模板
|
pagebar: '#ID-table-demo-page-pagebar', // 分页栏模板
|
||||||
,cols: [[
|
cols: [[
|
||||||
{field:'id', width:80, title: 'ID', sort: true}
|
{field:'id', width:80, title: 'ID', sort: true},
|
||||||
,{field:'username', width:80, title: '用户名'}
|
{field:'username', width:80, title: '用户名'},
|
||||||
,{field:'sex', width:80, title: '性别', sort: true}
|
{field:'sex', width:80, title: '性别', sort: true},
|
||||||
,{field:'city', width:80, title: '城市'}
|
{field:'city', width:80, title: '城市'},
|
||||||
,{field:'sign', title: '签名', minWidth: 150}
|
{field:'sign', title: '签名', minWidth: 150},
|
||||||
,{field:'experience', width:80, title: '积分', sort: true}
|
{field:'experience', width:80, title: '积分', sort: true}
|
||||||
]]
|
]]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,31 +9,31 @@ layui.use('table', function(){
|
||||||
|
|
||||||
// 渲染
|
// 渲染
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-parse'
|
elem: '#ID-table-demo-parse',
|
||||||
,url:'{{d.root}}/static/json/table/demo3.json'
|
url:'{{d.root}}/static/json/table/demo3.json',
|
||||||
,page: true
|
page: true,
|
||||||
,response: {
|
response: {
|
||||||
statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
|
statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
|
||||||
}
|
},
|
||||||
// 将原始数据解析成 table 组件所规定的数据格式
|
// 将原始数据解析成 table 组件所规定的数据格式
|
||||||
,parseData: function(res){
|
parseData: function(res){
|
||||||
return {
|
return {
|
||||||
"code": res.status, //解析接口状态
|
"code": res.status, //解析接口状态
|
||||||
"msg": res.message, //解析提示文本
|
"msg": res.message, //解析提示文本
|
||||||
"count": res.total, //解析数据长度
|
"count": res.total, //解析数据长度
|
||||||
"data": res.rows.item //解析数据列表
|
"data": res.rows.item //解析数据列表
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
,cols: [[
|
cols: [[
|
||||||
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
|
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
|
||||||
,{field:'username', title:'用户名', width:120}
|
{field:'username', title:'用户名', width:120},
|
||||||
,{field:'email', title:'邮箱', width:150}
|
{field:'email', title:'邮箱', width:150},
|
||||||
,{field:'experience', title:'积分', width:100, sort: true}
|
{field:'experience', title:'积分', width:100, sort: true},
|
||||||
,{field:'sex', title:'性别', width:80, sort: true}
|
{field:'sex', title:'性别', width:80, sort: true},
|
||||||
,{field:'sign', title:'签名'}
|
{field:'sign', title:'签名'},
|
||||||
,{field:'joinTime', title:'加入时间', width:120}
|
{field:'joinTime', title:'加入时间', width:120}
|
||||||
]]
|
]],
|
||||||
,height: 315
|
height: 315
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -36,19 +36,19 @@ layui.use(function(){
|
||||||
|
|
||||||
// 创建表格实例
|
// 创建表格实例
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-search'
|
elem: '#ID-table-demo-search',
|
||||||
,url: '{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,cols: [[
|
cols: [[
|
||||||
{checkbox: true, fixed: true}
|
{checkbox: true, fixed: true},
|
||||||
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
|
{field:'id', title: 'ID', width:80, sort: true, fixed: true},
|
||||||
,{field:'username', title: '用户名', width:80}
|
{field:'username', title: '用户名', width:80},
|
||||||
,{field:'sex', title: '性别', width:80, sort: true}
|
{field:'sex', title: '性别', width:80, sort: true},
|
||||||
,{field:'city', title: '城市', width:80}
|
{field:'city', title: '城市', width:80},
|
||||||
,{field:'sign', title: '签名'}
|
{field:'sign', title: '签名'},
|
||||||
,{field:'experience', title: '积分', sort: true, width:80}
|
{field:'experience', title: '积分', sort: true, width:80}
|
||||||
]]
|
]],
|
||||||
,page: true
|
page: true,
|
||||||
,height: 310
|
height: 310
|
||||||
});
|
});
|
||||||
|
|
||||||
// 日期
|
// 日期
|
||||||
|
|
@ -64,8 +64,8 @@ layui.use(function(){
|
||||||
table.reload('ID-table-demo-search', {
|
table.reload('ID-table-demo-search', {
|
||||||
page: {
|
page: {
|
||||||
curr: 1 // 重新从第 1 页开始
|
curr: 1 // 重新从第 1 页开始
|
||||||
}
|
},
|
||||||
,where: field // 搜索的字段
|
where: field // 搜索的字段
|
||||||
});
|
});
|
||||||
|
|
||||||
layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
|
layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
|
||||||
|
|
|
||||||
|
|
@ -25,29 +25,29 @@ layui.use(['table'], function(){
|
||||||
|
|
||||||
// 创建渲染实例
|
// 创建渲染实例
|
||||||
table.render({
|
table.render({
|
||||||
elem: '#ID-table-demo-templet'
|
elem: '#ID-table-demo-templet',
|
||||||
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
|
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||||
,page: true
|
page: true,
|
||||||
,height: '315px'
|
height: '315px',
|
||||||
,cols: [[
|
cols: [[
|
||||||
{type: 'checkbox', fixed: 'left'}
|
{type: 'checkbox', fixed: 'left'},
|
||||||
// 未自定义模板的普通列
|
// 未自定义模板的普通列
|
||||||
,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true}
|
{field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
|
||||||
// 模板 - 选择器写法
|
// 模板 - 选择器写法
|
||||||
,{field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'}
|
{field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'},
|
||||||
// 模板 - 函数写法
|
// 模板 - 函数写法
|
||||||
,{field:'sex', width:60, title: '性别', templet: function(d){
|
{field:'sex', width:60, title: '性别', templet: function(d){
|
||||||
if(d.sex === '男'){
|
if(d.sex === '男'){
|
||||||
return '<span style="color: blue">♂</span>';
|
return '<span style="color: blue">♂</span>';
|
||||||
} else {
|
} else {
|
||||||
return '<span style="color: pink">♀</span>';
|
return '<span style="color: pink">♀</span>';
|
||||||
}
|
}
|
||||||
}}
|
}},
|
||||||
// 模板 - 普通字符写法
|
// 模板 - 普通字符写法
|
||||||
,{field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{!{{= d.city }}!}}</div>'}
|
{field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{!{{= d.city }}!}}</div>'},
|
||||||
// 模板中可包含任意字段、任意内容（如表单等）
|
// 模板中可包含任意字段、任意内容（如表单等）
|
||||||
,{title: '状态', width:85, templet: '#ID-table-demo-templet-switch'}
|
{title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},
|
||||||
,{title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
|
{title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
|
||||||
]]
|
]]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -471,8 +471,8 @@ table.hideCol('test', [{
|
||||||
hide: false
|
hide: false
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
// 显示或隐藏全部
|
// 显示或隐藏全部列
|
||||||
table.hideCol('test', false); // `true` or `false` `true` 则隐藏全部一般没有实质的用处，通常会用到的场景是隐藏部分列之后想要重新恢复显示所有的时候会用到这种方式传参 `false`
|
table.hideCol('test', false); // `true` or `false`
|
||||||
```
|
```
|
||||||
|
|
||||||
<h2 id="table.on" lay-toc="{hot: true}">事件</h2>
|
<h2 id="table.on" lay-toc="{hot: true}">事件</h2>
|
||||||
|
|
|
||||||
|
|
@ -181,9 +181,9 @@ onchange: function(data, index){
|
||||||
transfer.render({
|
transfer.render({
|
||||||
elem: '',
|
elem: '',
|
||||||
data: [ // 任意数据
|
data: [ // 任意数据
|
||||||
{"id": "1", "name": "李白"}
|
{"id": "1", "name": "李白"},
|
||||||
,{"id": "2", "name": "杜甫"}
|
{"id": "2", "name": "杜甫"},
|
||||||
,{"id": "3", "name": "贤心"}
|
{"id": "3", "name": "贤心"}
|
||||||
],
|
],
|
||||||
parseData: function(res){ // 解析成规定的 data 格式
|
parseData: function(res){ // 解析成规定的 data 格式
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -40,11 +40,11 @@ layui.use(function(){
|
||||||
|
|
||||||
layer.alert(JSON.stringify(checkedData), {shade:0});
|
layer.alert(JSON.stringify(checkedData), {shade:0});
|
||||||
console.log(checkedData);
|
console.log(checkedData);
|
||||||
}
|
},
|
||||||
,setChecked: function(){
|
setChecked: function(){
|
||||||
tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
|
tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
|
||||||
}
|
},
|
||||||
,reload: function(){
|
reload: function(){
|
||||||
tree.reload('demo-id-1', {}); // 重载实例
|
tree.reload('demo-id-1', {}); // 重载实例
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -118,22 +118,22 @@ layui.use(function(){
|
||||||
tree.render({
|
tree.render({
|
||||||
elem: '#ID-tree-demo-accordion',
|
elem: '#ID-tree-demo-accordion',
|
||||||
data: [{
|
data: [{
|
||||||
title: '优秀'
|
title: '优秀',
|
||||||
,children: [{
|
children: [{
|
||||||
title: '80 ~ 90'
|
title: '80 ~ 90'
|
||||||
},{
|
},{
|
||||||
title: '90 ~ 100'
|
title: '90 ~ 100'
|
||||||
}]
|
}]
|
||||||
},{
|
},{
|
||||||
title: '良好'
|
title: '良好',
|
||||||
,children: [{
|
children: [{
|
||||||
title: '70 ~ 80'
|
title: '70 ~ 80'
|
||||||
},{
|
},{
|
||||||
title: '60 ~ 70'
|
title: '60 ~ 70'
|
||||||
}]
|
}]
|
||||||
},{
|
},{
|
||||||
title: '一般'
|
title: '一般',
|
||||||
,children: [{
|
children: [{
|
||||||
title: '0 ~ 60'
|
title: '0 ~ 60'
|
||||||
}]
|
}]
|
||||||
}],
|
}],
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ layui.use(function(){
|
||||||
var that = this;
|
var that = this;
|
||||||
// if(res.code == 0){ // 上传成功
|
// if(res.code == 0){ // 上传成功
|
||||||
var tr = that.elemList.find('tr#upload-'+ index)
|
var tr = that.elemList.find('tr#upload-'+ index)
|
||||||
,tds = tr.children();
|
var tds = tr.children();
|
||||||
tds.eq(3).html(''); // 清空操作
|
tds.eq(3).html(''); // 清空操作
|
||||||
delete this.files[index]; // 删除文件队列已经上传成功的文件
|
delete this.files[index]; // 删除文件队列已经上传成功的文件
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
|
|
@ -1421,11 +1421,11 @@ layui.define(['table'], function (exports) {
|
||||||
var options = obj.config;
|
var options = obj.config;
|
||||||
var tableView = options.elem.next();
|
var tableView = options.elem.next();
|
||||||
var tableId = options.id;
|
var tableId = options.id;
|
||||||
var that = getThisTable(tableId);
|
|
||||||
|
|
||||||
if (tableView.hasClass('layui-table-tree')) {
|
if (tableView.hasClass('layui-table-tree')) {
|
||||||
updateObjParams(obj);
|
var that = getThisTable(tableId);
|
||||||
var checked = obj.checked;
|
var checked = obj.checked;
|
||||||
|
updateObjParams(obj)
|
||||||
obj.isAll = checkNode.call(that, obj.tr, checked);
|
obj.isAll = checkNode.call(that, obj.tr, checked);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue