添加网站文件
This commit is contained in:
67
public/static/plug/layui-admin/dist/views/component/table/auto.html
vendored
Normal file
67
public/static/plug/layui-admin/dist/views/component/table/auto.html
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>列宽自动分配 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>列宽自动分配</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">列宽自动分配</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-autowidth"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-autowidth'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
||||
,cols: [[
|
||||
{field:'id', title: 'ID', sort: true}
|
||||
,{field:'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
||||
,{field:'sex', title: '性别', sort: true}
|
||||
,{field:'city', title: '城市'}
|
||||
,{field:'sign', title: '签名'}
|
||||
,{field:'classify', title: '职业', align: 'center'} //单元格内容水平居中
|
||||
,{field:'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居中
|
||||
,{field:'score', title: '评分', sort: true, align: 'right'}
|
||||
,{field:'wealth', title: '财富', sort: true, align: 'right'}
|
||||
]]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
74
public/static/plug/layui-admin/dist/views/component/table/cellEdit.html
vendored
Normal file
74
public/static/plug/layui-admin/dist/views/component/table/cellEdit.html
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>开启单元格编辑 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启单元格编辑</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启单元格编辑</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-cellEdit" lay-filter="test-table-cellEdit"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-cellEdit'
|
||||
,url: layui.setter.base + 'json/table/demo.js'
|
||||
,cols: [[
|
||||
{type:'checkbox'}
|
||||
,{field:'id', title:'ID', width:80, sort: true}
|
||||
,{field:'username', title:'用户名', width:120, sort: true, edit: 'text'}
|
||||
,{field:'email', title:'邮箱', edit: 'text', minWidth: 150}
|
||||
,{field:'sex', title:'性别', width:80, edit: 'text'}
|
||||
,{field:'city', title:'城市', edit: 'text', minWidth: 100}
|
||||
,{field:'experience', title:'积分', sort: true, edit: 'text'}
|
||||
]]
|
||||
})
|
||||
|
||||
//监听单元格编辑
|
||||
table.on('edit(test-table-cellEdit)', function(obj){
|
||||
var value = obj.value //得到修改后的值
|
||||
,data = obj.data //得到所在行所有键值
|
||||
,field = obj.field; //得到字段
|
||||
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value, {
|
||||
offset: '15px'
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
public/static/plug/layui-admin/dist/views/component/table/cellEvent.html
vendored
Normal file
85
public/static/plug/layui-admin/dist/views/component/table/cellEvent.html
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>监听单元格事件 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>监听单元格事件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">监听单元格事件</div>
|
||||
<div class="layui-card-body">
|
||||
<blockquote class="layui-elem-quote">点击下面表格中的【签名列】，以演示单元格事件</blockquote>
|
||||
<table class="layui-hide" id="test-table-demoEvent" lay-filter="test-table-demoEvent"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-demoEvent'
|
||||
,height: 313
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,cols: [[
|
||||
{field:'id', title: 'ID', width:80}
|
||||
,{field:'username', title: '用户名', width:80}
|
||||
,{field:'sign', title: '签名', width:'50%', event: 'setSign', style:'cursor: pointer;'}
|
||||
,{field:'experience', title: '积分'}
|
||||
,{field:'score', title: '评分'}
|
||||
]]
|
||||
});
|
||||
|
||||
//监听单元格事件
|
||||
table.on('tool(test-table-demoEvent)', function(obj){
|
||||
var data = obj.data;
|
||||
if(obj.event === 'setSign'){
|
||||
layer.prompt({
|
||||
formType: 2
|
||||
,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
|
||||
,value: data.sign
|
||||
}, function(value, index){
|
||||
layer.close(index);
|
||||
|
||||
//这里一般是发送修改的Ajax请求
|
||||
|
||||
//同步更新表格和缓存对应的值
|
||||
obj.update({
|
||||
sign: value
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
68
public/static/plug/layui-admin/dist/views/component/table/checkbox.html
vendored
Normal file
68
public/static/plug/layui-admin/dist/views/component/table/checkbox.html
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>开启复选框 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启复选框</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启复选框</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-checkbox"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-checkbox'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,cols: [[
|
||||
{type:'checkbox'}
|
||||
,{field:'id', width:80, title: 'ID', sort: true}
|
||||
,{field:'username', width:80, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', title: '签名', minWidth: 100}
|
||||
,{field:'experience', width:80, title: '积分', sort: true}
|
||||
,{field:'score', width:80, title: '评分', sort: true}
|
||||
,{field:'classify', width:80, title: '职业'}
|
||||
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
159
public/static/plug/layui-admin/dist/views/component/table/data.html
vendored
Normal file
159
public/static/plug/layui-admin/dist/views/component/table/data.html
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>赋值已知数据 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>简单用法</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">赋值已知数据</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-data"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
//展示已知数据
|
||||
table.render({
|
||||
elem: '#test-table-data'
|
||||
,cols: [[ //标题栏
|
||||
{field: 'id', title: 'ID', width: 80, sort: true}
|
||||
,{field: 'username', title: '用户名', width: 120}
|
||||
,{field: 'email', title: '邮箱', minWidth: 150}
|
||||
,{field: 'sign', title: '签名', minWidth: 160}
|
||||
,{field: 'sex', title: '性别', width: 80}
|
||||
,{field: 'city', title: '城市', width: 100}
|
||||
,{field: 'experience', title: '积分', width: 80, sort: true}
|
||||
]]
|
||||
,data: [{
|
||||
"id": "10001"
|
||||
,"username": "杜甫"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "116"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "108"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10002"
|
||||
,"username": "李白"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "12"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
,"LAY_CHECKED": true
|
||||
}, {
|
||||
"id": "10003"
|
||||
,"username": "王勃"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "65"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10004"
|
||||
,"username": "贤心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "666"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10005"
|
||||
,"username": "贤心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "86"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10006"
|
||||
,"username": "贤心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "12"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10007"
|
||||
,"username": "贤心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "16"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10008"
|
||||
,"username": "贤心"
|
||||
,"email": "xianxin@layui.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "106"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}]
|
||||
//,skin: 'line' //表格风格
|
||||
,even: true
|
||||
//,page: true //是否显示分页
|
||||
//,limits: [5, 7, 10]
|
||||
//,limit: 5 //每页默认显示的数量
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
71
public/static/plug/layui-admin/dist/views/component/table/fixed.html
vendored
Normal file
71
public/static/plug/layui-admin/dist/views/component/table/fixed.html
vendored
Normal file
@@ -0,0 +1,71 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>固定列 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>固定列</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">固定列</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-fixed"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table
|
||||
,admin = layui.admin;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-fixed'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,width: admin.screen() > 1 ? 892 : ''
|
||||
,height: 332
|
||||
,cols: [[
|
||||
{type:'checkbox', fixed: 'left'}
|
||||
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
|
||||
,{field:'username', width:80, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', width: 219, title: '签名'}
|
||||
,{field:'experience', width:80, title: '积分', sort: true}
|
||||
,{field:'score', width:80, title: '评分', sort: true}
|
||||
,{field:'classify', width:80, title: '职业'}
|
||||
,{field:'wealth', width:120, title: '财富', sort: true, fixed: 'right'}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
100
public/static/plug/layui-admin/dist/views/component/table/form.html
vendored
Normal file
100
public/static/plug/layui-admin/dist/views/component/table/form.html
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>加入表单元素 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>加入表单元素</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">加入表单元素</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-form"></table>
|
||||
|
||||
<script type="text/html" id="test-table-switchTpl">
|
||||
<!-- 这里的 checked 的状态只是演示 -->
|
||||
<input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男" lay-filter="test-table-sexDemo"
|
||||
value="{{ d.id }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.id == 10003 ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="test-table-checkboxTpl">
|
||||
<!-- 这里的 checked 的状态只是演示 -->
|
||||
<input type="checkbox" name="lock" title="锁定" lay-filter="test-table-lockDemo"
|
||||
value="{{d.id}}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.id == 10006 ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table', 'form'], function(){
|
||||
var table = layui.table
|
||||
,form = layui.form
|
||||
,$ = layui.$;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-form'
|
||||
,url:'/demo/table/user/'
|
||||
,cellMinWidth: 80
|
||||
,cols: [[
|
||||
{type:'numbers'}
|
||||
,{type: 'checkbox'}
|
||||
,{field:'id', title:'ID', width:100, unresize: true, sort: true}
|
||||
,{field:'username', title:'用户名'}
|
||||
,{field:'city', title:'城市'}
|
||||
,{field:'wealth', title: '财富', minWidth:120, sort: true}
|
||||
,{field:'sex', title:'性别', width:85, templet: '#test-table-switchTpl', unresize: true}
|
||||
,{field:'lock', title:'是否锁定', width:110, templet: '#test-table-checkboxTpl', unresize: true}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
//监听性别操作
|
||||
form.on('switch(test-table-sexDemo)', function(obj){
|
||||
var json = JSON.parse(decodeURIComponent($(this).data('json')));
|
||||
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
|
||||
|
||||
json = table.clearCacheKey(json);
|
||||
console.log(json); //当前行数据
|
||||
});
|
||||
|
||||
//监听锁定操作
|
||||
form.on('checkbox(test-table-lockDemo)', function(obj){
|
||||
var json = JSON.parse(decodeURIComponent($(this).data('json')));
|
||||
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
|
||||
|
||||
json = table.clearCacheKey(json);
|
||||
console.log(json); //当前行数据
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
69
public/static/plug/layui-admin/dist/views/component/table/height.html
vendored
Normal file
69
public/static/plug/layui-admin/dist/views/component/table/height.html
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>高度最大适应 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>高度最大适应</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">高度最大适应</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-height"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-height'
|
||||
,url: layui.setter.base + 'json/table/user30.js'
|
||||
,height: 'full-100'
|
||||
,cellMinWidth: 80
|
||||
,page: true
|
||||
,limit: 30
|
||||
,cols: [[
|
||||
{type:'checkbox'}
|
||||
,{field:'id', title: 'ID', width:100, sort: true}
|
||||
,{field:'username', title: '用户名', width:100}
|
||||
,{field:'sex', title: '性别', width:100, sort: true}
|
||||
,{field:'sign', title: '签名', minWidth: 150}
|
||||
,{field:'experience', title: '积分', sort: true, align: 'right'}
|
||||
,{field:'score', title: '评分', sort: true, minWidth: 100, align: 'right'}
|
||||
]]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
66
public/static/plug/layui-admin/dist/views/component/table/initSort.html
vendored
Normal file
66
public/static/plug/layui-admin/dist/views/component/table/initSort.html
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>设置初始排序 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>设置初始排序</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置初始排序</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-initSort"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-initSort'
|
||||
,height: 313
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,initSort: {
|
||||
field: 'wealth'
|
||||
,type: 'desc'
|
||||
}
|
||||
,cols: [[
|
||||
{field:'id', title: 'ID', width:80}
|
||||
,{field:'username', title: '用户名', width:80}
|
||||
,{field:'score', title: '评分', width:80, sort: true}
|
||||
,{field:'wealth', title: '财富', sort: true, minWidth: 150}
|
||||
]]
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
public/static/plug/layui-admin/dist/views/component/table/onrow.html
vendored
Normal file
85
public/static/plug/layui-admin/dist/views/component/table/onrow.html
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>监听行事件 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>监听行事件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">监听行事件</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<table class="layui-hide" id="test-table-onrow" lay-filter="test-table-onrow"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-onrow'
|
||||
,url:'/test/table/demo1.json'
|
||||
,cols: [[
|
||||
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
|
||||
,{field:'username', title:'用户名', width:120}
|
||||
,{field:'email', title:'邮箱', width:150, templet: function(res){
|
||||
return '<em>'+ res.email +'</em>'
|
||||
}}
|
||||
,{field:'sex', title:'性别', width:80, sort: true}
|
||||
,{field:'city', title:'城市', width:100}
|
||||
,{field:'sign', title:'签名'}
|
||||
,{field:'experience', title:'积分', width:80, sort: true}
|
||||
,{field:'ip', title:'IP', width:120}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true}
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
//监听行单击事件（单击事件为：rowDouble）
|
||||
table.on('row(test-table-onrow)', function(obj){
|
||||
var data = obj.data;
|
||||
|
||||
layer.alert(JSON.stringify(data), {
|
||||
title: '当前行数据：'
|
||||
});
|
||||
|
||||
//标注选中样式
|
||||
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
125
public/static/plug/layui-admin/dist/views/component/table/operate.html
vendored
Normal file
125
public/static/plug/layui-admin/dist/views/component/table/operate.html
vendored
Normal file
@@ -0,0 +1,125 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数据操作 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>数据操作</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">数据操作</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
|
||||
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
|
||||
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
|
||||
<button class="layui-btn" data-type="isAll">验证是否全选</button>
|
||||
</div>
|
||||
|
||||
<table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>
|
||||
|
||||
<script type="text/html" id="test-table-operate-barDemo">
|
||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</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>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table
|
||||
,admin = layui.admin;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-operate'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,width: admin.screen() > 1 ? 892 : ''
|
||||
,height: 332
|
||||
,cols: [[
|
||||
{type:'checkbox', fixed: 'left'}
|
||||
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
|
||||
,{field:'username', width:80, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', width: 160, title: '签名'}
|
||||
,{field:'experience', width:80, title: '积分', sort: true}
|
||||
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||
,{field:'classify', width:80, title: '职业'}
|
||||
,{field:'score', width:80, title: '评分', sort: true, fixed: 'right'}
|
||||
,{width:178, align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
//监听表格复选框选择
|
||||
table.on('checkbox(test-table-operate)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
//监听工具条
|
||||
table.on('tool(test-table-operate)', function(obj){
|
||||
var data = obj.data;
|
||||
if(obj.event === 'detail'){
|
||||
layer.msg('ID：'+ data.id + ' 的查看操作');
|
||||
} else if(obj.event === 'del'){
|
||||
layer.confirm('真的删除行么', function(index){
|
||||
obj.del();
|
||||
layer.close(index);
|
||||
});
|
||||
} else if(obj.event === 'edit'){
|
||||
layer.alert('编辑行：<br>'+ JSON.stringify(data))
|
||||
}
|
||||
});
|
||||
|
||||
var $ = layui.$, active = {
|
||||
getCheckData: function(){ //获取选中数据
|
||||
var checkStatus = table.checkStatus('test-table-operate')
|
||||
,data = checkStatus.data;
|
||||
layer.alert(JSON.stringify(data));
|
||||
}
|
||||
,getCheckLength: function(){ //获取选中数目
|
||||
var checkStatus = table.checkStatus('test-table-operate')
|
||||
,data = checkStatus.data;
|
||||
layer.msg('选中了：'+ data.length + ' 个');
|
||||
}
|
||||
,isAll: function(){ //验证是否全选
|
||||
var checkStatus = table.checkStatus('test-table-operate');
|
||||
layer.msg(checkStatus.isAll ? '全选': '未全选')
|
||||
}
|
||||
};
|
||||
|
||||
$('.test-table-operate-btn .layui-btn').on('click', function(){
|
||||
var type = $(this).data('type');
|
||||
active[type] ? active[type].call(this) : '';
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
75
public/static/plug/layui-admin/dist/views/component/table/page.html
vendored
Normal file
75
public/static/plug/layui-admin/dist/views/component/table/page.html
vendored
Normal file
@@ -0,0 +1,75 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>开启分页 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启分页</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启分页</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-page"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-page'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,cols: [[
|
||||
{field:'id', width:80, title: 'ID', sort: true}
|
||||
,{field:'username', width:80, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', title: '签名', minWidth: 150}
|
||||
,{field:'experience', width:80, title: '积分', sort: true}
|
||||
,{field:'score', width:80, title: '评分', sort: true}
|
||||
,{field:'classify', width:80, title: '职业'}
|
||||
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
admin.popup({
|
||||
content: '演示数据均为静态模拟数据，因此【切换分页和条数时】发现数据未变并非 BUG。实际使用时改成真实接口即可。'
|
||||
,area: '300px'
|
||||
,offset: '15px'
|
||||
,shade: false
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
83
public/static/plug/layui-admin/dist/views/component/table/parseData.html
vendored
Normal file
83
public/static/plug/layui-admin/dist/views/component/table/parseData.html
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>解析任意数据格式 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>解析任意数据格式</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">解析任意数据格式</div>
|
||||
<div class="layui-card-body">
|
||||
<blockquote class="layui-elem-quote layui-text">
|
||||
尽管本示例中的原始数据：<a href="../../../layuiadmin/json/table/demo3.js" target="_blank">demo3.js</a>，并不符合 table 组件默认规定的数据格式，但从 layui 2.4.0 开始，新增的 parseData 回调可以将原始的任意格式的数据重新解析成 table 组件规定的数据格式。具体可以点击上方查看代码。
|
||||
</blockquote>
|
||||
|
||||
<table class="layui-hide" id="test-table-parseData" lay-filter="test-table-parseData"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-parseData'
|
||||
,url: layui.setter.base + '/json/table/demo3.js'
|
||||
,toolbar: true
|
||||
,title: '用户数据表'
|
||||
,totalRow: true
|
||||
,cellMinWidth: 120
|
||||
,cols: [[
|
||||
{field:'id', title:'ID', width:80, sort: true, totalRowText: '合计行'}
|
||||
,{field:'username', title:'用户名', edit: 'text'}
|
||||
,{field:'experience', title:'积分', sort: true, totalRow: true}
|
||||
,{field:'logins', title:'登入次数', sort: true, totalRow: true}
|
||||
]]
|
||||
,page: true
|
||||
,response: {
|
||||
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
|
||||
}
|
||||
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
|
||||
return {
|
||||
"code": res.status, //解析接口状态
|
||||
"msg": res.message, //解析提示文本
|
||||
"count": res.total, //解析数据长度
|
||||
"data": res.rows.item //解析数据列表
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
public/static/plug/layui-admin/dist/views/component/table/radio.html
vendored
Normal file
89
public/static/plug/layui-admin/dist/views/component/table/radio.html
vendored
Normal file
@@ -0,0 +1,89 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>开启单选框 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启单选框</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启单选框</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-radio" lay-filter="test-table-radio"></table>
|
||||
|
||||
<script type="text/html" id="test-table-radio-toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-radio'
|
||||
,url: layui.setter.base + '/json/table/user.js'
|
||||
,toolbar: '#test-table-radio-toolbarDemo'
|
||||
,cols: [[
|
||||
{type:'radio'}
|
||||
,{field:'id', width:80, title: 'ID', sort: true}
|
||||
,{field:'username', width:80, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', title: '签名', minWidth: 100}
|
||||
,{field:'experience', width:80, title: '积分', sort: true}
|
||||
,{field:'score', width:80, title: '评分', sort: true}
|
||||
,{field:'classify', width:80, title: '职业'}
|
||||
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
//头工具栏事件
|
||||
table.on('toolbar(test-table-radio)', function(obj){
|
||||
var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
|
||||
switch(obj.event){
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data; //获取选中行数据
|
||||
layer.alert(JSON.stringify(data));
|
||||
break;
|
||||
};
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
public/static/plug/layui-admin/dist/views/component/table/reload.html
vendored
Normal file
105
public/static/plug/layui-admin/dist/views/component/table/reload.html
vendored
Normal file
@@ -0,0 +1,105 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数据表格的重载 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>数据表格的重载</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">数据表格的重载</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
搜索ID：
|
||||
<div class="layui-inline">
|
||||
<input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off">
|
||||
</div>
|
||||
<button class="layui-btn" data-type="reload">搜索</button>
|
||||
</div>
|
||||
|
||||
<table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
|
||||
|
||||
<blockquote class="layui-elem-quote">此处由于是静态模拟数据，所以搜索后重载的结果没变，这并非是 BUG。实际使用时改成真实接口并根据搜索的字段筛选出对应的数据即可。</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
//方法级渲染
|
||||
table.render({
|
||||
elem: '#test-table-reload'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,cols: [[
|
||||
{checkbox: true, fixed: true}
|
||||
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
|
||||
,{field:'username', title: '用户名', width:80}
|
||||
,{field:'sex', title: '性别', width:80, sort: true}
|
||||
,{field:'city', title: '城市', width:80}
|
||||
,{field:'sign', title: '签名'}
|
||||
,{field:'experience', title: '积分', sort: true, width:80}
|
||||
,{field:'score', title: '评分', sort: true, width:80}
|
||||
,{field:'classify', title: '职业', width:80}
|
||||
,{field:'wealth', title: '财富', sort: true, width:135}
|
||||
]]
|
||||
,page: true
|
||||
,height: 315
|
||||
});
|
||||
|
||||
var $ = layui.$, active = {
|
||||
reload: function(){
|
||||
var demoReload = $('#test-table-demoReload');
|
||||
|
||||
//执行重载
|
||||
table.reload('test-table-reload', {
|
||||
page: {
|
||||
curr: 1 //重新从第 1 页开始
|
||||
}
|
||||
,where: {
|
||||
key: {
|
||||
id: demoReload.val()
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$('.test-table-reload-btn .layui-btn').on('click', function(){
|
||||
var type = $(this).data('type');
|
||||
active[type] ? active[type].call(this) : '';
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
76
public/static/plug/layui-admin/dist/views/component/table/resetPage.html
vendored
Normal file
76
public/static/plug/layui-admin/dist/views/component/table/resetPage.html
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>自定义分页 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>自定义分页</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义分页</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-resetPage"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-resetPage'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
||||
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||||
//,curr: 5 //设定初始在第 5 页
|
||||
,groups: 1 //只显示 1 个连续页码
|
||||
,first: false //不显示首页
|
||||
,last: false //不显示尾页
|
||||
|
||||
}
|
||||
,cols: [[
|
||||
{field:'id', width:80, title: 'ID', sort: true}
|
||||
,{field:'username', width:100, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', title: '签名', minWidth: 150}
|
||||
,{field:'experience', width:80, title: '积分', sort: true}
|
||||
,{field:'score', width:80, title: '评分', sort: true}
|
||||
,{field:'classify', width:80, title: '职业'}
|
||||
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||
]]
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
66
public/static/plug/layui-admin/dist/views/component/table/simple.html
vendored
Normal file
66
public/static/plug/layui-admin/dist/views/component/table/simple.html
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>简单用法 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>简单用法</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">简单用法</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-simple"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-simple'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
||||
,cols: [[
|
||||
{field:'id', width:80, title: 'ID', sort: true}
|
||||
,{field:'username', width:80, title: '用户名'}
|
||||
,{field:'sex', width:80, title: '性别', sort: true}
|
||||
,{field:'city', width:80, title: '城市'}
|
||||
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
||||
,{field:'experience', title: '积分', sort: true}
|
||||
,{field:'score', title: '评分', sort: true}
|
||||
,{field:'classify', title: '职业'}
|
||||
,{field:'wealth', width:137, title: '财富', sort: true}
|
||||
]]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
327
public/static/plug/layui-admin/dist/views/component/table/static.html
vendored
Normal file
327
public/static/plug/layui-admin/dist/views/component/table/static.html
vendored
Normal file
@@ -0,0 +1,327 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>静态表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>静态表格</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">默认风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">行边框风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-skin="line">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">列边框风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-even="" lay-skin="row">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">无边框风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-even="" lay-skin="nob">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">其它尺寸</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-size="lg">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>许闲心</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sentsin</td>
|
||||
<td>2016-11-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>许闲心</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sentsin</td>
|
||||
<td>2016-11-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index']);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
public/static/plug/layui-admin/dist/views/component/table/style.html
vendored
Normal file
81
public/static/plug/layui-admin/dist/views/component/table/style.html
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>设置单元格样式 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>设置单元格样式</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置单元格样式</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-style"></table>
|
||||
|
||||
<script type="text/html" id="test-table-usernameTpl">
|
||||
<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
|
||||
</script>
|
||||
<script type="text/html" id="test-table-sexTpl">
|
||||
{{# if(d.sex === '女'){ }}
|
||||
<span style="color: #F581B1;">{{ d.sex }}</span>
|
||||
{{# } else { }}
|
||||
{{ d.sex }}
|
||||
{{# } }}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-style'
|
||||
,url: layui.setter.base + 'json/table/user.js'
|
||||
,height: 310
|
||||
,cols: [[
|
||||
{field:'id', title:'ID', width:80, sort: true}
|
||||
,{field:'username', title:'用户名', width:80, templet: '#usernameTpl'}
|
||||
,{field:'sex', title:'性别', width:80, sort: true, templet: '#sexTpl'}
|
||||
,{field:'city', title:'城市', width:80}
|
||||
,{field:'sign', title:'签名'}
|
||||
,{field:'experience', title:'积分', width:80, sort: true, style:'background-color: #eee;'}
|
||||
,{field:'score', title:'评分', width:80, sort: true}
|
||||
,{field:'classify', title:'职业', width:80, style:'background-color: #009688; color: #fff;'}
|
||||
,{field:'wealth', title:'财富', width:135, sort: true}
|
||||
]]
|
||||
,page: true
|
||||
,skin: 'row'
|
||||
,even: true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
114
public/static/plug/layui-admin/dist/views/component/table/thead.html
vendored
Normal file
114
public/static/plug/layui-admin/dist/views/component/table/thead.html
vendored
Normal file
@@ -0,0 +1,114 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>复杂表头 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>复杂表头</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">复杂表头</div>
|
||||
<div class="layui-card-body">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>常用两级表头</legend>
|
||||
</fieldset>
|
||||
|
||||
<table class="layui-table" lay-data="{width:800, page: true, limit: 6, limits:[6]}" lay-filter="test-table-thead1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
||||
<th lay-data="{field:'username', width:150}" rowspan="2">联系人</th>
|
||||
<th lay-data="{align:'center'}" colspan="3">地址</th>
|
||||
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
|
||||
<th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#test-table-thead-barDemo'}" rowspan="2">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th lay-data="{field:'province', width:120}">省</th>
|
||||
<th lay-data="{field:'city', width:120}">市</th>
|
||||
<th lay-data="{field:'zone', width:200}">区</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>更多级表头（可以无限极）</legend>
|
||||
</fieldset>
|
||||
<table class="layui-table" lay-data="{cellMinWidth: 80, page: true}" lay-filter="test-table-thead1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>
|
||||
<th lay-data="{field:'amount', width:120}" 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: 160, align: 'center', toolbar: '#test-table-thead-barDemo'}" rowspan="3">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th lay-data="{field:'province'}" rowspan="2">省</th>
|
||||
<th lay-data="{field:'city'}" rowspan="2">市</th>
|
||||
<th lay-data="{align:'center'}" colspan="3">详细</th>
|
||||
<th lay-data="{field:'province'}" rowspan="2">省</th>
|
||||
<th lay-data="{field:'city'}" rowspan="2">市</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th lay-data="{field:'street'}" rowspan="2">街道</th>
|
||||
<th lay-data="{field:'address'}">小区</th>
|
||||
<th lay-data="{field:'house'}">单元</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<script type="text/html" id="test-table-thead-barDemo">
|
||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
|
||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
|
||||
</script>
|
||||
|
||||
<br>
|
||||
<blockquote class="layui-elem-quote">注：上述例子读取的均是静态模拟数据</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
table.init('test-table-thead1', {
|
||||
url: layui.setter.base + 'json/table/demo2.js'
|
||||
});
|
||||
|
||||
table.init('test-table-thead2', {
|
||||
url: layui.setter.base + 'json/table/demo2.js'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
127
public/static/plug/layui-admin/dist/views/component/table/toolbar.html
vendored
Normal file
127
public/static/plug/layui-admin/dist/views/component/table/toolbar.html
vendored
Normal file
@@ -0,0 +1,127 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>开启头部工具栏 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启头部工具栏</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启头部工具栏</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
|
||||
|
||||
<script type="text/html" id="test-table-toolbar-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>
|
||||
|
||||
<script type="text/html" id="test-table-toolbar-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-toolbar'
|
||||
,url: layui.setter.base + 'json/table/demo.js'
|
||||
,toolbar: '#test-table-toolbar-toolbarDemo'
|
||||
,title: '用户数据表'
|
||||
,cols: [[
|
||||
{type: 'checkbox', fixed: 'left'}
|
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
|
||||
,{field:'username', title:'用户名', width:120, edit: 'text'}
|
||||
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
|
||||
return '<em>'+ res.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}
|
||||
,{field:'ip', title:'IP', width:120}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true}
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
//头工具栏事件
|
||||
table.on('toolbar(test-table-toolbar)', function(obj){
|
||||
var checkStatus = table.checkStatus(obj.config.id);
|
||||
switch(obj.event){
|
||||
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('tool(test-table-toolbar)', function(obj){
|
||||
var data = obj.data;
|
||||
if(obj.event === 'del'){
|
||||
layer.confirm('真的删除行么', function(index){
|
||||
obj.del();
|
||||
layer.close(index);
|
||||
});
|
||||
} else if(obj.event === 'edit'){
|
||||
layer.prompt({
|
||||
formType: 2
|
||||
,value: data.email
|
||||
}, function(value, index){
|
||||
obj.update({
|
||||
email: value
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
93
public/static/plug/layui-admin/dist/views/component/table/tostatic.html
vendored
Normal file
93
public/static/plug/layui-admin/dist/views/component/table/tostatic.html
vendored
Normal file
@@ -0,0 +1,93 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>转化静态表格 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>转化静态表格</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">转化静态表格</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-btn-group test-table-btn" style="margin-bottom: 10px;">
|
||||
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
|
||||
</div>
|
||||
|
||||
<table lay-filter="parse-table-demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{field:'username', width:200}">昵称</th>
|
||||
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
|
||||
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心1</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>人生就像是一场修行 A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心2</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行 B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心3</td>
|
||||
<td>2016-11-30</td>
|
||||
<td>人生就像是一场修行 C</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var table = layui.table;
|
||||
|
||||
var $ = layui.$, active = {
|
||||
parseTable: function(){
|
||||
table.init('parse-table-demo', { //转化静态表格
|
||||
//height: 'full-500'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$('.test-table-btn .layui-btn').on('click', function(){
|
||||
var type = $(this).data('type');
|
||||
active[type] ? active[type].call(this) : '';
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
97
public/static/plug/layui-admin/dist/views/component/table/totalRow.html
vendored
Normal file
97
public/static/plug/layui-admin/dist/views/component/table/totalRow.html
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>开启合计行 - 数据表格</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启合计行</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启合计行</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-totalRow" lay-filter="test-table-totalRow"></table>
|
||||
|
||||
<script type="text/html" id="test-table-totalRow-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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../../layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'table'], function(){
|
||||
var admin = layui.admin
|
||||
,table = layui.table;
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-totalRow'
|
||||
,url: layui.setter.base + '/json/table/demo.js'
|
||||
,toolbar: '#test-table-totalRow-toolbarDemo'
|
||||
,title: '用户数据表'
|
||||
,totalRow: true
|
||||
,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'}
|
||||
,{field:'experience', title:'积分', width:120, sort: true, totalRow: true}
|
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
|
||||
,{field:'sign', title:'签名'}
|
||||
]]
|
||||
,page: true
|
||||
});
|
||||
|
||||
//头工具栏事件
|
||||
table.on('toolbar(test-table-totalRow)', function(obj){
|
||||
var checkStatus = table.checkStatus(obj.config.id);
|
||||
switch(obj.event){
|
||||
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;
|
||||
};
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user