mirror of https://github.com/layui/layui
贤心
4 years ago
20 changed files with 637 additions and 111 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,256 @@
|
||||
|
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<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: 20px; /*overflow-y: scroll;*/} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
|
||||
<script type="text/html" id="toolbarDemo"> |
||||
<div class="layui-btn-container"> |
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页所有数据</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="reload">重载（保留初始参数）</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="reload2">重载（不保留初始参数）</button> |
||||
<button class="layui-btn layui-btn-sm" id="dropdown"> |
||||
更多菜单 |
||||
<i class="layui-icon layui-icon-down layui-font-12"></i> |
||||
</button> |
||||
</div> |
||||
</script> |
||||
|
||||
<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="test" lay-filter="test"></table> |
||||
|
||||
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script> |
||||
<script> |
||||
layui.use(['table'], function(){ |
||||
var table = layui.table |
||||
,$ = layui.$ |
||||
,laytpl = layui.laytpl; |
||||
|
||||
//全局设定某参数 |
||||
table.set({ |
||||
where: { |
||||
token: '默认 token 参数' |
||||
} |
||||
//,defaultToolbar: ['filter'] |
||||
,limit: 30 |
||||
//,url: 'list' |
||||
//,height: 300 |
||||
}); |
||||
|
||||
$('#appendtest').append($('#TPL_appendtest').html()) |
||||
table.init('appendtest'); |
||||
|
||||
//渲染 |
||||
window.ins1 = table.render({ |
||||
elem: '#test' |
||||
,height: 400 |
||||
//,width: 600 |
||||
,title: '用户数据表' |
||||
,url: 'json/table/demo1.json' |
||||
//,size: 'lg' |
||||
,page: { |
||||
|
||||
} |
||||
|
||||
//,autoSort: false //是否自动排序。如果否，则由服务端排序 |
||||
//,loading: false |
||||
,totalRow: true |
||||
,limit: 30 |
||||
,toolbar: '#toolbarDemo' |
||||
,defaultToolbar: ['filter', 'exports', 'print', { |
||||
title: '帮助' |
||||
,layEvent: 'LAYTABLE_TIPS' |
||||
,icon: 'layui-icon-tips' |
||||
}] |
||||
,cols: [[ |
||||
{type: 'checkbox', fixed: 'left'} |
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'} |
||||
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'} |
||||
,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){ |
||||
console.log(d); |
||||
return '<em>'+ d.email +'</em>' |
||||
}} |
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true} |
||||
,{field:'city', title:'城市', width:120, templet: '#cityTpl'} |
||||
,{field:'sign', title:'签名'} |
||||
,{field:'experience', title:'积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }}🍉', templet: '<div>{{ d.experience }} 分</div>'} |
||||
,{field:'ip', title:'IP', width:120} |
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 次'} |
||||
,{field:'joinTime', title:'加入时间', width:120} |
||||
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} |
||||
]] |
||||
|
||||
,initSort1: { |
||||
field: 'experience' //排序字段，对应 cols 设定的各字段名 |
||||
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 |
||||
} |
||||
|
||||
,headers: {headers_token: 'sasasas'} |
||||
,where: { |
||||
test: '初始 test 参数' |
||||
,token: '初始 token' |
||||
,key: 'experience' |
||||
,order: 'asc' |
||||
} |
||||
|
||||
,done: function(){ |
||||
|
||||
} |
||||
|
||||
,error: function(res, msg){ |
||||
console.log(res, msg) |
||||
} |
||||
|
||||
/* |
||||
,response: { |
||||
statusName: 'status' |
||||
,statusCode: 200 |
||||
} |
||||
,parseData: function(res){ |
||||
return { |
||||
"status": res.status |
||||
,"msg": res.message |
||||
,"count": res.total |
||||
,"data": res.data.list |
||||
}; |
||||
} |
||||
*/ |
||||
}); |
||||
|
||||
//排序事件 |
||||
table.on('sort(test)', function(obj){ |
||||
console.log(obj); |
||||
|
||||
return; |
||||
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type); |
||||
//服务端排序 |
||||
table.reload('test', { |
||||
initSort: obj |
||||
//,page: {curr: 1} //重新从第一页开始 |
||||
,where: { //重新请求服务端 |
||||
key: obj.field //排序字段 |
||||
,order: obj.type //排序方式 |
||||
} |
||||
}, true); |
||||
}); |
||||
|
||||
//工具栏事件 |
||||
table.on('toolbar(test)', function(obj){ |
||||
var checkStatus = table.checkStatus(obj.config.id); |
||||
switch(obj.event){ |
||||
case 'add': |
||||
layer.msg('添加'); |
||||
break; |
||||
case 'update': |
||||
layer.msg('编辑'); |
||||
break; |
||||
case 'delete': |
||||
layer.msg('删除'); |
||||
break; |
||||
case 'getCheckData': |
||||
var data = checkStatus.data; |
||||
layer.alert(JSON.stringify(data)); |
||||
break; |
||||
case 'getCheckLength': |
||||
var data = checkStatus.data; |
||||
layer.msg('选中了：'+ data.length + ' 个'); |
||||
break; |
||||
case 'getData': |
||||
var getData = table.getData(obj.config.id); |
||||
console.log(getData); |
||||
layer.alert(JSON.stringify(getData)); |
||||
break; |
||||
case 'isAll': |
||||
layer.msg(checkStatus.isAll ? '全选': '未全选') |
||||
break; |
||||
case 'LAYTABLE_TIPS': |
||||
layer.alert('Table for layui-v'+ layui.v); |
||||
break; |
||||
case 'reload': |
||||
//深度重载 |
||||
var instReload = table.reload('test', { |
||||
|
||||
where: { |
||||
abc: 123 |
||||
,test: '新的 test1' |
||||
} |
||||
,page: {curr: 5, limit: 20} |
||||
,cols: ins1.config.cols |
||||
//,height: 300 |
||||
//,url: 'x' |
||||
}, true); |
||||
break; |
||||
case 'reload2': |
||||
//浅重载 |
||||
table.reload('test', { |
||||
where: { |
||||
efg: 'sasasas' |
||||
//,test: '新的 test2' |
||||
//,token: '新的 token2' |
||||
} |
||||
,cols: [[ |
||||
{type: 'checkbox', fixed: 'left'} |
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'} |
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true} |
||||
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'} |
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true} |
||||
,{field:'joinTime', title:'加入时间', width:120} |
||||
]] |
||||
//,height: 500 |
||||
}); |
||||
break; |
||||
}; |
||||
}); |
||||
|
||||
table.on('row(test)', function(obj){ |
||||
console.log(obj); |
||||
//layer.closeAll('tips'); |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue