版权声明：本文为博主原创文章，未经博主允许不可转载。转载请注明出处 https://blog.csdn.net/qq_32442967/article/details/89707874
layui table表格的使用方法及基本操作
包含：
- 开启复选框（获取选中数据），checkbox
- 表格的重载，reload
- 表格数据的操作
需要引入layui.css / jquery.js / layui.js
table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui table</title>
<link rel="stylesheet" href="plugins/layui/css/layui.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<style>
html, body {
background-color: #F1F1F1;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card layui-form">
<div class="layui-card-header">查询条件</div>
<div class="layui-card-body layui-row layui-col-space15">
<div class="layui-col-md2">
<input type="text" class="layui-input" id="deviceNumber" placeholder="设备名称" />
</div>
<div class="layui-col-md2">
<select name="" lay-verify="required" lay-search id="">
<option value="">设备型号</option>
<option value="">名称列表</option>
</select>
</div>
<div class="layui-col-md12">
<button class="layui-btn" data-type="reload">查询</button>
<div class="layui-btn-group demoTable">
<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>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card layui-form">
<div class="layui-card-header">查询结果</div>
<div class="layui-card-body">
<table class="layui-hide" id="layListId" lay-filter="layList"></table>
<script type="text/html" id="barDemo">
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="maintainRecord">保养记录</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="repairRecord">维修记录</button>
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#layListId',
id: 'layTableId',
url: 'json/table.json',
title: '维修保养报',
cellMinWidth: 100,
cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
type: 'numbers',
fixed: 'left'
}, {
field: 'deviceNumber',
title: '设备编号',
minWidth: '120'
}, {
field: 'deviceName',
title: '设备名称',
minWidth: '120'
}, {
field: 'deviceType',
title: '设备型号'
}, {
title: '操作',
minWidth: '180',
align: 'center',
toolbar: '#barDemo'
}]
],
page: true
});
//监听工具条
table.on('tool(layList)', function(obj) {
var data = obj.data; //获得当前行数据
switch(obj.event) {
case 'maintainRecord':
maintainRecord();
break;
case 'repairRecord':
repairRecord();
break;
default:
break;
}
});
var $ = layui.$,
active = {
reload: function() {
var deviceNumber = $("#deviceNumber").val();
//执行重载
table.reload('layTableId', {
page: {
curr: 1
},
where: {
deviceNumber: deviceNumber
}
});
},
getCheckData: function() { //获取选中数据
var checkStatus = table.checkStatus('layTableId'),
data = checkStatus.data;
layer.alert(JSON.stringify(data));
},
getCheckLength: function() { //获取选中数目
var checkStatus = table.checkStatus('layTableId'),
data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
},
isAll: function() { //验证是否全选
var checkStatus = table.checkStatus('layTableId');
layer.msg(checkStatus.isAll ? '全选' : '未全选')
}
};
$('.layui-btn').on('click', function() {
var type = $(this).data('type');
active[type] && active[type].call(this);
});
function maintainRecord() {
layer.msg("保养记录");
};
function repairRecord() {
layer.msg("维修记录");
};
});
</script>
table.json
{
"code": 0,
"msg": null,
"count": 3,
"data": [
{
"deviceNumber": "F10006",
"deviceName": "东软CT",
"deviceType": "Neuviz-twin"
}, {
"deviceNumber": "F10003",
"deviceName": "东软MR",
"deviceType": "NSM-P035"
}, {
"deviceNumber": "F10004",
"deviceName": "新区CT",
"deviceType": "Neuviz128"
}
]
}