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

更新 table 相关示例

pull/1123/head
贤心 2022-08-25 16:51:51 +08:00
parent ffa0302465
commit 253e7e3ab4
2 changed files with 43 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples/table-test.html
View File

@ -446,15 +446,30 @@ layui.use(['table', 'dropdown'], function(){
// 单元格编辑事件 // 单元格编辑事件
table.on('edit(test)', function(obj){ table.on('edit(test)', function(obj){
var field = obj.field //得到字段 var field = obj.field // 得到字段
,value = obj.value //得到修改后的值 var value = obj.value // 得到修改后的值
,data = obj.data; //得到所在行所有键值 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 = {}; var update = {};
update[field] = value; update[field] = value;
obj.update(update, true); // 参数 true 为新版新增功能，详见文档 obj.update(update, true); // 参数 true 为 v2.7.4 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
}); });
// 列拖拽宽度后的事件 -- v2.8.0 新增 // 列拖拽宽度后的事件 -- v2.8.0 新增
table.on('colResized(test)', function(obj){ table.on('colResized(test)', function(obj){
console.log(obj); console.log(obj);

82
examples/table.html
View File

@ -4,11 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title> <title>表格操作 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style> <style>
body{padding: 32px; /*overflow-y: scroll;*/} body{padding: 32px; /*overflow-y: scroll;*/}
</style> </style>
</head> </head>
<body> <body>
@ -19,51 +17,17 @@
<a href="table-static.html" class="layui-btn">静态表格</a> <a href="table-static.html" class="layui-btn">静态表格</a>
</div> </div>
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}" lay-filter="appendtest">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
<th lay-data="{field:'username', width:100}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:100}" rowspan="2">金额</th>
</tr>
</thead>
</table>
<script type="text/html" id="barDemo"> <script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> </script>
<script type="text/html" id="usernameTpl"> <table id="test"></table>
<a href="" class="layui-table-link">{{d.username || ''}}</a> <table id="test-data"></table>
</script> <table id="test-arr"></table>
<table id="test-json"></table>
<script type="text/html" id="switchTpl">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">
</script>
<script type="text/html" id="cityTpl">
<select lay-ignore>
<option value="浙江杭州">浙江杭州</option>
<option value="江西南昌">江西南昌</option>
<option value="湖北武汉">湖北武汉</option>
</select>
</script>
<script type="text/html" id="checkboxTpl">
<input type="checkbox" name="" title="锁定" checked>
</script>
<script type="text/html" id="LAY_table_tpl_email">
<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
</script>
<table id="test2" lay-filter="test2"></table>
<div style="display: none1;"> <div style="display: none1;">
<table id="demo"></table>
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6, toolbar: true}"> <table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6, toolbar: true}">
<thead> <thead>
<tr> <tr>
@ -188,12 +152,12 @@ layui.use('table', function(){
var $ = layui.$; var $ = layui.$;
var table = layui.table; var table = layui.table;
// 常规示例
table.render({ table.render({
elem: '#test2' elem: '#test'
,url: 'json/table/demo1.json' ,url: 'json/table/demo1.json'
,contentType: 'application/json' //,contentType: 'application/json' // 参数为 json 格式传递
,page: { //详细参数可参考 laypage 组件文档 ,page: !0 || { //详细参数可参考 laypage 组件文档
curr: 5 curr: 5
,groups: 1 ,groups: 1
,first: false ,first: false
@ -210,15 +174,6 @@ layui.use('table', function(){
,{field: 'username', title: '用户名'} ,{field: 'username', title: '用户名'}
,{field: 'email', title: '邮箱'} ,{field: 'email', title: '邮箱'}
,{title:'操作', align:'center', toolbar: '#barDemo'} ,{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({ table.render({
elem: '#demo' elem: '#test-data'
//,width: 900 //,width: 900
//,height: 274 //,height: 274
,toolbar: true ,toolbar: true
@ -234,16 +189,13 @@ layui.use('table', function(){
//{type: 'space'}, //{type: 'space'},
{type: 'checkbox', LAY_CHECKED: true}, {type: 'checkbox', LAY_CHECKED: true},
{field: 'id', title: 'ID', width: 80, sort: true}, {field: 'id', title: 'ID', width: 80, sort: true},
{type: 'space', width: 100}, //空列
{field: 'username', title: '用户名', width: 120}, {field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', width: 150}, {field: 'email', title: '邮箱', width: 150},
{field: 'sign', title: '签名', minWidth: 150}, {field: 'sign', title: '签名', minWidth: 150},
{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, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'} {field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
,{field:'ip', title:'IP', width: 120, align: 'right'} ,{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} ,{field:'joinTime', title:'加入时间', width: 120}
]] ]]
,data: [{ ,data: [{
@ -347,6 +299,20 @@ layui.use('table', function(){
,totalRow: true ,totalRow: true
//,loading: false //请求数据时，是否显示loading //,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 = { var $ = layui.jquery, active = {
parseTable: function(){ parseTable: function(){