layui表格根据默认筛选条件渲染数据
项目背景：
在表格列表页面，有时候需要默认选中某些搜索条件，然后根据选中的默认搜索条件展示表格列表数据。
示例代码：
<!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>layui表格根据默认筛选条件渲染数据</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">商品状态</label>
<div class="layui-input-inline">
<select name="product_status">
<option value="">选择商品状态</option>
<option value="0" selected>上架中</option>
<option value="1">已下架</option>
<option value="2">已删除</option>
</select>
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container"></div>
</script>
<script type="text/html" id="barDemo"></script>
<table id="demo" lay-filter="demo"></table>
<script src="../src/layui.js" charset="utf-8"></script>
<script>
// 根据状态值获取对应状态的商品列表数据
function getProductListDataByStatus(allProductListData, status) {
if (status === "") {
return allProductListData;
}
status = parseInt(status);
var productListData = new Array();
for (var i = 0; i < allProductListData.length; i++) {
if (allProductListData[i].status == status) {
productListData.push(allProductListData[i]);
}
}
return productListData;
}
// 服务端返回的原始数据(所有状态的数据)
var returnedProductListData = {
"status": 0,
"message": "ok",
"total": 5,
"data": {
"list": [
{
"id": 1,
"product_name": "短袖",
"price": 20.18,
"status": 1,
"create_time": "2022-07-01 12:30:12",
"update_time": "2022-07-01 12:30:12"
},
{
"id": 2,
"product_name": "运动鞋",
"price": 45.64,
"status": 0,
"create_time": "2022-07-01 12:30:12",
"update_time": "2022-07-01 12:30:12"
},
{
"id": 3,
"product_name": "手机",
"price": 2453.00,
"status": 1,
"create_time": "2022-07-01 12:30:12",
"update_time": "2022-07-01 12:30:12"
},
{
"id": 4,
"product_name": "自行车",
"price": 368.65,
"status": 0,
"create_time": "2022-07-01 12:30:12",
"update_time": "2022-07-01 12:30:12"
},
{
"id": 5,
"product_name": "鼠标",
"price": 9.96,
"status": 2,
"create_time": "2022-07-01 12:30:12",
"update_time": "2022-07-01 12:30:12"
}
]
}
};
// 由于是演示程序, 没有请求服务端, 默认直接取出静态数据中的所有商品数据
var productListData = returnedProductListData.data.list;
// 由于是演示程序, 没有请求服务端, 并且搜索信息中的商品状态默认选中的是"上架中", 这里直接获取上架中的所有商品
var onShelfProductListData = getProductListDataByStatus(productListData, 0);
layui.use(['form', 'table'], function () {
var form = layui.form, table = layui.table, $ = layui.$;
form.render();
// 获取搜索条件表单中设置的所有数据
var searchObj = {};
var serializedArray = $(".layui-form").serializeArray();
$.each(serializedArray, function() {
searchObj[this.name] = this.value;
});
var searchData = JSON.stringify(searchObj);
// 表格渲染
table.render({
elem: '#demo',
// url: 'http://localhost/getStatList', // 这里是服务端接口的地址
data: onShelfProductListData, // 直接赋值静态数据。真实数据需要通过请求服务端接口获取, 由于是静态演示程序, 不涉及服务端, 这里直接使用data字段设置静态数据
page: true,
autoSort: true,
loading : true,
where: {
// layui渲染表格时带上查询条件，在这里传入需要查询的条件
searchParams: searchData
},
limits: [10, 20, 50],
limit: 10,
toolbar: '#toolbarDemo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'product_name', title: '商品名称'},
{field: 'price', title: '商品价格'},
{field: 'status', title: '商品状态', templet: function (data){
switch (data.status) {
case 0:
return "上架中";
case 1:
return "已下架";
case 2:
return "已删除";
default:
return data.status;
}
}},
{field: 'create_time', title: '创建时间'},
{field: 'update_time', title: '最近一次更新时间'}
]],
parseData: function (res) {
},
done: function (res, curr, count) {
},
error: function (res, msg) {
console.log(res, msg)
}
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
// 由于是演示程序, 没有请求服务端, 这里直接获取搜索条件中的商品状态的值并获取满足搜索条件的所有商品
var product_status = data.field.product_status;
var productData = getProductListDataByStatus(productListData, product_status);
// 执行搜索重载
table.reload('demo', {
page: {
curr: 1
},
where: {
searchParams: result
},
data: productData // 由于是静态演示程序, 不涉及服务端, 这里直接更新表格data字段的值
});
return false;
});
});
</script>
</body>
</html>示例效果：
