解决layui前端动态设置radio、checkbox默认选项的解决方案

前几天接触一个二次开发,后台UI用的是layui框架,程序原来的TAG标签设置中自由输入的,想修改为单选。这样子的功能用于,一个产品属于两种分类的作法。第一种就是系统自带的产品分类,第二种使用标签来实现。然尔一个产品并不需要同时属于两个以上的标签,所以二次开发修改为单选radio,而不是多选checkbox。

不过本文作出的动态设置选中状态单选与多选的作法是一致的。

在前端模板文件中,普通用到的是使用<if condition=””></if>来作判断。但是奇怪的就是layui并不能识别。

第一次尝试:

<input class='layui-input' type='radio' name='tag' title='正常' value='正常' <if condition="">checked</if>>

发现在input包括中无法解析到if判断语句;当然在普通情况下是可以的,中不过程序使用了layui,因为layui通过js识别所有表单元素,重新编译了。所以在js的重新编译中无法识别原本不属于表无素材的标签。

第二次尝试:

<if condition="">

<input class='layui-input' type='radio' name='tag' title='正常' value='正常' checked>

<else/>

<input class='layui-input' type='radio' name='tag' title='正常' value='正常'>

</if>

以上代码确定可以选中状态,但随之又有其它问题随之而来,选中的与未选中的两个均会显示出来,为什么呢?

原因还是在于layui遍历form里的表单元素,并不会因if语句的存在而作出最终结果。而是识别到有两个input。

第三次尝试,不用radio,不就是单选吗?下拉单项也是可以的,使用<select>又测试了一番。同样会出现以上两个问题。

无办法下只能求助于神奇的百度给出了这样的结果;

$("input[name=tag][value=正常]").prop("checked","true");

form.render();

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

render()就是重新渲染对象;

看到这里很多朋友以为问题已经得到解决了,其实问题才刚刚开始。不是提示form对象找不到,就是提示form中找不到render()方法。为什么呢,整套程序不是doem,它还整合了很多其它的框架和插件,调作起来并不像官方给出的这么直接。

form.render();

$form.render();

form().render();

.layui.form().render();

……

通通试了一篇,还是不行,这东西就有这么折腾。累了中途休息一下。

一觉睡醒,阔然开朗。先来看看完成后的代码。

thistag="{$info.tag}";//读后台数据值

var mytag=new Array("无","第一项","第二项","第三项","第四项","第五项");//所有单选项目

cntag="";

for(j = 0,len=mytag.length; j < len; j++) { //遍历数组

if(thistag==mytag[j]){ //判断是否选中

cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' checked>";

}else{

cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' >";

}

}

$("#cntag").html(cntag); //打印到网页中显示最终效果

优点:只读一次后面数据;

简化:就算单选项很多,只需写在一个数组中即可。

简单:只需写一次判断语句;

原理既然是前端使用,多用js,少用<if><php>这些php后端定义的标签。

@{ 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: 97% } .but { margin-top: -5px } .editInfo { display: none; } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">基本信息管理</a> <a href="/UserManagem/Index" >员工管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工账号</label> <div class="layui-input-block"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工姓名</label> <div class="layui-input-inline"> <input type="text" name="name" id="name" 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="Add()"><i class="layui-icon layui-icon-addition"></i>添加</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-delete"></i>批量删除</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-export"></i>导出</button> <button type="button" class="layui-btn but" id="searchButton"><i class="layui-icon layui-icon-upload"></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"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> <!-- 在视图中添加以下隐藏表单 --> <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" 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"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="Status" lay-skin="switch" lay-text="离职|在职"> </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) { return d.Sex ? "男" : "女"; // 修正:使用大写的Sex } }, { 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) { return d.Status ? "离职" : "在职"; } }, { 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 }) } } }) }); } }); }); // 处理日期格式函数 function convertJsonDate(jsonDate) { if (!jsonDate) return ''; try { // 提取间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } catch (e) { console.error('日期格式化错误:', e); return jsonDate; } } //表单提交事件,新增和编辑 form.on('submit(demo1)', function (data) { var field = data.field; // 获取表单字段 $.ajax({ url: '/UserManagem/Add', type: 'post', data: field, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 3000 }, function () { layer.closeAll(); // 关闭所有类型的层 Search(); }); } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) }) //重载,模糊查询 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); // 完整重载 - 所有属性属性(options)均可参与到重载中 tableIns.reload({ where: { // 传递数据异步请求携带的字段 name: nameVal, code: codeVal }, height: 500 // 重设高度 }); } // 处理日期格式函数 function convertJsonDate(jsonDate) { // 提取间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getUTCFullYear(); const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); const day = date.getUTCDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } //新增职位 function Add() { // 在此处输入 layer 的任意代码 layer.open({ type: 1, // page 层类型 area: ['500px', '300px'], title: '新建职位', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); } function calculateAge(jsonBirthDate) { if (!jsonBirthDate) return ''; try { // 先转换为日期格式 const birthDate = convertJsonDateToDate(jsonBirthDate); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); const monthDiff = today.getMonth() - birthDate.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } catch (e) { console.error('年龄计算错误:', e); return ''; } } // 辅助函数:将JSON日期转换为Date对象 function convertJsonDateToDate(jsonDate) { const timestamp = parseInt(jsonDate.match(/\d+/)[0]); return new Date(timestamp); } </script> </body> </html> sex和Statu数据类型都为bit 无法实现男女和状态动态选择
最新发布
07-15
@{ 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: 97% } .but { margin-top: -5px } .editInfo { display: none; } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">基本信息管理</a> <a href="/UserManagem/Index" >员工管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工账号</label> <div class="layui-input-block"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工姓名</label> <div class="layui-input-inline"> <input type="text" name="name" id="name" 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="Add()"><i class="layui-icon layui-icon-addition"></i>添加</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-delete"></i>批量删除</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-export"></i>导出</button> <button type="button" class="layui-btn but" id="searchButton"><i class="layui-icon layui-icon-upload"></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"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> <!-- 在视图中添加以下隐藏表单 --> <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" 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"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="Status" lay-skin="switch" lay-text="离职|在职"> </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) { return d.Sex ? "男" : "女"; // 修正:使用大写的Sex } }, { 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) { return d.Status ? "离职" : "在职"; } }, { 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 }) } } }) }); } }); }); // 处理日期格式函数 function convertJsonDate(jsonDate) { if (!jsonDate) return ''; try { // 提取间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } catch (e) { console.error('日期格式化错误:', e); return jsonDate; } } //表单提交事件,新增和编辑 form.on('submit(demo1)', function (data) { var field = data.field; // 获取表单字段 $.ajax({ url: '/UserManagem/Add', type: 'post', data: field, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 3000 }, function () { layer.closeAll(); // 关闭所有类型的层 Search(); }); } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) }) //重载,模糊查询 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); // 完整重载 - 所有属性属性(options)均可参与到重载中 tableIns.reload({ where: { // 传递数据异步请求携带的字段 name: nameVal, code: codeVal }, height: 500 // 重设高度 }); } // 处理日期格式函数 function convertJsonDate(jsonDate) { // 提取间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getUTCFullYear(); const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); const day = date.getUTCDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } //新增职位 function Add() { // 在此处输入 layer 的任意代码 layer.open({ type: 1, // page 层类型 area: ['500px', '300px'], title: '新建职位', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); } function calculateAge(jsonBirthDate) { if (!jsonBirthDate) return ''; try { // 先转换为日期格式 const birthDate = convertJsonDateToDate(jsonBirthDate); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); const monthDiff = today.getMonth() - birthDate.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } catch (e) { console.error('年龄计算错误:', e); return ''; } } // 辅助函数:将JSON日期转换为Date对象 function convertJsonDateToDate(jsonDate) { const timestamp = parseInt(jsonDate.match(/\d+/)[0]); return new Date(timestamp); } </script> </body> </html> 实现男女动态选择 以及状态选择
07-15
<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="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> 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 }); } });实现出生日期选择
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值