layUI 详情和列表页参考示例
【注意】本文中的代码可运行，但不一定是可直接运行的，仅供参考使用.
【码云】：https://gitee.com/uanlaibao/Book.NET/tree/master/ExampleFrameWork
【详情页】
预览图：
【Html部分】
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="/Scripts/jquery-3.5.1.min.js"></script> <script src="/Scripts/layui/layui.js"></script>
<form class="layui-form layui-form-pane" action="" lay-filter="UserDetailForm"> <div class="layui-tab layui-tab-card" lay-filter="UserTab"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="1">基本信息</li> <li lay-id="2">详细信息</li> <li lay-id="3">简介</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> </div> <div class="layui-tab-item"> </div> <div class="layui-tab-item"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="SaveUser">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form>
<div class="layui-form-item"> <label class="layui-form-label"><span class="layui-badge-dot"></span> 头像</label> <div class="layui-input-inline"> <input type="text" name="Portrait" lay-verify="required" lay-reqtext="需要上传头像" autocomplete="off" placeholder="" class="layui-input" /> </div> <div class="layui-input-inline"> <button type="button" class="layui-btn" id="btnUpload" onclick="document.getElementById('fileUpload').click()"> <i class="layui-icon"></i>上传图片 </button> <input class="layui-upload-file" type="file" id="fileUpload" accept="" name="fileUpload"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <img src="#" width="100" height="100" id="imgUpload" alt="我的头像" title="我的头像" style="border: 1px solid #CCC;" /> </div> </div>
<div class="layui-form-item"> <label class="layui-form-label"><span class="layui-badge-dot"></span> 用户账号</label> <div class="layui-input-inline"> <input type="text" name="UserID" lay-verify="required|englishStr" autocomplete="off" placeholder="请输入用户账号" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"><span class="layui-badge-dot"></span> 姓名</label> <div class="layui-input-inline"> <input type="text" name="UserName" lay-verify="required|chineseStr" autocomplete="off" placeholder="请输入姓名" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">请填写正确的名称</div> </div>
<div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <input type="radio" name="Sex" value="1" title="男"> <input type="radio" name="Sex" value="0" title="女" checked> </div> </div>
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label"><span class="layui-badge-dot"></span> 登录密码</label> <div class="layui-input-block"> <input type="password" name="Pwd" required lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> </div>
<div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <!--复选框如果未设置value值则选择时返回on值--> <input type="checkbox" name="Status" id="Status" lay-filter="Status" lay-skin="switch" lay-text="有效|无效" /> </div> </div>
<div class="layui-form-item"> <label class="layui-form-label">所在地区</label> <div class="layui-input-inline"> <select name="ProvinceSysNo" lay-filter="ProvinceSysNo"> <option value="0">请选择省</option> </select> </div> <div class="layui-input-inline"> <select name="CitySysNo" lay-filter="CitySysNo"> <option value="0">请选择市</option> </select> </div> <div class="layui-input-inline"> <select name="AreaSysNo"> <option value="0">请选择县/区</option> </select> </div> </div>
<div class="layui-form-item" pane=""> <label class="layui-form-label">兴趣爱好</label> <div class="layui-input-block"> <input type="checkbox" name="HobbyWrite" lay-skin="primary" title="写作"/> <input type="checkbox" name="HobbyRead" lay-skin="primary" title="阅读"/> <input type="checkbox" name="HobbyGame" lay-skin="primary" title="游戏"/> <input type="checkbox" name="HobbyMusic" lay-skin="primary" title="唱歌"/> <input type="checkbox" name="HobbyListenMusic" lay-skin="primary" title="听歌"/> <input type="checkbox" name="HobbyMovie" lay-skin="primary" title="电影"/> <input type="checkbox" name="HobbyShopping" lay-skin="primary" title="购物"/> <input type="checkbox" name="HobbyMotion" lay-skin="primary" title="运动"/> <input type="checkbox" name="HobbyFood" lay-skin="primary" title="美食"/> </div> </div>
<div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-inline"> <input type="text" name="Birthday" id="Birthday" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input" onclick="layui.laydate({ elem: this });" /> </div> </div>
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">体重范围</label> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="WeightMin" placeholder="?15" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="WeightMax" placeholder="?200" autocomplete="off" class="layui-input"> </div> </div> </div>
<div class="layui-form-item"> <label class="layui-form-label">技能特长</label> <div class="layui-input-inline"> <select name="Skills" lay-search=""> <option value="">直接选择或搜索选择</option> </select> </div> </div>
<div class="layui-form-item"> <label class="layui-form-label">部门</label> <div class="layui-input-block"> <input type="text" id="DeptSysNo" name="DeptSysNo" lay-filter="DeptSysNo" class="layui-input"> </div> </div>
<div class="layui-form-item layui-form-text"> <label class="layui-form-label">个人简介</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" name="Profile" class="layui-textarea"></textarea> </div> </div>
<div class="layui-form-item layui-form-text"> <label class="layui-form-label">描述</label> <div class="layui-input-block"> <textarea class="layui-textarea" name="Note" id="Note"> 把编辑器的初始内容放在这textarea即可 </textarea> </div> </div>
【Script部分】
<script src="../jquery-3.5.1.js"></script> <script src="../layui/layui.js"></script> <script src="../layui/treeselect/treeselect.js" ></script> <script src="/Scripts/layui/common.js"></script> <!-- common.js内容： layui.config({ base: './module/' }).extend({ treeSelect: 'treeSelect/treeSelect' }); -->
// [config] layui页面处理对象 var layPage = new Object(); // [config] 模块定义 layPage.module = ['form', 'layedit', 'laydate', 'tree', 'treeSelect', 'upload', 'element', 'select']; // [config] 上传 layPage.upload = uploadData; // [config] 富文本上传 layPage.editUpload = editUploadData; // [config] 格式验证 layPage.verify = verify; // [config] 树下拉控件对象绑定 layPage.dataTreeSelect = dataTreeSelect; // [config] 树下拉框控件json绑定 layPage.jsonTreeSelect = jsonTreeSelect; // [config] 开关按钮监听 layPage.statusSwitch = statusSwitch; // [config] 提交表单 layPage.formSubmit = formSubmit; // [config] 绑定表单 layPage.formBind = formBind; // [config] 获得表单输入值 layPage.formInput = formInput;
var uploadData = { elem: '#fileUpload', // 上传按钮 accept: 'jpeg|jpg|png|gif', // 上传文件扩展名 url: '/Views/Basic/Upload.ashx?name=fileUpload&action=UploadImg&type=User', // 上传处理服务器接口 done: function (res) { // 上传完毕响应处理 if (res.code == 0) { $("#imgUpload").attr("src", res.data.src); $("input[name='Portrait']").val(res.data.src); } } };
var editUploadData = { uploadImage: { url: '/Views/Basic/Upload.ashx?name=fileUpload&action=UploadImg&type=User' // 上传处理服务器接口 , type: 'get' // 请求方式，默认post }, devmode: true, //插入代码设置 codeConfig: { hide: true, //是否显示编码语言选择框 default: 'javascript' //hide为true时的默认语言格式 }, tool: [ 'html', 'code', 'strong', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face' , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'images', 'image_alt', 'image' //插入图片 , '|', 'fullScreen', 'help', 'italic', 'paste' ], height: 500, //设置编辑器高度 };
var verify = { title: function (value) { // 自定义验证 if (value.length < 5) { return '标题至少得5个字符啊'; } }, englishStr: [/^[a-z|A-Z]{5,18}$/, '必须是5到18位的英文字母组成'], // 正则验证和验证失败消息 chineseStr: [/^[a-zA-Z\u4e00-\u9fa5]{2,15}$/, '只能是2到15位的中文或者英文组成'], pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'], content: function (value) { layui.layedit.sync(editIndex); } };
var dataTreeSelect = { elem: '#DeptSysNo', // 树下拉文本框 data: null, // 数据 type: 'get', // 异步加载方式：get/post，默认get placeholder: '修改默认提示信息', // 占位符 search: true, // 是否开启搜索功能：true/false，默认false click: function (d) { // 点击回调 console.log(d); }, success: function (d) { // 加载完成后的回调函数 console.log(d); // 选中节点，根据id筛选 // treeSelect.checkNode('tree', 3); // 获取zTree对象，可以调用zTree方法 // var treeObj = treeSelect.zTree('tree'); // console.log(treeObj); // 刷新树结构 // treeSelect.refresh(); } }; var jsonTreeSelect = { elem: '#tree', // 选择器 data: "/Scripts/layui/data/data3.json", // 数据 type: 'get', // 异步加载方式：get/post，默认get placeholder: '修改默认提示信息', // 占位符 search: true, // 是否开启搜索功能：true/false，默认false click: function (d) { // 点击回调 console.log(d); }, success: function (d) { // 加载完成后的回调函数 console.log(d); // 选中节点，根据id筛选 // treeSelect.checkNode('tree', 3); // 获取zTree对象，可以调用zTree方法 // var treeObj = treeSelect.zTree('tree'); // console.log(treeObj); // 刷新树结构 // treeSelect.refresh(); } };
var statusSwitch= function (data) { //layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), { // offset: '6px' //}); //layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }
var formSubmit = function (data) { // 验证日期 if ($("input[name='Birthday']").val() == "") { layer.alert("出生日期不能为空!"); // 设置当前tab项,也可通过触发tab项的单击事件 layui.element.tabChange('UserTab', 2); return false; } // 获得富文本编辑器内容，并进行htmlEncode加码，显示的时候需要解码 data.field.Note = editEncodeContent.htmlEncode(layui.layedit.getContent(editIndex)); // 获得树控件下拉框选项值 if (layui.treeSelect.zTree("DeptSysNo").getSelectedNodes().length > 0) data.field.DeptSysNo = layui.treeSelect.zTree("DeptSysNo").getSelectedNodes()[0].id; else data.field.DeptSysNo = 0; // 表单提交确认提示 layer.confirm("你确定要提交吗？", { btn: ['确定', '取消'] }, function () { $.ajax({ type: "Post", // 要用post方式 data: data.field, // 提交表单的输入值 url: "/Views/Admin/SysUser_Detail.aspx?action=SaveUser", // 提交给服务器处理的地址 dataType: "json", success: function (res) { var resObj = JSON.parse(res.d); // 返回的数据用data.d获取内容，此处使用返回值的d属性，因为请求的是WebSerivce接口 if (resObj.Code == 0) { layer.alert(resObj.message) } } }); }) return false; };
var formBind = function () { layui.form.val('UserDetailForm', { "username": "贤心" // "name": "value" , "password": "123456" , "interest": 1 , "like[write]": true // 复选框选中状态 , "close": true // 开关状态 , "sex": "女" , "desc": "我爱 layui" }) };
var formInput = function () { var data = layui.form.val('example'); return JSON.stringify(data); };
// 扩展的自定义模块 use中模块select来自此处定义，使用时需要在use中定义select模块，并使用select.renderProvince调用 layui.define(function (exports) { var obj = { renderArea: function (selector, data) { $.ajax({ type: "Post", url: "/Views/Admin/SysUser_Detail.aspx/GetArea", contentType: "application/json; charset=utf-8", data: data, dataType: "json", success: function (data) { var res = JSON.parse(data.d);//返回的webservice数据用data.d获取内容 if (res.Code == 0) { var options = ""; $(selector).find('option:first').nextAll().remove(); for (var i = 0; i < res.Entities.length; i++) { options += "<option value='" + res.Entities[i].Key + "'>" + res.Entities[i].Value + "</option>"; } $(selector).append($(options)); layui.form.render(); } }, error: function (err) { } }); }, renderSkills: function (selector) { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "/Views/Admin/SysUser_Detail.aspx/GetSkills", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //返回的数据用data.d获取内容 var res = JSON.parse(data.d); if (res.Code == 0) { var options = ""; $(selector).find('option:first').nextAll().remove(); for (var i = 0; i < res.Entities.length; i++) { options += "<option value='" + res.Entities[i].Key + "'>" + res.Entities[i].Value + "</option>"; } $(selector).append($(options)); layui.form.render(); } }, error: function (err) { } }); }, // 重写layui中select的on监听事件 on: function (layuiId, fn) { var jqueryId = layuiId.replace('(', "[lay-filter='").replace(')', "']"); $(jqueryId).bind("change", fn); } }; // 输出select接口并且将该模块附加到layui中如使用layui.select即可访问。使用layui.select.on和layui.select.renderArea即可访问上面定义的方法 exports('select', obj); });
var editEncodeContent = { htmlEncode: function (value) { return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """); }, htmlDecode: function (value) { return !value ? value : String(value).replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"').replace(/&/g, "&"); } };
// 以下代码为layui模块中调用配置的代码 layui.use(layPage.module, function () { var form = layui.form; var layer = layui.layer; var layedit = layui.layedit; var laydate = layui.laydate; var treeSelect = layui.treeSelect; var upload = layui.upload; var select = layui.select; // **1) 渲染绑定部分 render++ upload.render(layPage.upload); // 上传控件渲染 laydate.render({ elem: '#Birthday' }); // 日期控件渲染 select.renderArea("select[name='ProvinceSysNo']", "{'ProvinceSysNo': 0,'CitySysNo': 0 }"); // 下拉框渲染和联动渲染 select.renderSkills("select[name='Skills']"); //json文件加载渲染 treeSelect.render(Q.DeptJsonOptions); //json对象加载渲染,deptData必须在$(function(){ })页面最初始化时加载，加载时使用ajax请求数据时需要设置为同步的否则这里可能取不到数据 layPage.DeptDataOptions.data = deptData; treeSelect.renderData(layPage.DeptDataOptions); // 富文本编辑器 layedit.set(layPage.editUpload); //注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效 editIndex = layedit.build('Note'); // **2) 验证 verify++ form.verify(layPage.verify); // 自定义验证规则 // **3) 事件监听 on++ form.on("select(ProvinceSysNo)", function (data) { select.renderArea("select[name='CitySysNo']", "{'ProvinceSysNo':" + data.value + ",'CitySysNo': 0 }"); }); form.on("select(CitySysNo)", function (data) { select.renderArea("select[name='AreaSysNo']", "{'ProvinceSysNo':0,'CitySysNo': " + data.value + " }"); }); form.on('switch(Status)', layPage.statusSwitch); // 监听指定开关事件 form.on('submit(SaveUser)', layPage.formSubmit); // 监听提交事件 //layPage.BindForm(); // 表单赋值 //layPage.GetForm(); // 表单取值 });
【列表页】
预览图：
【Html部分】
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <link rel="stylesheet" href="../skin/layuiadmin/layui/css/layui.css" media="all" /> <script type="text/javascript" src="/scripts/jquery/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../skin/layuiadmin/layui/layui.js"></script> <script type="text/javascript" src="../js/common.js"></script> <link href="../include/style.css" rel="stylesheet" />
<div class="layui-fluid"> <div class="layui-card"> <div class="layui-form layui-card-header layuiadmin-card-header-auto"> </div> </div> </div>
<div class="layui-inline"> <label class="layui-form-label">一级类别</label> <div class="layui-input-inline" style="width: 120px;"> <select id="CId1" name="CId1" lay-filter="CId1"> <option value="99">请选择</option> ...你需要追加的内容 </select> </div> <label class="layui-form-label">二级类别</label> <div class="layui-input-inline" style="width: 120px;"> <select id="CId2" name="CId2" lay-filter="CId2"> <option value="99">请选择</option> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">是否热点</label> <div class="layui-input-inline" style="width: 120px;"> <select id="Is_hot" name="Is_hot" lay-filter="Is_hot" autocomplete="off"> <option value="99">请选择</option> <option value="1">是</option> <option value="0">否</option> </select> </div> <label class="layui-form-label">是否置顶</label> <div class="layui-input-inline" style="width: 120px;"> <select id="Is_top" name="Is_top" lay-filter="Is_top" autocomplete="off"> <option value="99">请选择</option> <option value="1">是</option> <option value="0">否</option> </select> </div> <label class="layui-form-label">状态</label> <div class="layui-input-inline" style="width: 120px;"> <div class="layui-inline" style="width: 120px;"> <select id="Status" name="Status" lay-filter="Status" autocomplete="off"> <option value="99">请选择</option> <option value="0">待审核</option> <option value="1">审核通过</option> <option value="2">审核不通过</option> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">关键字</label> <div class="layui-input-block"> <input type="text" name="keyword" placeholder="关键字" class="layui-input" style="width: 200px" /> </div> </div> <div class="layui-inline"> <div class="layui-inline"> <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="search_go"> <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> </button> </div> </div> </div>
<!--数据表格--> <table class="layui-hide" id="new_table" lay-filter="tablelist"></table> <!--工具栏模板容器--> <div style="display: none"> <!--数据表格工具栏--> <script type="text/html" id="ToolBar"> <div class="layui-btn-container" <%-- style="padding:6px 9px"--%>> <button class="layui-btn layui-btn-sm" lay-event="add">添加</button> <button class="layui-btn layui-btn-sm" lay-event="del">删除</button> <button type="button" class="layui-btn layui-btn-sm" onclick="pass()" data-type="pass">审核通过</button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="fail()">审核不通过</button> </div> </script> <!--数据表格行工具栏--> <script type="text/html" id="Bar"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a> </script> <script type="text/html" id="Bar2"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="Up"><i class="layui-icon layui-icon-up"></i>向上</a> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="Down"><i class="layui-icon layui-icon-down"></i>向下</a> </script> </div>
var $$post, newtable, checkedArr = [];
// 模块定义 layui.use(['layer', 'table', 'form'], function (layer, table, form) { });
// layer弹窗回调使用,从当前页面打开的视图页面用top.gridView.reload("Id")可以刷新列表 top.gridView = table;
// 定义通用的post设置方法 $$post = function (action, data, msg, fun) { var url = "?action=" + action; var loadIndex = layer.load(2, { time: 3 * 1000 }); $.post(url, data, function (D) { layer.close(loadIndex); switch (D.code) { case 0: if (!!fun) fun(D); else layer.msg(msg, { icon: 1, shade: 0.3 }); break; case 2: layer.msg(D.msg, { icon: 5 }); break; default: layer.msg("操作失败，请重试", { icon: 5 }); } }, "json"); };
// 下拉框监听后加载的另一个下拉框内容 form.on('select(CId1)', function (data) { $.post('/admin/article/news_list.aspx?action=GetCId2&CId=' + data.value, function (result) { $("#CId2").find("option:not(:first)").remove(); var da = result.data; for (var i in da) { var temp = da[i]; $("#CId2").append(new Option(temp.ClassName, temp.Id)); } form.render(); }, 'json') });
// 执行搜索 form.on("submit(search_go)", function (data) { var formField = data.field; formField.action = "View"; formField.Is_hot = $("#Is_hot").val(); formField.Is_top = $("#Is_top").val(); formField.Status = $("#Status").val(); newtable.reload({ page: { curr: 1 }, where: formField }); return false; });
// 执行排序 table.on('sort(tablelist)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" //尽管我们的 table 自带排序功能，但并没有请求服务端。 //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如： table.reload('Id', { initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数 , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式） field: obj.field //排序字段 , order: obj.type //排序方式 } }); });
// 监听行工具事件 table.on('tool(tablelist)', function (obj) {//注：tool是工具条事件名，tablelist是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值 var tr = obj.tr; //获得当前行 tr 的DOM对象 var $this = $(this); if ($(this).parents('table').length > 1) return; switch (obj.event) { case 'del'://删除 layer.confirm('您确定要删除该条记录嘛？', function (index) {//向服务端发送删除指令 del(data.Id, layer, obj); layer.close(index); }); break; case 'edit'://编辑 edit(data.Id, obj); break; case 'comment'://查看留言 comment(data.Id, obj); break; case 'Is_hot'://热点 var box = $this.find("input[name=" + layEvent + "]").prop("checked"); $$post(layEvent, { Id: obj.data.Id, val: box ? 1 : 0 }, "【编号：" + data.Id + "】" + (box ? "热点成功" : "取消热点")); break; case 'Is_top'://置顶 var box = $this.find("input[name=" + layEvent + "]").prop("checked"); $$post(layEvent, { Id: obj.data.Id, val: box ? 1 : 0 }, "【编号：" + data.Id + "】" + (box ? "置顶成功" : "取消置顶")); break; case 'Status'://启用 var box = $this.find("input[name=" + layEvent + "]").prop("checked"); $$post(layEvent, { Id: obj.data.Id, val: box ? 0 : 1 }, "【编号：" + data.Id + "】" + (box ? "启用成功" : "取消启用")); break; case 'Up'://向上 var box = $this.find("input[name=" + layEvent + "]").prop("checked"); $$post(layEvent, { Id: obj.data.Id, val: box ? 0 : 1 }, "【编号：" + data.Id + "】" + "向上排序成功"); top.gridView.reload("Id"); break; case 'Down'://向下 var box = $this.find("input[name=" + layEvent + "]").prop("checked"); $$post(layEvent, { Id: obj.data.Id, val: box ? 0 : 1 }, "【编号：" + data.Id + "】" + "向下排序成功"); top.gridView.reload("Id"); break; } });
// 监听行编辑事件 table.on('edit(tablelist)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值" if ($(this).parents('table').length > 1) return; var value = obj.value //得到修改后的值 , data = obj.data //得到所在行所有键值 , field = obj.field; //得到字段 var olddata = {}; var inputElem = $(this); var tdElem = inputElem.closest('td'); var valueOld = inputElem.prev().text(); olddata[field] = valueOld; var arr = { BookingFee: "预订费用", Sort: '排序', Rank: '排名' }; var msg = ""; if (obj.field == "BookingFee" && !/^\d{1,10}(\.\d{1,2})?$/.test(value)) msg = "请输入正确的数值，且最多两位小数"; if ((obj.field == "OrderId" || obj.field == "Sort" || obj.field == "Rank") && !/^[+]{0,1}(\d+)$/.test(value)) msg = "只能输入正整数"; if (!!msg) { layer.msg(msg, { icon: 5, time: 1000, anim: 6, shade: 0.01 }, function () { inputElem.blur(); obj.update(olddata); tdElem.click(); }); return false } $$post(obj.field, { Id: obj.data.Id, val: value }, "【编号：" + data.Id + "】" + arr[obj.field] + ' 更改为：' + value); //$$post(obj.field, { Id: obj.data.Id, val: value }, '【编号：' + data.Id + '】' + arr[obj.field] + ' 更改为：' + value); });
// 监听复选框选择事件 table.on('checkbox(tablelist)', function (obj) { if (obj.type == 'all') return; if (obj.checked) checkedArr[obj.data.Id] = obj.tr.attr("data-index"); //obj.data.LAY_TABLE_INDEX; else delete checkedArr[obj.data.Id]; });
function delcheck(obj, layer, checkStatus) { if (checkStatus.data.length <= 0) { layer.msg('您还没有选择任何行！', { icon: 5 }); return; } var idArray = []; for (var i = 0; i < checkStatus.data.length; i++) { idArray.push(checkStatus.data[i].Id); } layer.confirm('您确定要删除该条记录嘛？', function (index) {//向服务端发送删除指令 del(idArray.join(','), layer, obj, checkStatus); layer.close(index); }); } function del(id, layer, obj, checkStatus) { $.ajax({ cache: false, type: "POST", url: "?action=Del&id=" + id, async: false, error: function (request) { layer.msg("系统开小差了，请重试！", { icon: 5 }); }, success: function (data) { dataJson = JSON.parse(data); if (dataJson.code == 0) { layer.msg(dataJson.msg, { icon: 1, shade: 0.3 }); if (checkStatus) { if (checkStatus.isAll == true) { $("tr[data-index]").remove(); } else { for (var a = 0; a < checkStatus.data.length; a++) { $("tr[data-index=" + checkedArr[checkStatus.data[a].Id] + "]").remove(); } } } else obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 } else { layer.msg(dataJson.msg, { icon: 5 }); } } }); }
//添加 function add() { // openDetail 是封装的方法，你可以参考官网layer编写一个适合你的openDetail弹窗 openDetail('/XXX/XXX/XXX_edit.aspx?action=add', '添加XX', null, null); } //修改 function edit(id, obj) { openDetail('/XXX/XXX/XXX_edit.aspx?action=edit&id=' + id, '修改XX', null, null); }
// 多行审核 function Audit() { var checkStatus = layui.table.checkStatus('Id'); if (checkStatus.data.length <= 0) { layer.msg('您还没有选择任何行！', { icon: 5 }); return; } var idArray = []; for (var i = 0; i < checkStatus.data.length; i++) { idArray.push(checkStatus.data[i].Id); } var loadIndex = layer.load(2, { time: 10 * 1000 }); layer.confirm('您确定选中的项都通过审核吗？', function (index) { $.ajax({ cache: false, type: "POST", url: "?action=XX&id=" + idArray.join(','), async: false, error: function (request) { layer.msg("系统开小差了，请重试！", { icon: 5 }); }, success: function (data) { dataJson = JSON.parse(data); if (dataJson.code == 0) { layer.msg(dataJson.msg, { icon: 1 }, function () { top.gridView.reload("Id"); layer.close(index); }); } else { layer.msg(dataJson.msg, { icon: 5 }); } } }); }); layer.close(loadIndex); top.gridView.reload("Id"); } // 多行驳回 function Reject() { var checkStatus = layui.table.checkStatus('Id'); if (checkStatus.data.length <= 0) { layer.msg('您还没有选择任何行！', { icon: 5 }); return; } var idArray = []; for (var i = 0; i < checkStatus.data.length; i++) { idArray.push(checkStatus.data[i].Id); } var loadIndex = layer.load(2, { time: 10 * 1000 }); var str = "<div class='layui-card-body layui-form-text'>" + "<h5>驳回原因</h5>" + "<textarea name='AuditReason' placeholder='请输入' class='layui-textarea'></textarea>" + "</div>"; layer.confirm(str, { btn: ['确定', '取消'], title: "您确定选中的项都驳回吗？", type: 1 }, function (index) { var AuditReason = $("textarea[name=AuditReason]").val(); if (!AuditReason) { $("textarea[name=AuditReason]").focus(); layer.msg("请输入驳回原因", { icon: 5 }); return false; } var url = "?action=XX&id=" + idArray.join(','); $.ajax({ cache: false, async: false, url: url, type: "POST",//dataType: "json", data: { AuditReason: AuditReason }, error: function (request) { layer.msg("系统开小差了，请重试！", { icon: 5 }); }, success: function (data) { dataJson = JSON.parse(data); if (dataJson.code == 0) { layer.msg(dataJson.msg, { icon: 1 }, function () { top.gridView.reload("Id"); layer.close(index); }); } else { layer.msg(dataJson.msg, { icon: 5 }); } } }); }); layer.close(loadIndex); top.gridView.reload("Id"); }
newtable = table.render({ elem: '#new_table' // 指定原始表格元素选择器（推荐id选择器） , toolbar: '#ToolBar' // 指定数据表格工具栏 , defaultToolbar: [/*'filter', 'exports', 'print'*/] // 列过滤，导出，打印 , height: 'full-60' // 容器可运行差异高度的范围 , page: true // 是否开启分页 , limits: [20, 50, 100, 200, 500, 1000] // 分页范围树 , limit: 11 // 每页显示行 , cols: [[ { checkbox: true } // 是否开启复选框选择 , { /*fixed: 'right',*/ title: '操作', width: 130, align: 'left', toolbar: '#Bar' } // 指定行工具栏fixed指定是否处于右边 , { field: 'Status', title: '是否启用', width: 170, align: 'center', templet: function (d) { // 可定义内容的列 return '<div>' + '<span lay-event="Is_hot"><input type="checkbox" name="Is_hot" ' + (d.Is_hot == 1 ? "checked" : "") + ' title="热点" class="Label"/></span> ' + '<span lay-event="Is_top"><input type="checkbox" name="Is_top" ' + (d.Is_top == 1 ? "checked" : "") + ' title="置顶" class="Label"/></span>' + '</div>' } } , { field: 'Id', title: '编号', align: 'center', width: 80 } // 一般列 , { field: 'PicPath', title: '主图', width: 69, align: 'center', templet: function (d) { // 显示图片的列 return '<div><img src="' + d.PicPath + '" style="height:36px;cursor:pointer;" onclick="window.open(this.src)" class="layui-table-img"/></div>' } } , { field: 'Sort', title: '序号', width: 80, align: 'center', edit: 'text', sort: true } // 可排序的列 ]] //, even: true // 开启隔行背景 , id: 'Id' // 设定容器唯一ID,是表格容器的索引 , url: '?' // 接口地址 , where: { action: 'View' } // 接口的其它参数 , method: 'get' }); 模块中数据表格设置
function IndexExport() { layer.confirm("确定要导出会员，是否继续？", {}, function (index) { layer.close(index); var form = $("<form>"); form.attr('style', 'display:none'); form.attr('target', ''); form.attr('method', 'post'); form.attr('action', '/StarUser/Export?keywords=' + $('#keywords').val()); var input1 = $('<input>'); input1.attr('type', 'hidden'); input1.attr('name', 'item'); input1.attr('value', 'test'); $('body').append(form); form.append(input1); form.submit(); form.remove(); }); }
<!--layui自定义非空验证-->
<script>
layui.wxverify = function (form) {
var isverifySuccess = true;
$(form).find("[wxverify='required']").each(function () {
var verfyValue = $(this).val();
if (verfyValue == undefined || verfyValue == null) {
verfyValue = "";
}
if (verfyValue == "" ) {
var msg = "必填项不能为空!";
if ($(this).attr("wxverifymessage") != undefined && $(this).attr("wxverifymessage") != "") {
msg = $(this).attr("wxverifymessage");
}
layer.msg(msg, { icon: 5, time: 1000 });
isverifySuccess = false;
return false;
}
});
return isverifySuccess;
}
</script>
<!-- layui自定义非空验证使用示例 -->
<select name="GradeId" lay-filter="GradeId" wxverifymessage="会内职务不能为空" wxverify="required">
