<!-- 在视图中添加以下隐藏表单 -->
<div class="editInfo" style="padding:15px;">
<form class="
layui-form" id="editForm">
<input type="hidden" name="ID" id="ID">
<div class="
layui-form-item">
<label class="
layui-form-label">员工账号</label>
<div class="
layui-input-block">
<input type="text" name="UserCode" required lay-verify="required" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">员工姓名</label>
<div class="
layui-input-block">
<input type="text" name="UserName" required lay-verify="required" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">性别</label>
<div class="
layui-input-block">
<input type="radio" name="Sex" id="man" value="true" title="男" checked >
<input type="radio" name="Sex" value="false" title="女">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">出生日期</label>
<div class="
layui-input-block">
<input type="text" name="BirthDay" id="BirthDay" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">邮箱</label>
<div class="
layui-input-block">
<input type="text" name="Email" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">电话</label>
<div class="
layui-input-block">
<input type="text" name="Tel" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">地址</label>
<div class="
layui-input-block">
<input type="text" name="Address" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="saveBtn">保存</button>
<button type="reset" class="
layui-btn
layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</script>
</fieldset>
<script>
var tableIns;
var form;
var isEdit;
layui.use(['table', 'form',], function () {
var table =
layui.table;
form =
layui.form; // 修正：移除重复的var声明
// 创建渲染实例
tableIns = table.render({
elem: '#test',
url: '/UserManagem/GetList',
page: true,
cols: [[
{ type: 'checkbox', width: '5%', title: '' },
{ type: 'numbers', width: '5%', title: '序号' },
{ field: 'UserCode', width: '8%', title: '员工账号' },
{ field: 'UserName', width: '8%', title: '员工姓名' },
{
field: 'Sex', width: '8%', title: '性别', templet: function (d) {
if (d.Sex == true) {
return "男"
} else {
return "女";
}
}
},
{
field: 'BirthDay', width: '8%', title: '出生日期', templet: function (d) {
return convertJsonDate(d.BirthDay);
}
},
{
field: 'BirthDay', width: '8%', title: '年龄', templet: function (d) {
return calculateAge(d.BirthDay);
}
},
{
field: 'Status', width: '8%', title: '是否离职', templet: function (d) {
if (d.Status == true) {
return "离职";
} else {
return "在职";
}
}
},
{ field: 'Email', width: '8%', title: '邮箱' },
{ field: 'Tel', width: '8%', title: '电话' },
{
field: 'CreateDate', width: '8%', title: '创建时间', templet: function (d) {
return convertJsonDate(d.CreateDate);
}
},
{ field: 'Address', width: '8%', title: '员工住址' },
{ title: '操作', width: '10.5%', templet: '#toolDemo' }
]],
done: function (res, curr, count) {
// 数据渲染完成后的回调
if (res.code !== 0) { // 假设0是成功状态码
layer.msg('数据加载失败: ' + res.msg, { icon: 5 });
}
},
error: function () {
// 请求错误的回调
layer.msg('网络请求错误，请检查接口', { icon: 5 });
}
});
//
编辑，删除
table.on('tool(test)', function (obj) { // 双击 toolDouble
var data = obj.data; // 获得当前行数据
var field = obj.field; // 得到字段
var value = obj.value; // 得到修改后的值
var data = obj.data; // 得到所在行所有键值
// console.log(obj)
if (obj.event === 'edit') {
//
编辑
//修改
编辑职位
layer.open({
type: 1, // page 层类型
area: ['500px', '300px'],
title: '
编辑职位',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域，关闭弹层
maxmin: false, // 允许全屏最小化
anim: 0, // 0-6 的动画形式，-1 不开启
content: $(".editInfo").html()
});
//赋值
form.val('demo-val-filter', {
"jobname": data.JobName,
"jobcode": data.JobCode,
"ID": data.ID,
});
} else {
layer.confirm('真的删除员工 [' + data.UserCode + '] 么', function (index) {
obj.del(); // 删除对应行（tr）的DOM结构
layer.close(index);
// 向服务端发送删除指令
$.ajax({
url: '/UserManagem/DelInfo',
type: 'post',
data: { id: data.ID },
success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 6, time: 1500 }, function () {
Search();
})
} else {
layer.msg(res.msg, { icon: 5, time: 1500 })
}
}
})
});
}
});
});完成男女动态选择以及渲染
本文介绍了一种使用JavaScript动态加载账户角色的方法，通过匹配预设的角色类型，实现对用户界面的快速更新。具体实现中，利用jQuery遍历输入框并根据角色代码设置复选框状态，确保界面显示与后台数据一致。
扫一扫
3713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
