<!
-- 前端页面完整代码
-->
@{
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>
这是一个vs.net mvc +
layui+sqlsever数据库开发的游戏管理系统的用户管理模块，我希望你根据这段代码以及我下面提供的sql建表资料以及用户管理模块的控制器代码，研究代码风格和习惯帮我续写组织管理模块，表单要求有树形表格，给我提供完整代码表名：组织机构表（OrganizationStructure）
字段描述 字段名 数据类型 长度 是否主键 是否外键 是否必填
组织机构表主键 ID uniqueidentifier 16 1 FALSE TRUE
组织机构名称 OrgName varchar 200 0 FALSE TRUE
组织机构代码 OrgCode varchar 200 0 FALSE FALSE
级别 Leve int 4 0 FALSE FALSE
父节点 ParentId uniqueidentifier 16 0 FALSE FALSE
创建时间 CreateDate datetime 8 0 FALSE FALSE
修改时间 ModifyDate datetime 8 0 FALSE FALSE
博客围绕layuiCRUD展开，介绍了页面html搭建，js表格数据渲染以及数据表格操作等内容，涉及信息技术中前端页面搭建和数据展示相关知识。
扫一扫
2928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
