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

Merge pull request #1240 from Sight-wcg/patch-doc 

部分文档代码风格统一
pull/1241/head
贤心 2023-04-27 20:18:06 +08:00 committed by GitHub
parent b26a1acc5b 802cd36da8
commit 0f5d341746
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 290 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/form/examples/form.val.md
View File

@ -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 用于更简单快速地构建网页界面"
}); });
}); });
// 表单取值 // 表单取值

12
docs/laydate/examples/mark.md
View File

@ -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日，弹出提示语

24
docs/table/examples/css.md
View File

@ -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'}
]] ]]
}); });

130
docs/table/examples/data.md
View File

@ -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 // 每页默认显示的数量
}); });
}); });

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

@ -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)
} }
}); });

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

@ -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);

30
docs/table/examples/editable.md
View File

@ -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
}); });
// 单元格编辑后的事件 // 单元格编辑后的事件

26
docs/table/examples/filter.md
View File

@ -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(){

34
docs/table/examples/page.md
View File

@ -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}
]] ]]
}); });

34
docs/table/examples/parse.md
View File

@ -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>

30
docs/table/examples/search.md
View File

@ -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>此处为静态模拟数据，实际使用时换成真实接口即可');

26
docs/table/examples/templet.md
View File

@ -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'}
]] ]]
}); });

6
docs/transfer/detail/options.md
View File

@ -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 {

20
docs/tree/detail/demo.md
View File

@ -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'
}] }]
}], }],

2
docs/upload/examples/files.table.md
View File

@ -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;