96 Star 435 Fork 123

sunxiaobin/layuiTablePlug

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
testTableCheckboxStatus.html 15.20 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html>
<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>tablePlug</title>
<link rel="stylesheet" href="layui/src/css/layui.css" media="all">
<style>
body {
margin: 10px;
}
.layui-form-label {
width: 100px;
}
.layui-table-view .layui-table-body tr.table_tr_click {
background-color: pink;
}
</style>
</head>
<body>
<a href='https://gitee.com/sun_zoro/layuiTablePlug' target="gitee_tablePlug"
style="position: absolute; right: 0;top:0;">
<img src='https://gitee.com/sun_zoro/layuiTablePlug/widgets/widget_1.svg' alt='Fork me on Gitee'>
</a>
<div class="layui-row layui-col-space10">
<div class="layui-col-md6 layui-col-sm12">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">是否跨页记录</label>
<div class="layui-input-inline">
<input type="checkbox" name="status" lay-skin="switch" lay-filter="statusSwitch">
</div>
<div class="layui-input-inline">
<span class="layui-btn layui-btn-sm layui-btn-danger" onclick="resetCheckboxStatus(this)" data-id="demo">重置选中状态</span>
</div>
</div>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<div class="layui-col-md6 layui-col-sm12">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">是否跨页记录</label>
<div class="layui-input-inline">
<input type="checkbox" name="status" lay-skin="switch" disabled checked="checked" lay-filter="statusSwitch">
</div>
<div class="layui-input-inline">
<span class="layui-btn layui-btn-sm layui-btn-danger" onclick="resetCheckboxStatus(this)" data-id="demo2">重置选中状态</span>
</div>
</div>
</div>
<!-- <table class="layui-hide" id="demo2" lay-filter="test"></table>-->
<table class="layui-hide" lay-id="demo2" lay-filter="test"></table>
</div>
</div>
<script type="text/html" id="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>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container layui-inline">
<span class="layui-btn layui-btn-sm" lay-event="getChecked">获得选中的数据</span>
<span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="getCheckedStatus">获得选中的状态</span>
{{# if(d.checkStatus) {}}
<span class="layui-btn layui-btn-sm" lay-event="deleteSome">批量删除</span>
{{# } }}
{{# if(d.id === 'demo'){ }}
<span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="jump" data-page="1">第1页</span>
<span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="jump" data-page="2">第2页</span>
<span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reload" data-url="data_none">无数据</span>
{{# } }}
<span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload">重载</span>
</div>
<div class="layui-inline">
{{# if(d.id === 'demo'){ }}
<span><span style="color: red;"></span>url模式测试用的是json文件所以翻页请用这里按钮,不要用table的中的laypage组件,实际开发中不会有这个问题</span>
{{# } else {}}
<span>data模式测试</span>
{{# } }}
</div>
</script>
<script src="layui/src/layui.js"></script>
<script>
layui.config({base: 'test/js/'}).use(['testTablePlug'], function () {
var $ = layui.jquery
, layer = layui.layer //弹层
, form = layui.form //弹层
, table = layui.table //表格
, tablePlug = layui.tablePlug; //表格插件
// 当前这个测试页面测试的重点不是智能重载,所以关掉该功能,实际上该功能也是默认关闭的,可以不执行下面这句代码,也可以强制指定。
// tablePlug.smartReload.enable(false);
// 处理操作列
var fn1 = function (field) {
return function (data) {
return data[field];
};
};
var data = [
{
"id": 10000,
"username": "user-0",
"sex": "",
"city": "城市-0",
"sign": "签名-0",
"experience": 0,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
},
{
"id": 10001,
"username": "user-1",
"sex": "",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
},
{
"id": 10002,
"username": "user-2",
"sex": "",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
},
{
"id": 10003,
"username": "user-3",
"sex": "",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
},
{
"id": 10004,
"username": "user-4",
"sex": "",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
},
{
"id": 10005,
"username": "user-5",
"sex": "",
"city": "城市-5",
"sign": "签名-5",
"experience": -173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
},
{
"id": 10006,
"username": "user-6",
"sex": "",
"city": "城市-6",
"sign": "签名-6",
"experience": -982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
},
{
"id": 10007,
"username": "user-7",
"sex": "",
"city": "城市-7",
"sign": "签名-7",
"experience": -727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
},
{
"id": 10008,
"username": "user-8",
"sex": "",
"city": "城市-8",
"sign": "签名-8",
"experience": -951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
},
{
"id": 10009,
"username": "user-9",
"sex": "",
"city": "城市-9",
"sign": "签名-9",
"experience": 0,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
},
{
"id": 10010,
"username": "user-10",
"sex": "",
"city": "城市-10",
"sign": "签名-10",
"experience": 1016,
"logins": 182,
"wealth": 71294671,
"classify": "诗人",
"score": 34
},
{
"id": 10011,
"username": "user-11",
"sex": "",
"city": "城市-11",
"sign": "签名-11",
"experience": 492,
"logins": 107,
"wealth": 8062783,
"classify": "诗人",
"score": 6
},
{
"id": 10012,
"username": "user-12",
"sex": "",
"city": "城市-12",
"sign": "签名-12",
"experience": 106,
"logins": 176,
"wealth": 42622704,
"classify": "词人",
"score": 54
},
{
"id": 10013,
"username": "user-13",
"sex": "",
"city": "城市-13",
"sign": "签名-13",
"experience": 1047,
"logins": 94,
"wealth": 59508583,
"classify": "诗人",
"score": 63
},
{
"id": 10014,
"username": "user-14",
"sex": "",
"city": "城市-14",
"sign": "签名-14",
"experience": 873,
"logins": 116,
"wealth": 72549912,
"classify": "词人",
"score": 8
},
{
"id": 10015,
"username": "user-15",
"sex": "",
"city": "城市-15",
"sign": "签名-15",
"experience": 1068,
"logins": 27,
"wealth": 52737025,
"classify": "作家",
"score": 28
},
{
"id": 10016,
"username": "user-16",
"sex": "",
"city": "城市-16",
"sign": "签名-16",
"experience": 862,
"logins": 168,
"wealth": 37069775,
"classify": "酱油",
"score": 86
},
{
"id": 10017,
"username": "user-17",
"sex": "",
"city": "城市-17",
"sign": "签名-17",
"experience": 1060,
"logins": 187,
"wealth": 66099525,
"classify": "作家",
"score": 69
}
];
//执行一个 table 实例
table.render({
elem: '#demo'
// , height: 'full-200'
, url: 'json/data11.json' //数据接口
// , data: data
, title: '用户表'
, page: {} //开启分页
, loading: true
, toolbar: '#toolbarDemo' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, totalRow: true //开启合计行
, cellMinWidth: 90
// 是否开启字段筛选的记忆功能,支持true/false/'local'/'session'/其他 开启的情况下默认是session,除非显式的指定为'local'
, colFilterRecord: true
, done: function () {
var tableView = this.elem.next();
var totalRow = tableView.find('.layui-table-total');
var limit = this.page ? this.page.limit : this.limit;
layui.each(totalRow.find('td'), function (index, tdElem) {
tdElem = $(tdElem);
var text = tdElem.text();
if (text && !isNaN(text)) {
text = (parseFloat(text) / limit).toFixed(2);
tdElem.find('div.layui-table-cell').html(text);
}
});
},
parseData: function (ret) {
return {
code: ret.code,
msg: ret.msg,
count: ret.data ? (ret.data.total || 0) : 0,
data: ret.data ? (ret.data.list || []) : []
}
}
// , checkStatus: {}
, cols: [
[
{type: 'checkbox', fixed: 'left', rowspan: 2},
{
field: 'id',
title: 'ID',
width: 80,
sort: true,
fixed: 'left',
totalRowText: '平均:',
rowspan: 2
},
{title: '基本信息', colspan: 2, align: 'center'},
{title: '详细信息', colspan: 6, align: 'center'},
{
fixed: 'right',
type: 'toolbar',
field: 'toolbar_common',
title: '操作',
width: 190,
align: 'center',
toolbar: '#barDemo',
rowspan: 2
}
]
, [ //表头
{field: 'username', title: '姓名', hideable: false}
, {field: 'sex', title: '性别', width: 90, sort: true}
, {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
, {field: 'score', title: '评分', edit: true, width: 90, sort: true, totalRow: true}
, {field: 'city', title: '城市', width: 150, templet: fn1('city')}
, {field: 'sign', title: '签名', width: 200}
, {field: 'classify', title: '职业', width: 100}
, {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
]
]
});
table.render({
// elem: '#demo2'
elem: '[lay-id="demo2"]'
// , height: 'full-200'
// , url: 'json/data11.json' //数据接口
, data: data
, title: '用户表'
, page: {} //开启分页
// , page: false
// , limit: 100
, loading: true
, toolbar: '#toolbarDemo' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, totalRow: true //开启合计行
, cellMinWidth: 90
// , autoSort: false // 不进行前端排序
, done: function () {
var tableView = this.elem.next();
var totalRow = tableView.find('.layui-table-total');
var limit = this.page ? this.page.limit : this.limit;
layui.each(totalRow.find('td'), function (index, tdElem) {
tdElem = $(tdElem);
var text = tdElem.text();
if (text && !isNaN(text)) {
text = (parseFloat(text) / limit).toFixed(2);
tdElem.find('div.layui-table-cell').html(text);
}
});
}
// 定制当前数据的主键字段,默认为id,
, primaryKey: 'id'
// 是否开启复选列状态记录 支持true/false/{} true的情况下primaryKey默认为id,default默认为[]
// primaryKey: 'username', // 可以定义成其他的字段,但是有一个要求,就是这个字段的值必须有唯一性约束,这个是一个判断记录是否相同重要的条件
, checkStatus: {
// 原始已经选中的记录的主键值集合
default: [10001, 10002, 10007, 10009, 10013, 10015]
}
, checkDisabled: {
enabled: true,
data: [10000, 10001, 10002, 10003, 10004, 10005, 10009]
}
, smartReloadModel: true
, cols: [
[
{type: 'checkbox', fixed: 'left', rowspan: 2},
{
field: 'id',
title: 'ID',
width: 80,
sort: true,
fixed: 'left',
totalRowText: '平均:',
rowspan: 2
},
{title: '基本信息', colspan: 2, align: 'center'},
{title: '详细信息', colspan: 6, align: 'center'},
{
fixed: 'right',
type: 'toolbar',
field: 'toolbar_common',
title: '操作',
width: 190,
align: 'center',
toolbar: '#barDemo',
rowspan: 2
}
]
, [ //表头
{field: 'username', title: '姓名', hideable: false}
, {field: 'sex', title: '性别', width: 90, sort: true}
, {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
, {field: 'score', title: '评分', edit: true, width: 90, sort: true, totalRow: true}
, {field: 'city', title: '城市', width: 150, templet: fn1('city')}
, {field: 'sign', title: '签名', width: 200}
, {field: 'classify', title: '职业', filter: true, width: 100}
, {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
]
]
});
$(document).on('click', '.layui-table-view .layui-table-body tr', function (event) {
var trElem = $(this);
var tableView = trElem.closest('.layui-table-view');
tableView.find('.layui-table-body tr.table_tr_click').removeClass('table_tr_click');
tableView.find('.layui-table-body tr[data-index="' + trElem.data('index') + '"]').addClass('table_tr_click');
})
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/sun_zoro/layuiTablePlug.git
git@gitee.com:sun_zoro/layuiTablePlug.git
sun_zoro
layuiTablePlug
layuiTablePlug
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385