<!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="isAll">验证是否全选</button>
</div>
</script>
<table id="test" lay-filter="test"></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="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;">
<table class="layui-table1" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
<th lay-data="{align:'center'}" colspan="3">地址</th>
<th lay-data="{fixed: 'right', width: 155, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th>
</tr>
<tr>
<th lay-data="{field:'province', width:130}">省</th>
<th lay-data="{field:'city', width:130}">市</th>
<th lay-data="{field:'zone', width:200}">区</th>
</tr>
</thead>
</table>
<table class="layui-table" lay-data="{url:'json/table/demo2.json', toolbar: '#toolbarDemo', page: true, limit: 6}">
<thead>
<tr>
<th lay-data="{field:'username'}" rowspan="3">联系人</th>
<th lay-data="{field:'amount', width:120,hide:1}" rowspan="3">金额</th>
<th lay-data="{align:'center'}" colspan="5">地址1</th>
<th lay-data="{align:'center'}" colspan="2">地址2</th>
<th lay-data="{fixed: 'right', width: 120, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作</th>
</tr>
<tr>
<th lay-data="{field:'province', width:120,hide:1}" rowspan="2">省</th>
<th lay-data="{field:'city', width:80,hide:1}" rowspan="2">市</th>
<th lay-data="{align:'center'}" colspan="2">详细</th>
<th lay-data="{field:'zone'}" rowspan="2">区</th>
<th lay-data="{field:'province', width:80}" rowspan="2">省</th>
<th lay-data="{field:'city', width:80}" rowspan="2">市</th>
</tr>
<tr>
<th lay-data="{field:'address', width:120,hide:1}">小区</th>
<th lay-data="{field:'house', width:150,hide:1}">单元</th>
</tr>
</thead>
</table>
<table id="demo"></table>
<div class="layui-btn-group">
<button class="layui-btn" data-type="parseTable">转化为数据表格</button>
</div>
<table class="layui-table" lay-skin="line" lay-filter="parse-table-demo">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'username', width:200}">昵称</th>
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>贤心1</td>
<td>2016-11-28</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td></td>
<td>贤心2</td>
<td>2016-11-29</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td></td>
<td>贤心3</td>
<td>2016-11-30</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-filter="parse-table-demo">
<thead>
<tr>
<td rowspan="2" lay-data="{field:'louceng'}">楼层</td>
<td colspan="2">1单元</td>
<td colspan="2">2单元</td>
</tr>
<tr>
<td lay-data="{field:'men1', width:80}">1门</td>
<td lay-data="{field:'men2', width:80}">2门</td>
<td lay-data="{field:'men3', width:80}">1门</td>
<td lay-data="{field:'men4', width:80}">2门</td>
</tr>
</thead>
<tbody>
<tr>
<td>3楼</td>
<td>301</td>
<td>302</td>
<td>301</td>
<td>302</td>
</tr>
<tr>
<td>2楼</td>
<td>201</td>
<td>202</td>
<td>201</td>
<td>202</td>
</tr>
<tr>
<td>1楼</td>
<td>101</td>
<td>102</td>
<td>101</td>
<td>102</td>
</tr>
</tbody>
</table>
</div>
<script src="../src/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//return;
//渲染
window.ins1 = table.render({
elem: '#test'
,height: 400
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
,page: {
}
,autoSort: false
//,loading: false
,totalRow: true
,limit: 30
,toolbar: '#toolbarDemo'
//,defaultToolbar: ['filter']
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', hide: true, width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱', hide: true, width:150, edit: 'text', templet: function(x){
return '<em>'+ x.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
/*
,response: {
statusName: 'status'
,statusCode: 200
}
,parseData: function(res){
return {
"status": res.status
,"msg": res.message
,"count": res.total
,"data": res.data.list
};
}
*/
});
//工具栏事件
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 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
};
});
table.on('row(test)', function(obj){
console.log(obj);
//layer.closeAll('tips');
});
table.render({
elem: '#test2'
,url: 'json/table/demo1.json'
,contentType: 'application/json'
,page: { //详细参数�
Hive数据仓库之垃圾分类数据分析系统 （1340个子文件） 
index.css 304KB bootstrap.css 143KB bootstrap.min.css 97KB layui.css 77KB layui.css 77KB layui.css 77KB layui.css 68KB layui.css 68KB layui.css 68KB layui.css 68KB layui.css 68KB bootstrap.min.css 65KB layui.css 31KB layim.css 17KB layim.css 17KB layim.css 17KB layim.css 15KB layim.css 15KB layim.css 15KB layim.css 15KB layer.css 15KB layer.css 15KB layer.css 15KB layer.css 15KB layim.css 15KB layer.css 14KB layer.css 14KB layer.css 14KB layer.css 14KB layer.css 14KB layer.css 14KB layer.css 14KB layui.mobile.css 11KB layui.mobile.css 11KB layui.mobile.css 11KB style.css 11KB layim.css 10KB layim.css 10KB layim.css 10KB layui.mobile.css 10KB layui.mobile.css 10KB layui.mobile.css 10KB layui.mobile.css 10KB layui.mobile.css 10KB layui.mobile.css 10KB laydate.css 9KB layim.css 9KB layim.css 9KB layim.css 9KB layim.css 9KB layim.css 9KB laydate.css 8KB laydate.css 8KB laydate.css 8KB laydate.css 8KB style.css 8KB laydate.css 8KB laydate.css 7KB laydate.css 7KB laydate.css 7KB laydate.css 7KB laydate.css 7KB layer.css 6KB layer.css 5KB index.css 5KB comon0.css 4KB datepicker.css 4KB style.css 3KB base.css 3KB style.css 3KB code.css 1KB code.css 1KB code.css 1KB code.css 1KB code.css 1KB code.css 1KB code.css 1KB code.css 1KB code.css 1KB font.css 512B font.css 512B font.css 512B .DS_Store 6KB iconfont.eot 53KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 40KB iconfont.eot 2KB iconfont.eot 2KB
59.gif 10KB 59.gif 10KB 59.gif 10KB 59.gif 10KB 59.gif 10KB 59.gif 10KB共 1340 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
