mirror of https://github.com/layui/layui
更新 table 相关示例
贤心
parent
ffa0302465
commit
253e7e3ab4
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@
|
|||
<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">
|
||||
<title>表格操作 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 32px; /*overflow-y: scroll;*/}
|
||||
body{padding: 32px; /*overflow-y: scroll;*/}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -19,51 +17,17 @@
|
|||
<a href="table-static.html" class="layui-btn">静态表格</a>
|
||||
</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">
|
||||
<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>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="usernameTpl">
|
||||
<a href="" class="layui-table-link">{{d.username || ''}}</a>
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<table id="test"></table>
|
||||
<table id="test-data"></table>
|
||||
<table id="test-arr"></table>
|
||||
<table id="test-json"></table>
|
||||
|
||||
<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}">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -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(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue