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

更新 table 测试用例

pull/1365/head
贤心 2023-09-04 17:23:17 +08:00
parent b588b4c765
commit 67f6819823
1 changed files with 43 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
examples/table-test.html
View File

@ -31,10 +31,8 @@
重载测试 重载测试
<i class="layui-icon layui-icon-down layui-font-12"></i> <i class="layui-icon layui-icon-down layui-font-12"></i>
</button> </button>
<button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode"> <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row"> 多行 </button>
<span>{{= d.lineStyle ? '多行' : '单行' }}模式</span> <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row"> 单行 </button>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-sm" id="moreTest"> <button class="layui-btn layui-btn-sm" id="moreTest">
更多测试 更多测试
<i class="layui-icon layui-icon-down layui-font-12"></i> <i class="layui-icon layui-icon-down layui-font-12"></i>
@ -79,12 +77,12 @@
<table id="test"></table> <table id="test"></table>
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script> <script src="../src/layui.js"></script>
<script> <script>
(function(off){ (function(off){
if(!off) return; if(!off) return;
layui.disuse('table').extend({ layui.disuse('table').extend({
table: '{/}//ww:5018/layui/2.6.13/src/modules/table' table: '{/}https://cdn.staticfile.org/layui/2.7.6/layui.js'
}); });
})(); })();
@ -260,7 +258,7 @@ layui.use(['table', 'dropdown'], function(){
// 重载测试 // 重载测试
dropdown.render({ dropdown.render({
elem: '#reloadTest', //可绑定在任意元素中，此处以上述按钮为例 elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
data: [{ data: [{
id: 'reload', id: 'reload',
title: '重载' title: '重载'
@ -340,41 +338,9 @@ layui.use(['table', 'dropdown'], function(){
} }
}); });
// 行模式
dropdown.render({
elem: '#rowMode',
data: [{
id: 'default-row',
title: '单行模式（默认）'
},{
id: 'multi-row',
title: '多行模式'
}],
// 菜单被点击的事件
click: function(obj){
var checkStatus = table.checkStatus(id)
var data = checkStatus.data; // 获取选中的数据
switch(obj.id){
case 'default-row':
table.reload('test', {
lineStyle: null // 恢复单行
});
layer.msg('已设为单行');
break;
case 'multi-row':
table.reload('test', {
// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
lineStyle: 'height: 95px;'
});
layer.msg('即通过设置 lineStyle 参数可开启多行');
break;
}
}
});
// 更多测试 // 更多测试
dropdown.render({ dropdown.render({
elem: '#moreTest', //可绑定在任意元素中，此处以上述按钮为例 elem: '#moreTest', // 可绑定在任意元素中，此处以上述按钮为例
data: [{ data: [{
id: 'add', id: 'add',
title: '添加' title: '添加'
@ -420,8 +386,8 @@ layui.use(['table', 'dropdown'], function(){
/* /*
request: { // 自定义请求参数名称 request: { // 自定义请求参数名称
pageName: 'curr', //页码的参数名称，默认：page pageName: 'curr', // 页码的参数名称，默认：page
limitName: 'nums' //每页数据量的参数名，默认：limit limitName: 'nums' // 每页数据量的参数名，默认：limit
}, },
parseData: function(res){ // 任意数据格式的解析 parseData: function(res){ // 任意数据格式的解析
return { return {
@ -438,20 +404,20 @@ layui.use(['table', 'dropdown'], function(){
} }
}); });
//排序事件 // 排序事件
table.on('sort(test)', function(obj){ table.on('sort(test)', function(obj){
//console.log(obj); // console.log(obj);
//return; // return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type); layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序 // 服务端排序
table.reloadData('test', { table.reloadData('test', {
//initSort: obj, // initSort: obj,
//page: {curr: 1}, //重新从第一页开始 // page: {curr: 1}, // 重新从第一页开始
where: { // 向服务端传入排序参数 where: { // 向服务端传入排序参数
key: obj.field, //排序字段 key: obj.field, // 排序字段
order: obj.type //排序方式 order: obj.type // 排序方式
} }
}); });
}); });
@ -465,18 +431,31 @@ layui.use(['table', 'dropdown'], function(){
case 'getCheckData': case 'getCheckData':
var data = checkStatus.data; var data = checkStatus.data;
layer.alert(layui.util.escape(JSON.stringify(data))); layer.alert(layui.util.escape(JSON.stringify(data)));
break; break;
case 'getData': case 'getData':
var getData = table.getData(id); var getData = table.getData(id);
console.log(getData); console.log(getData);
layer.alert(layui.util.escape(JSON.stringify(getData))); layer.alert(layui.util.escape(JSON.stringify(getData)));
break; break;
case 'isAll': case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选') layer.msg(checkStatus.isAll ? '全选': '未全选')
break; break;
case 'multi-row':
table.reload('test', {
// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
lineStyle: 'height: 95px;'
});
layer.msg('即通过设置 lineStyle 参数可开启多行');
break;
case 'default-row':
table.reload('test', {
lineStyle: null // 恢复单行
});
layer.msg('已设为单行');
break;
case 'LAYTABLE_TIPS': case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v); layer.alert('Table for layui-v'+ layui.v);
break; break;
}; };
}); });
@ -485,16 +464,11 @@ layui.use(['table', 'dropdown'], function(){
console.log(obj); console.log(obj);
}); });
//触发单元格工具事件 // 触发单元格工具事件
table.on('tool(test)', function(obj){ // 双击 toolDouble table.on('tool(test)', function(obj){ // 双击 toolDouble
var data = obj.data; var data = obj.data;
//console.log(obj) // console.log(obj)
if(obj.event === 'del'){ if (obj.event === 'edit') {
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({ layer.prompt({
formType: 2 formType: 2
,value: data.email ,value: data.email
@ -512,17 +486,20 @@ layui.use(['table', 'dropdown'], function(){
*/ */
layer.close(index); layer.close(index);
}); });
} else if (obj.event === 'del') {
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} }
}); });
// 触发表格复选框选择
//触发表格复选框选择
table.on('checkbox(test)', function(obj){ table.on('checkbox(test)', function(obj){
console.log(obj) console.log(obj)
}); });
//触发表格单选框选择 // 触发表格单选框选择
table.on('radio(test)', function(obj){ table.on('radio(test)', function(obj){
console.log(obj) console.log(obj)
}); });