<!
-- 前端页面完整代码
-->
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link href="~/Scripts/
layui/css/
layui.css" rel="stylesheet" />
<script src="~/Scripts/
layui/
layui.js"></script>
<script src="~/Scripts/jquery
-3
.4
.1
.js"></script>
<style>
body {
padding: 10px 20px 20px 20px;
width: 90%
}
.but {
margin
-top:
-5px
}
</style>
</head>
<body>
<fieldset class="
layui-elem
-field">
<legend>
<span class="
layui-breadcrumb">
<a href="">首页</a>
<a href="">职位管理</a>
</span>
</legend>
<div class="
layui-field
-box">
<div class="
layui-form
-item">
<div class="
layui-inline">
<label class="
layui-form
-label">职位名称</label>
<div class="
layui-input
-block">
<input type="text" name="name" id="name" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-inline">
<label class="
layui-form
-label">职位代码</label>
<div class="
layui-input
-inline">
<input type="text" name="code" id="code" autocomplete="off" class="
layui-input">
</div>
</div>
<button type="button" class="
layui-btn
layui-btn
-radius but" id="searchButton" onclick="Search()"><i class="
layui-icon
layui-icon
-search"></i>查询</button>
<button type="button" class="
layui-btn
layui-bg
-blue but" onclick="AddJob()"><i class="
layui-icon
layui-icon
-addition"></i>添加</button>
</div>
</div>
</fieldset>
<fieldset class="
layui-elem
-field">
<table class="
layui-hide" id="test" lay
-filter="test"></table>
<script type="text/html" id="toolDemo">
<div class="
layui-clear
-space">
<a class="
layui-btn
layui-btn
-xs" lay
-event="edit" id="Edit"><i class="
layui-icon
layui-icon
-edit"></i>编辑</a>
<a class="
layui-btn
layui-btn
-xs
layui-bg
-orange" lay
-event="del" id="del"><i class="
layui-icon
layui-icon
-clear"></i>删除</a>
</div>
</script>
</fieldset>
<script>
var tableIns;
layui.use(['table', 'layer', 'form'], function () {
var table =
layui.table;
var layer =
layui.layer;
// 创建渲染实例
tableIns = table
.render({
elem: '#test',
url: '/JobManagem/GetList',
page: true,
cols: [[
{ type: 'numbers', width: '15%', title: '序列号' },
{ field: 'JobName', width: '20%', title: '职位名称' },
{ field: 'JobCode', width: '20%', title: '职位代码' },
{
field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) {
return formatDate(d
.ModifyDate);
}
},
{ title: '操作', width: '25%', templet: '#toolDemo' }
]],
});
// 编辑删除事件
table
.on('tool(test)', function (obj) {
var data = obj
.data;
if (obj
.event === 'edit') {
EditJob(data);
} else if (obj
.event === 'del') {
DeleteJob(data, obj);
}
});
});
function formatDate(dateStr) {
if (!dateStr) return '';
// 提取时间戳（兼容 "/Date(123456789)/"
格式）
var timestamp = parseInt(dateStr
.replace(/\/Date$(\d+)$\//, '$ 1'));
var date = new Date(timestamp);
return date
.getFullYear() + '
-' +
('0' + (date
.getMonth() + 1))
.slice(
-2) + '
-' + // 月份从0开始，需+1
('0' + date
.getDate())
.slice(
-2);
}
// 添加职位弹窗
function AddJob() {
layer
.open({
type: 1,
title: '添加职位',
content: `
<div style="padding:20px">
<div class="
layui-form
-item">
<label class="
layui-form
-label">职位名称</label>
<div class="
layui-input
-block">
<input type="text" id="add_name" class="
layui-input">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">职位代码</label>
<div class="
layui-input
-block">
<input type="text" id="add_code" class="
layui-input">
</div>
</div>
</div>
`,
btn: ['保存', '取消'],
yes: function (index) {
$
.post('/JobManagem/AddJob', {
JobName: $('#add_name')
.val(),
JobCode: $('#add_code')
.val()
}, function (res) {
if (res
.code == 0) {
layer
.close(index);
Search(); // 刷新列表
} else {
layer
.msg('操作失败：' + res
.msg);
}
});
}
});
}
// 编辑职位弹窗
function EditJob(data) {
layer
.open({
type: 1,
title: '编辑职位',
content: `
<div style="padding:20px">
<div class="
layui-form
-item">
<label class="
layui-form
-label">职位名称</label>
<div class="
layui-input
-block">
<input type="text" id="edit_name" value="${data
.JobName}" class="
layui-input">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">职位代码</label>
<div class="
layui-input
-block">
<input type="text" id="edit_code" value="${data
.JobCode}" class="
layui-input">
</div>
</div>
</div>
`,
btn: ['更新', '取消'],
yes: function (index) {
$
.post('/JobManagem/UpdateJob', {
ID: data
.ID,
JobName: $('#edit_name')
.val(),
JobCode: $('#edit_code')
.val()
}, function (res) {
if (res
.code == 0) {
layer
.close(index);
Search();
} else {
layer
.msg('更新失败：' + res
.msg);
}
});
}
});
}
// 删除职位
function DeleteJob(data, obj) {
layer
.confirm('真的删除行 [' + data
.JobName + '] 么', function (index) {
$
.post('/JobManagem/DeleteJob', { ID: data
.ID }, function (res) {
if (res
.code == 0) {
obj
.del();
layer
.close(index);
} else {
layer
.msg('删除失败：' + res
.msg);
}
});
});
}
// 查询
重载
function Search() {
var nameVal = $('input[name="name"]')
.val()
.trim();
var codeVal = $('input[name="code"]')
.val()
.trim();
tableIns
.reload({
where: {
name: nameVal,
code: codeVal
},
page: { curr: 1 } // 重置分页
});
}
</script>
</body>
</html>
用更简单的代码进行优化
本文介绍如何使用layui框架中的表格组件，通过自定义函数实现动态加载数据，该方法适用于后端查询数据并展示在前端表格场景。文章详细解释了如何利用table.reload方法结合参数传递，实现对表格数据的实时更新。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
