diff --git a/examples/table-test.html b/examples/table-test.html index f588def8..0ac450b1 100644 --- a/examples/table-test.html +++ b/examples/table-test.html @@ -446,15 +446,30 @@ layui.use(['table', 'dropdown'], function(){ // 单元格编辑事件 table.on('edit(test)', function(obj){ - var field = obj.field //得到字段 - ,value = obj.value //得到修改后的值 - ,data = obj.data; //得到所在行所有键值 + var field = obj.field // 得到字段 + var value = obj.value // 得到修改后的值 + var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增 + var data = obj.data; // 得到当前编辑所在行的数据 + // 值的校验 + if(field === 'email'){ + if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)){ + layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1}); + return obj.reedit(); // 重新编辑 -- v2.8.0 新增 + } + } + + // 编辑后续操作，如提交更新请求，以完成真实的数据更新 + // … + layer.msg('编辑成功', {icon: 1}); + + // 其他更新操作 var update = {}; update[field] = value; - obj.update(update, true); // 参数 true 为新版新增功能，详见文档 + obj.update(update, true); // 参数 true 为 v2.7.4 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图 }); + // 列拖拽宽度后的事件 -- v2.8.0 新增 table.on('colResized(test)', function(obj){ console.log(obj); diff --git a/examples/table.html b/examples/table.html index 49d6d5d8..bef4d905 100644 --- a/examples/table.html +++ b/examples/table.html @@ -4,11 +4,9 @@ 表格操作 - layui - - @@ -19,51 +17,17 @@ 静态表格 - - - - - - - - -
联系人金额
- - - - - - - - - - - -
+
+
+
+
- -
- @@ -188,12 +152,12 @@ layui.use('table', function(){ var $ = layui.$; var table = layui.table; - + // 常规示例 table.render({ - elem: '#test2' + elem: '#test' ,url: 'json/table/demo1.json' - ,contentType: 'application/json' - ,page: { //详细参数可参考 laypage 组件文档 + //,contentType: 'application/json' // 参数为 json 格式传递 + ,page: !0 || { //详细参数可参考 laypage 组件文档 curr: 5 ,groups: 1 ,first: false @@ -210,15 +174,6 @@ layui.use('table', function(){ ,{field: 'username', title: '用户名'} ,{field: 'email', title: '邮箱'} ,{title:'操作', align:'center', toolbar: '#barDemo'} - /* - {type:'numbers'} - ,{field:'id', title:'ID', unresize: true, sort: true} - ,{field:'username', title:'用户名', templet: '#usernameTpl'} - ,{field:'email', title:'邮箱'} - ,{xfield:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'} - ,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'} - ,{field:'city', title:'城市'} - */ ]] }); @@ -226,7 +181,7 @@ layui.use('table', function(){ // 直接赋值数据 table.render({ - elem: '#demo' + elem: '#test-data' //,width: 900 //,height: 274 ,toolbar: true @@ -234,16 +189,13 @@ layui.use('table', function(){ //{type: 'space'}, {type: 'checkbox', LAY_CHECKED: true}, {field: 'id', title: 'ID', width: 80, sort: true}, - {type: 'space', width: 100}, //空列 {field: 'username', title: '用户名', width: 120}, {field: 'email', title: '邮箱', width: 150}, {field: 'sign', title: '签名', minWidth: 150}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, - //{field: 'experience', title: '积分', width: 80, sort: true}, {field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'} ,{field:'ip', title:'IP', width: 120, align: 'right'} - ,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'} ,{field:'joinTime', title:'加入时间', width: 120} ]] ,data: [{ @@ -347,6 +299,20 @@ layui.use('table', function(){ ,totalRow: true //,loading: false //请求数据时，是否显示loading }); + + // 渲染数组成员非对象的内容（v2.8.0 新增） + table.render({ + elem: '#test-arr', + data: ['a','b','c','d','e','f','g','h','i'], + page: true, + limit: 3, + cols: [[ + {type: 'numbers', title: '序号'}, + {field: 'LAY_KEY', title: '内容'} + ]] + }); + + var $ = layui.jquery, active = { parseTable: function(){