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(){
form.val('demo-val-filter', {
"username": "贤心" // "name": "value"
,"password": "AAAAAA"
,"interest": 1
,"like[write]": true // 复选框选中状态
,"close": true // 开关状态
,"sex": "女"
,"desc": "Layui 用于更简单快速地构建网页界面"
"username": "贤心", // "name": "value"
"password": "AAAAAA",
"interest": 1,
"like[write]": true, // 复选框选中状态
"close": true, // 开关状态
"sex": "女",
"desc": "Layui 用于更简单快速地构建网页界面"
});
});
// 表单取值

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

@ -36,12 +36,12 @@ layui.use(function(){
laydate.render({
elem: '#ID-laydate-mark',
mark: {
'0-10-14': '生日'
,'0-12-31': '跨年' //每年的日期
,'0-0-10': '工资' //每月某天
,'0-0-15': '月中'
,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
,'2099-10-14': '呵呵'
'0-10-14': '生日',
'0-12-31': '跨年', //每年的日期
'0-0-10': '工资', //每月某天
'0-0-15': '月中',
'2017-8-15': '', //如果为空字符，则默认显示数字+徽章
'2099-10-14': '呵呵'
},
done: function(value, date){
// 点击每年的 10月14日，弹出提示语

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

@ -48,20 +48,20 @@
// 创建渲染实例
table.render({
elem: '#ID-table-demo-css'
,url:'{{d.root}}/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,page: true
,height: 'full-35'
,lineStyle: 'height: 151px;' // 定义表格的多行样式
,css: [ // 直接给当前表格主容器重置 css 样式
elem: '#ID-table-demo-css',
url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
height: 'full-35',
lineStyle: 'height: 151px;', // 定义表格的多行样式
css: [ // 直接给当前表格主容器重置 css 样式
'.layui-table-page{text-align: center;}' // 让分页栏居中
].join('')
,className: 'layui-table-testcss' // 用于给表格主容器追加 css 类名
,cols: [[
{field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'}
].join(''),
className: 'layui-table-testcss', // 用于给表格主容器追加 css 类名
cols: [[
{field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'},
// 设置单元格样式
,{field:'sign', minWidth:100, title: '签名', style:'color: #000;'}
,{width:160, title: '操作', templet: '#ID-table-demo-css-tool'}
{field:'sign', minWidth:100, title: '签名', style:'color: #000;'},
{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({
elem: '#ID-table-demo-data'
,cols: [[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'username', title: '用户', width: 120}
,{field: 'sign', title: '签名', minWidth: 160}
,{field: 'sex', title: '性别', width: 80}
,{field: 'city', title: '城市', width: 100}
,{field: 'experience', title: '积分', width: 80, sort: true}
]]
,data: [{ // 赋值已知数据
"id": "10001"
,"username": "张三1"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "116"
elem: '#ID-table-demo-data',
cols: [[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'username', title: '用户', width: 120},
{field: 'sign', title: '签名', minWidth: 160},
{field: 'sex', title: '性别', width: 80},
{field: 'city', title: '城市', width: 100},
{field: 'experience', title: '积分', width: 80, sort: true}
]],
data: [{ // 赋值已知数据
"id": "10001",
"username": "张三1",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "116"
}, {
"id": "10002"
,"username": "张三2"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "12"
,"LAY_CHECKED": true
"id": "10002",
"username": "张三2",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
"LAY_CHECKED": true
}, {
"id": "10003"
,"username": "张三3"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "65"
"id": "10003",
"username": "张三3",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "65"
}, {
"id": "10004"
,"username": "张三4"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "777"
"id": "10004",
"username": "张三4",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "777"
}, {
"id": "10005"
,"username": "张三5"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "86"
"id": "10005",
"username": "张三5",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "86"
}, {
"id": "10006"
,"username": "张三6"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "12"
"id": "10006",
"username": "张三6",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12"
}, {
"id": "10007"
,"username": "张三7"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "16"
"id": "10007",
"username": "张三7",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "16"
}, {
"id": "10008"
,"username": "张三8"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "106"
}]
//,skin: 'line' // 表格风格
//,even: true
,page: true // 是否显示分页
,limits: [5, 10, 15]
,limit: 5 // 每页默认显示的数量
"id": "10008",
"username": "张三8",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "106"
}],
//skin: 'line', // 表格风格
//even: true,
page: true, // 是否显示分页
limits: [5, 10, 15],
limit: 5 // 每页默认显示的数量
});
});

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

@ -63,47 +63,47 @@ layui.use(['table', 'dropdown'], function(){
// 创建渲染实例
table.render({
elem: '#test'
,url:'{{d.root}}/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,height: 'full-35' // 最大高度减去其他容器已占有的高度差
,css: [ // 重设当前表格样式
elem: '#test',
url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
height: 'full-35', // 最大高度减去其他容器已占有的高度差
css: [ // 重设当前表格样式
'.layui-table-tool-temp{padding-right: 145px;}'
].join('')
,cellMinWidth: 80
,totalRow: true // 开启合计行
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'}
,{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:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
].join(''),
cellMinWidth: 80,
totalRow: true, // 开启合计行
page: true,
cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},
{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:'sex', width:80, title: '性别', sort: true},
{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
// console.log(obj)
// 处理该字段的导出数据
var td = obj.td(this.field); // 获取当前 td
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:'experience', width: 100, title: '积分', sort: true, totalRow: '{{!{{= d.TOTAL_NUMS }} 😊!}}'}
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'}
,{field:'ip', title:'IP', width: 120}
,{field:'joinTime', title:'加入时间', width: 120}
,{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
]]
,done: function(){
}},
{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:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'},
{field:'ip', title:'IP', width: 120},
{field:'joinTime', title:'加入时间', width: 120},
{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
]],
done: function(){
var id = this.id;
// 下拉按钮测试
dropdown.render({
elem: '#dropdownButton' // 可绑定在任意元素中，此处以上述按钮为例
,data: [{
elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
data: [{
id: 'add',
title: '添加'
},{
@ -112,9 +112,9 @@ layui.use(['table', 'dropdown'], function(){
},{
id: 'delete',
title: '删除'
}]
}],
// 菜单被点击的事件
,click: function(obj){
click: function(obj){
var checkStatus = table.checkStatus(id)
var data = checkStatus.data; // 获取选中的数据
@ -148,8 +148,8 @@ layui.use(['table', 'dropdown'], function(){
// 重载测试
dropdown.render({
elem: '#reloadTest' // 可绑定在任意元素中，此处以上述按钮为例
,data: [{
elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
data: [{
id: 'reload',
title: '重载'
},{
@ -161,26 +161,26 @@ layui.use(['table', 'dropdown'], function(){
},{
id: 'reloadData-deep',
title: '仅重载数据 - 参数叠加'
}]
}],
// 菜单被点击的事件
,click: function(obj){
click: function(obj){
switch(obj.id){
case 'reload':
// 重载 - 默认（参数重置）
table.reload('test', {
where: {
abc: '123456'
//,test: '新的 test2'
//,token: '新的 token2'
}
abc: '123456',
//test: '新的 test2',
//token: '新的 token2'
},
/*{{!
,cols: [[ // 重置表头
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
cols: [[ // 重置表头
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
{field:'sex', title:'性别', width:80, edit: 'text', sort: true},
{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'},
{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
{field:'joinTime', title:'加入时间', width:120}
]]
!}}*/
});
@ -189,33 +189,33 @@ layui.use(['table', 'dropdown'], function(){
// 重载 - 深度（参数叠加）
table.reload('test', {
where: {
abc: 123
,test: '新的 test1'
}
//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
//,cols: ins1.config.cols
abc: 123,
test: '新的 test1'
},
//defaultToolbar: ['print'], // 重载头部工具栏右侧图标
//cols: ins1.config.cols
}, true);
break;
case 'reloadData':
// 数据重载 - 参数重置
table.reloadData('test', {
where: {
abc: '123456'
//,test: '新的 test2'
//,token: '新的 token2'
}
,scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
//,url: '404'
//,page: {curr: 1, limit: 30} // 重新指向分页
abc: '123456',
//test: '新的 test2',
//token: '新的 token2'
},
scrollPos: 'fixed', // 保持滚动条位置不变 - v2.7.3 新增
height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
//url: '404',
//page: {curr: 1, limit: 30} // 重新指向分页
});
break;
case 'reloadData-deep':
// 数据重载 - 参数叠加
table.reloadData('test', {
where: {
abc: 123
,test: '新的 test1'
abc: 123,
test: '新的 test1'
}
}, true);
break;
@ -226,16 +226,16 @@ layui.use(['table', 'dropdown'], function(){
// 行模式
dropdown.render({
elem: '#rowMode'
,data: [{
elem: '#rowMode',
data: [{
id: 'default-row',
title: '单行模式（默认）'
},{
id: 'multi-row',
title: '多行模式'
}]
}],
// 菜单被点击的事件
,click: function(obj){
click: function(obj){
var checkStatus = table.checkStatus(id)
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)
}
});

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

@ -47,25 +47,25 @@ layui.use(function(){
// 渲染
table.render({
elem: '#ID-table-demo-editmodes'
,url: '{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,page: true
,css: [ // 设置单元格样式
elem: '#ID-table-demo-editmodes',
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
css: [ // 设置单元格样式
// 取消默认的溢出隐藏，并设置适当高度
'.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}',
'.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
'.layui-table-cell select{height: 36px; padding: 0 5px;}'
].join('')
,cols: [[ // 表头
{field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'}
,{field: 'city', title: '原生 select', width:150, templet: '#TPL-select-primary'}
//,{field: 'city', title: 'layui select', width:150, templet: '#TPL-select-city'}
,{field: 'sex', title: 'dropdown', width:115, align: 'center', templet: '#TPL-dropdpwn-demo'}
,{field: 'date', title: 'laydate', width:150, templet: '#TPL-laydate-demo'}
,{field: 'color', title: 'colorpicker', width:100, align: 'center', templet: '#TPL-colorpicker-demo'}
,{field: 'sign', title: '文本', edit: 'textarea'}
]]
,done: function(res, curr, count){
].join(''),
cols: [[ // 表头
{field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'},
{field: 'city', title: '原生 select', width:150, templet: '#TPL-select-primary'},
//{field: 'city', title: 'layui select', width:150, templet: '#TPL-select-city'},
{field: 'sex', title: 'dropdown', width:115, align: 'center', templet: '#TPL-dropdpwn-demo'},
{field: 'date', title: 'laydate', width:150, templet: '#TPL-laydate-demo'},
{field: 'color', title: 'colorpicker', width:100, align: 'center', templet: '#TPL-colorpicker-demo'},
{field: 'sign', title: '文本', edit: 'textarea'}
]],
done: function(res, curr, count){
var options = this;
// 获取当前行数据
@ -94,20 +94,20 @@ layui.use(function(){
// dropdown 方式的下拉选择
dropdown.render({
elem: '.dropdpwn-demo'
// ,trigger: 'hover'
elem: '.dropdpwn-demo',
// trigger: 'hover',
// 此处的 data 值，可根据 done 返回的 res 遍历来赋值
,data: [{
title: '男'
,id: 100
data: [{
title: '男',
id: 100
},{
title: '女'
,id: 101
title: '女',
id: 101
},{
title: '保密'
,id: 102
}]
,click: function(obj){
title: '保密',
id: 102
}],
click: function(obj){
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
this.elem.find('span').html(obj.title);

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

@ -12,24 +12,24 @@ layui.use(function(){
// 创建表格实例
table.render({
elem: '#ID-table-demo-editable'
,url: '{{d.root}}/static/json/table/edit.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,page: true
elem: '#ID-table-demo-editable',
url: '{{d.root}}/static/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
//,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
,css: [
css: [
// 对开启了编辑的单元格追加样式
'.layui-table-view td[data-edit]{color: #16B777;}'
].join('')
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'username', title: '用户名', width:80, edit: editable}
,{field:'sex', title: '性别', width:80, sort: true, edit: editable}
,{field:'city', title: '城市', width:80, edit: editable}
,{field:'sign', title: '签名', edit: editable}
,{field:'experience', title: '积分', sort: true, width:80, edit: editable}
]]
,height: 310
].join(''),
cols: [[
{checkbox: true, fixed: true},
{field:'id', title: 'ID', width:80, sort: true, fixed: true},
{field:'username', title: '用户名', width:80, edit: editable},
{field:'sex', title: '性别', width:80, sort: true, edit: editable},
{field:'city', title: '城市', width:80, edit: editable},
{field:'sign', title: '签名', edit: editable},
{field:'experience', title: '积分', sort: true, width:80, edit: editable}
]],
height: 310
});
// 单元格编辑后的事件

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

@ -7,18 +7,18 @@ layui.use(function(){
// 渲染
table.render({
elem: '#ID-table-demo-filter'
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,toolbar: 'default'
,height: 315
,cols: [function(){
elem: '#ID-table-demo-filter',
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
toolbar: 'default',
height: 315,
cols: [function(){
var arr = [
{field:'id', title:'ID', width:80, fixed: 'left'}
,{field:'username', title:'用户', width:120}
,{field:'sex', title:'性别'}
,{field:'city', title:'城市'}
,{field:'sign', title:'签名'}
,{field:'classify', title:'职业'}
{field:'id', title:'ID', width:80, fixed: 'left'},
{field:'username', title:'用户', width:120},
{field:'sex', title:'性别'},
{field:'city', title:'城市'},
{field:'sign', title:'签名'},
{field:'classify', title:'职业'}
];
// 初始化筛选状态
@ -29,8 +29,8 @@ layui.use(function(){
}
});
return arr;
}() ]
,done: function(){
}() ],
done: function(){
// 记录筛选状态
var that = this;
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({
elem: '#ID-table-demo-page'
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,pagebar: '#ID-table-demo-page-pagebar' // 分页栏模板
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', minWidth: 150}
,{field:'experience', width:80, title: '积分', sort: true}
elem: '#ID-table-demo-page',
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
//curr: 5, //设定初始在第 5 页
groups: 1, //只显示 1 个连续页码
first: false, //不显示首页
last: false //不显示尾页
},
pagebar: '#ID-table-demo-page-pagebar', // 分页栏模板
cols: [[
{field:'id', width:80, title: 'ID', sort: true},
{field:'username', width:80, title: '用户名'},
{field:'sex', width:80, title: '性别', sort: true},
{field:'city', width:80, title: '城市'},
{field:'sign', title: '签名', minWidth: 150},
{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({
elem: '#ID-table-demo-parse'
,url:'{{d.root}}/static/json/table/demo3.json'
,page: true
,response: {
elem: '#ID-table-demo-parse',
url:'{{d.root}}/static/json/table/demo3.json',
page: true,
response: {
statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
}
},
// 将原始数据解析成 table 组件所规定的数据格式
,parseData: function(res){
parseData: function(res){
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows.item //解析数据列表
};
}
,cols: [[
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120}
,{field:'email', title:'邮箱', width:150}
,{field:'experience', title:'积分', width:100, sort: true}
,{field:'sex', title:'性别', width:80, sort: true}
,{field:'sign', title:'签名'}
,{field:'joinTime', title:'加入时间', width:120}
]]
,height: 315
},
cols: [[
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', width:150},
{field:'experience', title:'积分', width:100, sort: true},
{field:'sex', title:'性别', width:80, sort: true},
{field:'sign', title:'签名'},
{field:'joinTime', title:'加入时间', width:120}
]],
height: 315
});
});
</script>

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

@ -36,19 +36,19 @@ layui.use(function(){
// 创建表格实例
table.render({
elem: '#ID-table-demo-search'
,url: '{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'username', title: '用户名', width:80}
,{field:'sex', title: '性别', width:80, sort: true}
,{field:'city', title: '城市', width:80}
,{field:'sign', title: '签名'}
,{field:'experience', title: '积分', sort: true, width:80}
]]
,page: true
,height: 310
elem: '#ID-table-demo-search',
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
cols: [[
{checkbox: true, fixed: true},
{field:'id', title: 'ID', width:80, sort: true, fixed: true},
{field:'username', title: '用户名', width:80},
{field:'sex', title: '性别', width:80, sort: true},
{field:'city', title: '城市', width:80},
{field:'sign', title: '签名'},
{field:'experience', title: '积分', sort: true, width:80}
]],
page: true,
height: 310
});
// 日期
@ -64,8 +64,8 @@ layui.use(function(){
table.reload('ID-table-demo-search', {
page: {
curr: 1 // 重新从第 1 页开始
}
,where: field // 搜索的字段
},
where: field // 搜索的字段
});
layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');

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

@ -25,29 +25,29 @@ layui.use(['table'], function(){
// 创建渲染实例
table.render({
elem: '#ID-table-demo-templet'
,url:'{{d.root}}/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口
,page: true
,height: '315px'
,cols: [[
{type: 'checkbox', fixed: 'left'}
elem: '#ID-table-demo-templet',
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
height: '315px',
cols: [[
{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 === '男'){
return '<span style="color: blue">♂</span>';
} else {
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: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
{title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},
{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({
elem: '',
data: [ // 任意数据
{"id": "1", "name": "李白"}
,{"id": "2", "name": "杜甫"}
,{"id": "3", "name": "贤心"}
{"id": "1", "name": "李白"},
{"id": "2", "name": "杜甫"},
{"id": "3", "name": "贤心"}
],
parseData: function(res){ // 解析成规定的 data 格式
return {

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

@ -40,11 +40,11 @@ layui.use(function(){
layer.alert(JSON.stringify(checkedData), {shade:0});
console.log(checkedData);
}
,setChecked: function(){
},
setChecked: function(){
tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
}
,reload: function(){
},
reload: function(){
tree.reload('demo-id-1', {}); // 重载实例
}
});
@ -118,22 +118,22 @@ layui.use(function(){
tree.render({
elem: '#ID-tree-demo-accordion',
data: [{
title: '优秀'
,children: [{
title: '优秀',
children: [{
title: '80 ~ 90'
},{
title: '90 ~ 100'
}]
},{
title: '良好'
,children: [{
title: '良好',
children: [{
title: '70 ~ 80'
},{
title: '60 ~ 70'
}]
},{
title: '一般'
,children: [{
title: '一般',
children: [{
title: '0 ~ 60'
}]
}],

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

@ -73,7 +73,7 @@ layui.use(function(){
var that = this;
// if(res.code == 0){ // 上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
var tds = tr.children();
tds.eq(3).html(''); // 清空操作
delete this.files[index]; // 删除文件队列已经上传成功的文件
return;