diff --git a/examples/table-test.html b/examples/table-test.html index 6769b305..fa829c5a 100644 --- a/examples/table-test.html +++ b/examples/table-test.html @@ -31,6 +31,10 @@ 重载测试 + + {{= d.lineStyle ? '多行' : '单行' }}模式 + + 更多测试 @@ -116,7 +120,7 @@ layui.use(['table', 'dropdown'], function(){ // height: 300 }); - //渲染 + // 渲染 window.ins1 = table.render({ elem: '#test', height: 520, @@ -155,13 +159,13 @@ layui.use(['table', 'dropdown'], function(){ // cellMaxWidth: 320 cols: !1 ? test_cols : [[ {type: 'checkbox', fixed: 'left'}, - //,{type: 'numbers', fixed: 'left'} + // {type: 'numbers', fixed: 'left'}, {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计:'}, {field:'username', title:'用户名 ', width:120, edit: function(d){ return !d.LAY_DISABLED; }, templet: '#usernameTpl'}, {field:'xxx', title:'测试', edit: 'text'}, - {field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 ', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){ + {field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 ', fieldTitle: '邮箱', hide: 0, edit: 'text', style: 'background-color: #fafafa; color: red;', templet: function(d){ return ''+ layui.util.escape(d.email) +'' }}, {field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false}, @@ -336,6 +340,37 @@ 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({