下载文档原格式
layui-tree实现Ajax异步请求后动态添加节点的⽅法最近在弄⼀个产品分类管理，是⼀个树形菜单的形式，⽤的是layui-tree ,由于它并没有动态添加节点，所以只能⾃⼰刚了。
⼤概效果如图体的实现是当我⿏标移⼊“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为⽗类id 的⼀个⼦分类，成功后返回到前台，然后相应的节点下动态添加⼦节点，主要是通过append 来增加html元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>多级分类管理</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" type="text/css"href="layui/css/layui.css" rel="external nofollow" media="all"></head><style>.panel {margin-bottom: 0;}i{cursor: pointer !important ;cursor: hand !important;}body{}a:hover{background-color:#E6E6E6 ;}.active{background:#E6E6E6;}.hide{display:none;}</style><body style="height:100%;"><div style="height:100%;"><div class="panel panel-default"style=" position:fixed; width: 250px; height:800px; overflow:auto;"><div class="panel-body" style=" "><h4 style="text-align: center;">分类管理</h4><ul unselectable="on" id="demo"style="margin-top: 30px; -moz-user-select: none; -webkit-user-select: none;"onselectstart="return false;" ></ul><button id="addcate" class="layui-btn layui-btn-primary" style="margin-top:20px; margin-left:28px; width:70%;">添加分类</button></div></div></div><script type="text/javascript" src="layui/layui.js"></script><script type="text/javascript">e(['jquery','layer','element','form','tree'],function(){window.jQuery = window.$ = layui.jquery;yer = yer;var form = layui.form;var elem = layui.element;var topcateid=0; //为模拟顶级分类id⽤//初始化layer.treevar tree = layui.tree({elem: '#demo',nodes:[] //这⾥可以通过后台获取（如ThinkPHP框架则可以通过后台拼接好，再⽣成模板变量类似{$tree}就可以）});window.onload=function(){//删除layui-tree ⾃带的样式$("yui-tree-branch").remove();$("yui-tree-leaf").remove();//添加操作的图标(即⿏标划过时显⽰的添加，修改，删除的按钮组)$("ul#demo").find("a").after("<i class='layui-icon add select hide ' )'> </i>"+"<i class='layui-icon edit select hide'> </i>"+"<i class='layui-icon del select hide'> </i>");}//添加顶级分类$("#addcate").on("click",function(){layer.prompt({title: '输⼊分类名称，并确认', formType:0}, function(text, index){layer.close(index);//TODO 可以ajax到后台操作，这⾥只做模拟layer.load(2);setTimeout(function(){layer.closeAll("loading");//⼿动添加节点，肯定有更好的⽅法=.=！这⾥的⽅法感觉有点LOW// li⾥⾯的pid属性为⽗级类⽬的id,顶级分类的pid为0topcateid= topcateid+1;$("ul#demo").append("<li pid='0' id="+(topcateid)+">"+"<a ><cite>"+text+"</cite> </a>"+"<i class='layui-icon select hide add'> </i>"+"<i class='layui-icon edit select hide'> </i>"+"<i class='layui-icon del select hide'> </i>"+"</li>");},1000)});})//显⽰/隐藏分类的操作栏$("ul#demo").on({mouseover: function(event) {event.stopPropagation();$(this).children(".select").removeClass("hide")},mouseout: function(event) {event.stopPropagation();$(this).children(".select").addClass("hide")},},"li","a")//添加⼦分类$("ul#demo ").on("click","li .add",function(){var pid = $(this).closest("li").attr("id");//将⽗级类⽬的id作为⽗类idvar that= $(this).closest("li");layer.prompt({title: '输⼊⼦分类名称，并确认', formType:0}, function(text, index){layer.close(index);//TODO 可以ajax到后台操作，这⾥只做模拟layer.load(2);setTimeout(function(){layer.closeAll("loading");topcateid= topcateid+1;if(that.children("ul").length == 0){//表⽰要新增 i 以及 ul 标签that.prepend('<i class="layui-icon layui-tree-spread"> </i>')that.append("<ul class='layui-show'><li pid="+pid+" id="+(topcateid)+"><a ><cite>"+text+"</cite> </a><i class='layui-icon select hide add' )'> </i> <i class='layui-icon edit select hide'> </i> <i class='layui-icon del select hide'> </i></li></ul>") }else{that.children("ul").append("<li pid="+pid+" id="+(topcateid)+"><a ><cite>"+text+"</cite> </a><i class='layui-icon select hide add' )'> </i> <i class='layui-icon edit select hide'> </i> <i class='layui-icon del select hide'> </i></li>");}},1000)});})//重命名$("ul#demo ").on("click","li .edit",function(){var node=$(this).parent().children("a").children("cite");var id=$(this).parent().attr("id")var that= $(this).closest("li");layer.prompt({title: '输⼊新的分类名称，并确认',value:node.text(), formType:0}, function(text, index){layer.close(index);//TODO 可以ajax到后台操作，这⾥只做模拟layer.load(2);setTimeout(function(){layer.closeAll("loading");node.text(text);},1000)});})//删除分类$("ul#demo ").on("click","li .del",function(){var that= $(this).closest("li");if(that.children("ul").length > 0){layer.msg("该分类下含有⼦分类不能删除")return;}var id=$(this).parent().attr("id")layer.confirm('确定要删除？该分类下的课程亦将删除！', {btn: ['删除','取消']}, function(){//TODO 可以ajax到后台操作，这⾥只做模拟layer.load(2);setTimeout(function(){layer.closeAll("loading");if((that.parent("ul").children("li").length == 1)&&(that.parent("ul").parent("li").children("yui-tree-spread").length=1)){//要把分类名前的三⾓符号和ul标签删除that.parent("ul").parent("li").children("yui-tree-spread").remove();}that.remove()},1000)});})//打开/关闭菜单$("ul#demo").on({click:function(event){event.stopPropagation();event.preventDefault();if( $(this).parent().children("ul").hasClass("layui-show")){$(this).html(" ");$(this).parent().children("ul").removeClass("layui-show");return;}else{$(this).html(" ");$(this).parent().children("ul").addClass("layui-show");return;}return;}}, 'yui-tree-spread');});</script></body></html>以上这篇layui-tree实现Ajax异步请求后动态添加节点的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
关于使用layui表单ajax提交问题我在做登陆表单提交，遇到2个问题1，在IE9上始终出现刷新登陆页面问题解决办法：加一个return false//登录按钮form.on("submit(login)", function (data) {$(this).text("登录中...").attr("disabled", "disabled").addClass("layui-disabled");Login(data);return false;})2,提交表单以后后台总时返回错误。
但是又正常请求到后台解决办法：不指定ajax的dataType就正常了function Login(data) { var $loginName =$("#loginName");var $loginPwd = $("#loginPwd");$.ajax({url: "/Login/CheckLogin",data: { loginName: $.trim($loginName.val()), loginPassword: $.md5($.trim($loginPwd.val())) },type: "post",//dataType: "application/json",//请不要写这个success: function (data) { if (data.Tag == undefined || data.Tag !== 1) {layer.msg('发送失败'); } else {//登陆成功！window.setTimeout(function () {window.location.href ="/Home/Index";}, 500);}}});。
ajax的写法Ajax是一种在Web应用程序中使用的技术，可以在不重新加载整个页面的情况下向服务器请求数据，从而使Web页面更加快速和动态。
它是一种基于JavaScript、XML和HTTP的技术，可以实现异步通信，提高Web应用程序的响应速度和用户体验。
本文将介绍Ajax 的基本原理和使用方法。
一、Ajax的基本原理Ajax的基本原理是通过JavaScript和XMLHttpRequest对象与服务器进行异步通信，从而实现动态更新页面内容的效果。
当用户在Web页面中进行操作时，JavaScript代码会发送一个HTTP请求到服务器，服务器会返回一个XML或JSON格式的数据，JavaScript代码再根据这些数据来更新页面中的内容。
这个过程是在后台进行的，用户并不会察觉到页面的刷新。
下面是一个简单的Ajax请求示例：```var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById('demo').innerHTML =this.responseText;}};xmlhttp.open('GET', 'ajax_info.txt', true);xmlhttp.send();```这段代码中，首先创建了一个XMLHttpRequest对象，然后定义了一个回调函数，当服务器返回数据时会自动调用该函数。
在回调函数中，判断服务器返回的状态码和响应内容是否正确，如果正确则更新页面中id为“demo”的元素的内容。
二、Ajax的使用方法1. 发送GET请求发送GET请求时，可以使用XMLHttpRequest对象的open()和send()方法。
layui中ajax的用法Layui是一款轻量级的前端UI框架，它以简洁、易用的设计风格受到广泛关注。
在Layui中，ajax是一种常用的数据交互方式，它可以让网页与后端服务器进行通信，获取或提交数据。
本文将详细介绍Layui中ajax的用法。
一、ajax概述ajax的全称是AsynchronousJavaScriptandXML（异步的JavaScript和XML），它是一种使用JavaScript和XML来与服务器进行通信的技术。
通过ajax，网页可以异步地向服务器请求数据，并在不刷新页面的情况下更新网页的内容。
这种技术可以大大提高网页的交互性和用户体验。
在Layui中，ajax的使用方法与其他JavaScript框架类似，主要包括以下步骤：1.引入Layui的ajax模块首先，需要在HTML文件中引入Layui的ajax模块，以便可以使用其中的功能。
可以在HTML文件的头部引入以下代码：<scriptsrc="/path/to/layui/layui.js"></script>2.创建ajax请求使用Layui的ajax模块，可以很方便地创建ajax请求。
可以使用以下代码创建一个GET请求：e('ajax',function(){varajax=layui.ajax;ajax.get({url:'/path/to/api',//后端服务器的API地址{//发送给服务器的数据key1:value1,key2:value2},success:function(response){//请求成功的回调函数console.log(response);//打印服务器的响应数据},error:function(error){//请求失败的回调函数console.log(error);//打印错误信息}});});3.处理服务器响应当ajax请求成功时，服务器会返回响应数据。
记⼀次LayUI中Table动态添加列数据这次在开发中遇到，有列数不固定的情况。
废话不多说，先上图，在上代码。
下⾯上JS代码1function SearchData() {2var dYear = $("#DYear").val();3var beginWeek = $("#DSWeek").val();4var endWeek = $("#DEWeek").val();5var params = {};6 params = CreateParamData(params, "dYear", dYear);7 params = CreateParamData(params, "beginWeek", beginWeek);8 params = CreateParamData(params, "endWeek", endWeek);9var mycars = new Array();10var result;11 $.ajax({12 url: GetUrl('Mold', 'Mold_MaintTotal'), // //请求路径13 type: "post",// "post", //请求⽅式14 dataType: 'json', //期望获得的返回值类型15 async: false, //是否异步16 data: params, //传递的参数17 success: function (data) {18 console.log(data.Data);19if (data != '') {20if (data.Result == 3) {21 result = data.Data;22var strs = new Array();23 strs = result[0];24for (var k in strs) {25 mycars.push({26 field: k, title: k, align: 'center', width: 120, sort: false27 });28 }29 }30 }31 },32 error: function (jqXHR, textStatus, errorThrown) {3334//console.log('状态码：' + jqXHR.status);35//console.log('错误信息：' + jqXHR.statusText);36//console.log('服务器反馈信息：' + textStatus);37 }38 });39 e(['form', 'layer', 'table', 'jquery'],40function () {41var laytable = layui.table;4243//动态加载数据44 laytable.render({45 elem: '#workbTable'46 , cols: [mycars]47 , data: result48 });49 });50 };。
Layui数据表格设置选中⾏背景及字体颜⾊话不多说直接上代码：1 $(function () {2var countNum = 0;3var t;4 e(['form', 'table'], function () {5var table = layui.table;6var form = layui.form;789 form.on('submit(exportData)', function (data) {1011 $.ajax({12 type: 'POST',13 url: 'handler/ExportHandler.ashx?flag=6',14 data: { cyc: data.field.cyc, zyq: data.field.quiz1, qk: data.field.quiz2, jh: data.field.jh, ny: ny },15 success: function (date) {16 console.log("success");17 $("#downloadRul").attr("href", date);18 $('#downloadRul>p').trigger("click");1920 },21// dataType: "json"22 });23//window.location = "ExportHandler.ashx";2425return false;26 });27 table.render({28 id:'jh',29 elem: '#jhList'30 , height: 'full-200'31 , url: 'handler/WellList.ashx' //数据接⼝32 , cellMinWidth: '20'33 , page: false//开启分页34 , limits: [150, 300, 450]35 ,even:true36 , cols: [[37 { field: 'JH1', title: '预警', width:'90',align: 'center'},38 { field: 'jh1', title: '传输状态', width: '90', align: 'center' },39 { field: 'jhbm', title: '井名', width: '100', align: 'center'},40 { field: 'yidcount', title: '段数', width: '95', align: 'center'},41 { field: 'jh', title: 'id', align: 'center', style: 'display:none;'}42 ]]43 , done: function (res, curr, count) {44 $('yui-table thead tr th:eq(4)').addClass('layui-hide');45 countNum = res.data.length;46 $('th').css({ 'background-color': '#BCD2EE', 'color': 'black' });//设置th颜⾊47//tr隔⾏换⾊48var that = this.elem.next();49 res.data.forEach(function (item, index) {5051if (index % 2 == 0) {52var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", '#D1EEEE');53 } else {54var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", 'white');55 }56if (index == 0) {57//默认选中⾏58var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", '#1E9FFF');59var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("color", '#fff');60var jh = item["jh"];61//chart(jh, item["jhbm"]);//打开窗体默认加载曲线62 t = setInterval(function () { chart(jh, item["jhbm"]) }, 1000);//执⾏定时⽅法chart("","")63 }64 })65 $('td').css({ 'border': 'none' });//设置td⽆边框66 $('th').css({ 'border': 'none' });//设置th⽆边框67 $('td').css({ 'cursor': 'pointer' });//设置th⽆边框68 $('.layui-table-body').find('td').each(function (index, element) {69// console.log('渲染111111'); //得到被选中的值70if ($(this).attr('data-field') >= 0) {71 $(this).css('display', 'none');72 }7374 });75 }76 });7778//选中⾏后改变⾏背景及字体颜⾊79 $("body").on('click', '.layui-table-body tr ', function () {80 console.log(this);81var data_index = $(this).attr('data-index');//得到当前的tr的index82 console.log($(this).attr('data-index'));83for (var i = 0 ; i < countNum; i++)//countNum为总⾏数84 {85if (i % 2 == 0) { //设置隔⾏换⾊86 $(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#D1EEEE;color:black" });//恢复原有tr颜⾊87 } else {88 $(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#fff;color:black" });//恢复原有tr颜⾊89 }90 }91 $(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#1E9FFF;color:#fff" });//改变当前tr颜⾊9293 });9495//单击⾏的监听事件96 table.on('row(jhList)', function (obj) {97var jh = obj.data.jh;98var jhbm = obj.data.jhbm;99 window.clearInterval(t);100 t = setInterval(function () { chart(jh, jhbm) }, 1000);101//chart(jh, jhbm);102 });103 });104 });最主要的部分://选中⾏后改变⾏背景及字体颜⾊$("body").on('click', '.layui-table-body tr ', function () {console.log(this);var data_index = $(this).attr('data-index');//得到当前的tr的indexconsole.log($(this).attr('data-index'));for (var i = 0 ; i < countNum; i++)//countNum为总⾏数{if (i % 2 == 0) { //设置隔⾏换⾊$(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#D1EEEE;color:black" });//恢复原有tr颜⾊} else {$(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#fff;color:black" });//恢复原有tr颜⾊}}$(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#1E9FFF;color:#fff" });//改变当前tr颜⾊});如果数据表格不设置间隔换⾊的话还可以这样：//选中⾏后改变⾏背景及字体颜⾊$("body").on('click', '.layui-table-body tr ', function () {console.log(this);var data_index = $(this).attr('data-index');//得到当前的tr的indexconsole.log($(this).attr('data-index'));$(".layui-table-body tr").attr({ "style": "background:#FFFFFF; color:#666666" });//其他tr恢复颜⾊$(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#F2F2F2;color:#666666" });//改变当前tr颜⾊});将整个数据表格的⾏都设置为相同背景及字体，再将选中的⾏设置想要的背景及字体，这样更简单。
layui的表单验证⽀持ajax判断⽤户名是否重复的实例如下所⽰：在⼀个表单中，在提交前我们想判断该⽤户名是否存在，在layui中不⽀持。
onblur()失去焦点事件，⽤按钮来⼿动触发，表单⼜不太美观，可以使⽤form表单的verify来进⾏验证。
html：<div class="layui-form-item"><label class="layui-form-label">⽤户名</label><div class="layui-input-block"><input type="text" id="username" name="username" autocomplete="off"class="layui-input" lay-verify="username" placeholder="请输⼊⽤户名"></div></div>注意lay-verify="username" ，在js⽂件中定义验证事件。
js：form.verify({//将⽤户名是否可⽤作为验证条件表单提交时触发,username:function(value){var datas={username: value};var message = '';$.ajax({type:"POST",url:xxx(对应后台的⽅法),async: false, //改为同步请求contentType:'application/json;charset=UTF-8',data:JSON.stringify(datas),dataType:'json',success:function(data){if(data){}else{message ="⽤户名已存在，请重新输⼊！"}}});//需要注意需要将返回信息写在ajax⽅法外if (message !== '')return message;}});后台的⽅法：//管理员注册时验证⽤户名是否可⽤@RequestMapping(value="/xxx",method=RequestMethod.POST,consumes="application/json")@ResponseBodypublic boolean toVerifyUsername(@RequestBody Admin admin) {String username=admin.getUsername();System.out.println(username);//根据⽤户名查询管理员(包括status为0的以防恢复引起bug)Admin admin1=adminService.findByUsernameno(username);if(admin1==null){System.out.println(111);//返回true则为没有该⽤户名可以被注册return true;}else {System.out.println(222);return false;}}效果：以上这篇layui的表单验证⽀持ajax判断⽤户名是否重复的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
layui实现数据表格table分页功能（ajax异步）layui实现数据表格table分页功能，异步加载，表格渲染，含条件查询。
⼀、引⼊layUI的相关资源<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" ><script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>⼆、html页⾯代码搜索表单：<div class="layui-row"><form class="layui-form layui-col-md12 we-search">项⽬搜索：<div class="layui-inline"><input type="text" name="projectName" id="projectName" placeholder="项⽬名称" autocomplete="off" class="layui-input"></div><div class="layui-input-inline"><select name="businessOperatorId" id="businessOperatorId" lay-verify="" lay-search><option value="">业务员</option></select></div><div class="layui-input-inline"><select name="mftRepresentativeId" id="mftRepresentativeId" lay-verify="" lay-search><option value="">⼚家代表</option></select></div><div class="layui-input-inline"><select name="channelId" id="channelId" lay-search><option value="">渠道</option></select></div><div class="layui-input-inline"><select name="customerId" id="customerId" lay-search><option value="">客户</option></select></div><div class="layui-input-inline"><select name="projectPhase" id="projectPhase" lay-search><option value="">项⽬阶段</option></select></div><div class="layui-input-inline"><select name="goodsCondition" id="goodsCondition" lay-search><option value="">货物情况</option></select></div><div class="layui-input-inline"><select name="implementCondition" id="implementCondition" lay-search><option value="">实施情况</option></select></div><div class="layui-input-inline"><select name="payCondition" id="payCondition" lay-search><option value="">收款情况</option></select></div><div class="layui-inline"><input class="layui-input" placeholder="开项时间" name="startTime" id="startTime"></div><div class="layui-inline"><input class="layui-input" placeholder="结项时间" name="endTime" id="endTime"></div><button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button></form></div>数据表格:<table class="layui-hide" id="projectList" lay-filter="projectList"></table>三、后台接收分页参数以及查询条件，获取并返回数据主要注意下:page: 前台分页插件传⼊的当前页数，limit: 前台分页插件传⼊的每页个数，projectInfo ：接收前台传⼊的查询条件的实体jsonResult ：后台返回的相关数据的响应实体@ResponseBody@RequestMapping("/project/list")public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){ JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);return jsonResult;}后台响应类必须包含code与count字段，因为前台layui会⾃动获取⾃定义后台数据响应实体 JsonResult：package mon.util;/*** JSON结果响应**/@Datapublic class JsonResult {private static final String SUCCESS = "成功";private static final String ERROR = "失败";/*** 响应状态code，因为前台layui默认0为响应成功，所以此处默认为0*/private Integer code = 0;/*** 数据总条数*/private Long count = 0L;/*** 返回是否成功*/private Boolean result = false;/*** 返回提⽰信息*/private String msg = "";/*** 返回数据信息*/private Object data;private JsonResult() {}/*** 成功的响应** @return*/public static JsonResult success() {return result(true, SUCCESS, null,null);}public static JsonResult success(String msg) {return result(true, msg, null,null);}public static JsonResult success(Object data) {return result(true, SUCCESS, data,null);}public static JsonResult success(Object data,Long count) {return result(true, SUCCESS, data,count);}public static JsonResult success(String msg, Object data) {return result(true, msg, data,null);}public static JsonResult success(String msg, Object data,Long count) {return result(true, msg, data,count);}/*** 失败的响应** @return*/public static JsonResult error() {return result(false, ERROR, null,null);}public static JsonResult error(String msg) {return result(false, msg, null,null);}public static JsonResult error(Object data) {return result(false, ERROR, data,null);}public static JsonResult error(Object data,Long count) {return result(false, ERROR, data,count);}public static JsonResult error(String msg, Object data) {return result(false, msg, data,null);}public static JsonResult error(String msg, Object data,Long count) {return result(false, msg, data,count);}public static JsonResult result(Boolean result, String msg, Object data,Long count) { JsonResult jsonResult = new JsonResult();jsonResult.setResult(result);jsonResult.setMsg(msg);jsonResult.setData(data);jsonResult.setCount(count);return jsonResult;}}四、渲染table表格数据主要注意下:elem: ‘#projectList': projectList为表格id，page: true: 设置表格分页，url: ‘/project/list' ：数据请求urlfixed: true:固定列done : function(res, curr, count){…}:数据加载成功后的回调函数var tableIns = table.render({elem: '#projectList',cellMinWidth: 150,url: '/project/list',cols: [[{// type: 'checkbox',fixed: 'left'checkbox: true, fixed: true}, {field: 'id',title: 'ID',align:'center',width:50,fixed: true}, {field: 'name',title: '项⽬名称',align:'center',fixed: true}, {field: 'businessOperatorStr',title: '经办⼈',align:'center',fixed: true}, {field: 'mftRepresentativeStr',title: '⼚家代表',align:'center',fixed: true}, {field: 'channelStr',title: '渠道',align:'center',fixed: true}, {field: 'customerStr',title: '客户',align:'center',fixed: true}, {field: 'projectPhaseStr',title: '项⽬阶段',align:'center',fixed: true}, {field: 'amount',title: '⾦额',align:'center'}, {field: 'businessSource',title: '商机来源',align:'center'}, {field: 'mainProduct',title: '主要产品',align:'center'}, {field: 'productLineStr',title: '产品线',align:'center'}, {field: 'goodsConditionStr',title: '货物情况',align:'center'}, {field: 'implementConditionStr',title: '实施情况',align:'center'}, {field: 'payAmount',title: '已付⾦额',align:'center'}, {field: 'payConditionStr',title: '收款情况',align:'center'}, {field: 'startTime',title: '开项时间',align:'center'}, {field: 'endTime',title: '结项时间',align:'center'}, {field: 'remark',title: '备注',align:'center'}, {field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true}]],id: 'testReload',// skin: 'row', //表格风格even: true, //隔⾏背景event: true,page: true,done : function(res, curr, count){$('#totalProjectNumber').text("共有数据："+count+" 条");table_data=res.data;layer.closeAll('loading');// layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的// layer.close(index); //返回数据关闭loading}});五、监听搜索表单的提交事件,并重新渲染table表格数据主要注意下:sreach: 为搜索按钮的lay-filter=“sreach”，where 中的数据对应搜索表单，为搜索的条件，后台使⽤这些条件进⾏筛选数据返回form.on('submit(sreach)', function(data){layer.load();tableIns.reload({url:"/project/list",page: {curr: 1 //重新从第 1 页开始},where:{name:data.field.projectName,businessOperatorId:data.field.businessOperatorId,mftRepresentativeId:data.field.mftRepresentativeId,channelId:data.field.channelId,customerId:data.field.customerId,projectPhase:data.field.projectPhase,goodsCondition:data.field.goodsCondition,implementCondition:data.field.implementCondition,payCondition:data.field.payCondition,startTime:data.field.startTime,endTime:data.field.endTime}});return false; //阻⽌表单跳转。
layuiAjax请求给下拉框赋值的实例如下所⽰：<!DOCTYPE html><html><head><title>排课设置</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><link rel="stylesheet" href="/vendor/layui/css/layui.css" rel="external nofollow" media="all"></head><body><div class="layui-form" lay-filter="boardFilter"><hr><div class="layui-form-pane layui-tab-content" style="margin: -10px auto;"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">查询内容</label><div class="layui-input-inline" style="width: 250px;"><input class="layui-input" name="schName" placeholder="请输⼊学校名称" id="schName" autocomplete="off"></div></div><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">学期</label><div class="layui-input-inline" style="width: 200px;"><select name="termId" id="termId"></select></div></div><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">列表状态</label><div class="layui-input-inline" style="width: 150px;"><select name="msgType" id="msgType"><option value="">全部状态</option><option value="1">申请中</option><option value="2">确认申请</option><option value="3">已经发布</option><option value="0">已撤销</option></select></div></div><div class="layui-inline toolbarBtn"><button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="getSearch" id="getSearch" name="getSearch"><i class="layui-icon"></i> 查询</button> </div></div></div><table class="layui-table" id="infoTable" lay-filter="filterTable"></table><script type="text/javascript" src="/vendor/jquery/jquery-1.11.3.min.js"></script><script type="text/javascript" src="/vendor/layui/layui.js"></script><script type="text/html" id="action"><a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view">查看</a>{{# if(d.status===2){ }}<a class="layui-btn layui-btn-xs" lay-event="send">推送</a>{{# } }}{{# if(d.status===3){ }}<a href='{{d.url}}' class='layui-btn layui-btn-xs'>下载排课表</a>{{# } }}</script><script type="text/html" id="courseArrangeFlag">{{# if(d.courseArrangeFlag===0){ }}<h>⾏政班排课</h>{{# } else { }}<h>⾛班排课</h>{{# } }}</script><script type="text/html" id="status">{{# if(d.status===0){ }}<h>撤消申请</h>{{# } else if(d.status===1){ }}<h>申请中</h>{{# } else if(d.status===2){ }}<h>排课中</h>{{# } else if(d.status===3){ }}<h>已经推送</h>{{# } else if(d.status===4){ }}<h>已发布课程表</h>{{# } }}</script><script>e(['table','layer'], function() {var table = layui.table,form = layui.form;var $ = layui.jquery, layer = yer;var tableIns = table.render({elem: '#infoTable',url: '/web/courseArrange/list',id: 'idTable',page: true,limits: [10,20,50,100],limit: 10 //默认采⽤10,cols: [[ //标题栏{checkbox: true, fixed: true},{field: 'courseArrangeId', title: '序号', fixed: true},{field: 'schName', title: '学校名称'},{field: 'courseArrangeFlag', title: '排课类型', templet: '#courseArrangeFlag'},{field: 'termName', title: '学期'},{field: 'recordTime', title: '申请时间'},{field: 'status', title: '状态', templet: '#status'},{field: 'action', title: '操作', templet: '#action'}]]});//监听管理操作form.on('switch(schControlInput)', function(obj){var normalValueif(obj.elem.checked){normalValue = '0';}else{normalValue = '1';}$.ajax({url:'/school/editIsNormalSchool',type:"POST",dataType:"json",data:{"schId":this.value, "statusValue":normalValue},success:function(res){location.reload();},});});// 监听Table⼯具条table.on('tool(filterTable)', function(obj) {var data = obj.data;if (obj.event === 'view') {location.href="courseArrangeView.html?id=" rel="external nofollow" +data.courseArrangeId+"&schId="+data.schId+"&areaId="+data.areaId;}else if (obj.event === 'send') {layer.open({type: 2,title: '导⼊并推送',maxmin: true,shadeClose: false, //点击遮罩关闭层area : ['700px' , '600px'],content: '/page/business/course/courseArrangeUpload.html?schId='+data.schId+'&areaId='+data.areaId+'&termId='+data.termId+'&courseArrangeFlag='+data.courseArrangeFlag+'&phone='+data.phone ,btn: '关闭',btnAlign: 'c' //按钮居中,shade: 0 //不显⽰遮罩,yes: function(){layer.closeAll();},end: function () {location.reload();}});}});form.on('submit(getSearch)', function(data){table.reload('idTable', {where: data.field});});$(document).ready(function () {$("select[name=termNm]").empty();$.ajax({async: false,type: "POST",url: "/web/courseArrange/termList",dataType: "json",data: {},success: function (res) {var opt = "<option value='' selected = \'selected\'>全部</option>";$("select[name=termId]").append(opt);for(var i=0; i<res.data.length; i++){var option="<option value=\""+res.data[i].termId+"\"";option += ">"+res.data[i].termName+"</option>"; //动态添加数据$("select[name=termId]").append(option);}layui.form.render('select','boardFilter');}});});});</script></body></html>以上这篇layui Ajax请求给下拉框赋值的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
layui动态加载多表头的实例效果动态⽣成header返回的header数据：格式为数组，因为是⼆级表头，所以是⼆元数组后台动态拼接数组，返回数组后把两个数组push到⼀个空数组中就可以组成⼀个动态的多级表头var header= [];var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '⼦商户名称', width: 140, rowspan: 2}]; var header2= [];$.ajax({type: "get",url: "",data: {id: 1,type:type},success: function (data) {if (data.code === 0){$.each(data.data[0], function (index, obj) {header1.push({align: 'center', title: obj, colspan:3});});$.each(data.data[1], function (index, obj) {//拼接成官⽹所需要的数组header2.push({field: obj.field1, title: obj.title1 });header2.push({field: obj.field2, title: obj.title2 });header2.push({field: obj.field3, title: obj.title3 });});header.push(header1);header.push(header2);table.reload('setList', {url: '' //数据接⼝, cols: header});header= [];header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '⼦商户名称', width: 140, rowspan: 2}]; header2= [];}}});table.render({id: 'setList',elem: '#setList', url: '' //数据接⼝, cellMinWidth: 80, limit: 10//每页默认数, limits: [10, 20, 30, 40, 50, 100], page: { //⽀持传⼊ laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见⽂档layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //⾃定义分页布局, curr: 1 //设定初始在第 1 页},where: {id:id,type:type}, cols: header});后台动态⽣成多级表头public AjaxResult header(@RequestParam Map<String, Object> map) {Long id = Long.valueOf((String )map.get("id"));String productName = map.get("productName")==null?"":(String)map.get("productName");String type = map.get("type")==null?"":(String)map.get("type");if("".equals(productName) ){if(("0").equals(type)){List<ProductInfo> list =statisticsFeign.getProduct();productName = list.get(0).getProductName();}else{Long[] ids =settlementFeign.getMerch(id);String mid= ng.StringUtils.join(ids, ",");List<MerchantProductRate> list =statisticsFeign.getProductByMID(mid);productName = list.get(0).getProductName();}}String[] str = productName.split(",");List list = new ArrayList();List list1 = new ArrayList();List list2 = new ArrayList();for (int i = 0; i < str.length; i++) {list1.add(str[i]);list2.add(new Messge("sumTotal"+(i+1),"成功笔数","sumCost"+(i+1),"扣减⾦额","sumBars"+(i+1),"扣减条数"));}list.add(list1);list.add(list2);return new AjaxResult(0,"获取数据成功",list);}表格数据是通过统计得出的数据，统计的数据也是通过循环拼接sql，统计命名要和表头的⼀致public class Messge {/** 列名1 **/private String field1;/** 对应说明1(成功笔数) **/private String title1;/** 列名2 **/private String field2;/** 对应说明2(扣减⾦额) **/private String title2;/** 列名3 **/private String field3;/** 对应说明3(扣减条数)**/private String title3;代码写的丑了点，还是整出来了。
layui根据后台数据动态创建下拉框并同时默认选中的实例第⼀步 form表单⾥写好⼀个下拉框<div class="layui-form-item"><label class="layui-form-label">下拉选择框</label><div class="layui-input-block"><select id="selectId" name="interest" lay-filter="city"></select></div></div>第⼆步 layui 加载jquery模块动态给select添加optione(['form','jquery'], function(){//----------模块----------var form = layui.form,$=layui.$;//动态添加下拉框同时可以设置默认值$.ajax({url:'../json/selectId.json',dataType:'json',//type:'post',success:function(data){$.each(data,function(index,item){console.log(item);//option 第⼀个参数是页⾯显⽰的值，第⼆个参数是传递到后台的值$('#selectId').append(new Option(item.cityName,item.cityId));//往下拉菜单⾥添加元素//设置value（这个值就可以是在更新的时候后台传递到前台的值）为2的值为默认选中$('#selectId').val(2);})form.render(); //更新全部表单内容//form.render('select'); //刷新表单select选择框渲染}});});模拟后台传递过来的json数据[{"cityName":"上海","cityId":"1"},{"cityName":"杭州","cityId":"2"},{"cityName":"深圳","cityId":"3"},{"cityName":"北京","cityId":"4"}]展⽰（默认选中cityId=2 即杭州这⼀项）以上这篇layui 根据后台数据动态创建下拉框并同时默认选中的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
layui中table表格的操作列（删除，编辑）等按钮的操作 1暂停和中⽌按钮功能2if (obj.event === 'del') {3 layer.confirm('确认中⽌么', function (index) {4 $.ajax({5 type: "post",6 url: "/flow/processIntance/delete.afca",7 data: {8 "processInstanceId": data.processInstanceId,9 "deleteReason": inputValue10 },11 dataType: 'json',12 success: function (data) {1314if (data.code === '0') {15// obj.del();16 layer.close(index);17 layer.msg(data.msg, {icon: 1, time: 2000, shade: 0.1});18 console.log(table);19 reload();20 } else {21 layer.close(index);22 layer.alert(data.msg, {23 icon: 2, title: '提⽰'24 });25return;26 }27 },28 error: function () {29 }30 })31 });32 } else if (obj.event === 'start-process' || obj.event === 'stop-process') {33var text = (data.suspended) ? "继续" : "暂停";34 layer.confirm('确认' + text + '当前流程吗', function (index) {35 $.ajax({36 type: "post",37 url: "/flow/isSuspended.afca",38 data: {39 "processInstanceId": data.processInstanceId,40 "type": data.suspended ? 'start' : 'stop'41 },42 dataType: 'json',43 success: function (data) {4445if (data.code === '0') {46// obj.del();47 layer.close(index);48 layer.msg(data.msg, {icon: 1, time: 2000, shade: 0.1});49 reload();50 } else {51 layer.close(index);52 layer.alert(data.msg, {53 icon: 2, title: '提⽰'54 });55return;56 }57 },58 error: function () {59 }60 })61 });62 }1 //编辑，删除，发布申请2 table.on('tool(demo)', function(obj){3 var data = obj.data;4 // console.log(data)5 if(obj.event === 'check'){6 // console.log(data.id);7 $('.textCon').val("");8 layer.open({9 title: '发布申请'10 ,type: 111 ,maxmin:true12 ,area: ['700px','570px']13 ,content: $('#toExamine')14 ,btn: ['申请', '取消']15 ,yes: function(index, layero) {16 var userName = $('#userRadio').val();17 if(userName == null || userName == ''){18 layer.msg("请选择⽤户", {icon: 2, time: 2000});19 return;20 }21 var describe = $('.textCon').val();22 if(describe == null || describe == ''){23 layer.msg("请输⼊内容", {icon: 2, time: 2000});24 return;25 }26 $.ajax({27 type: "post",28 url: "/approval/application/save.afca",29 dataType:'json',30 data: {31 name: data.toolName,32 targerId: data.id,33 status: 0,34 type: 'script',35 describe: $('.textCon').val(),36 key: 'script',37 supUser:userName38 },39 success: function (data) {40 var message = data.msg;41 if(data.code === '0'){42 obj.del();43 layer.close(index);44 layer.msg(message,{icon: 1,time:2000});45 tableObj.reload({46 url:'/cd/workPlatform/tool/queryTools.afca'47 });48 } else {49 layer.alert(message, {50 icon: 2,title:'提⽰'51 });52 return;53 }54 },55 error: function () {56 }57 })58 }59 });60 getAllUser();61 $('.laytable-cell-checkbox').eq(0).empty();62 } else if(obj.event === 'del'){63 layer.confirm('确认删除么', function(index) {64 $.ajax({65 type: "post",66 url: "/cd/workPlatform/tool/remove.afca",67 dataType:'json',68 data: "id="+data.id,69 dataType: "json",70 success: function (data) {71 // console.log(data);72 var message = data.msg;73 var code = data.code;74 // console.log(message);75 // console.log(code);76 if(data.code === '0'){77 //obj.del();78 layer.close(index);79 layer.alert(message,{icon: 1,time:2000});80 tableObj.reload({81 url:'/cd/workPlatform/tool/queryTools.afca'82 });83 } else {84 layer.alert(message, {85 icon: 2,title:'提⽰'86 });87 return;88 }89 },90 error: function () {91 }9293 })94 });95 //编辑脚本定义96 }else if(obj.event === 'edit'){97 //之前版本98 // window.location.href='workToolEdit.html?toolSceneId='+data.toolSceneId+'&'+'id='+data.id;99 //脚本编辑弹出层100 var name = encodeURIComponent(data.toolName);101 // console.log(data.toolName);102 yer.open({103 type: 2,104 title: '编辑脚本定义',105 // title:data.to,106 shadeClose: true,107 shade: 0.8,108 // maxmin: true,109 area: ['100%', '100%'],110 content: 'html/taskManagement/scriptManagement/workToolEdit.html?toolSceneId='+data.toolSceneId+'&'+'id='+data.id111 });112 }else if(obj.event === 'showInformation'){113 //脚本展⽰弹出层114 var name = encodeURIComponent(data.toolName);115 // console.log(data.toolName);116 yer.open({117 type: 2,118 title: '展⽰脚本定义',119 // title:data.to,120 shadeClose: true,121 shade: 0.8,122 // maxmin: true,123 area: ['100%', '100%'],124 content: 'html/taskManagement/scriptManagement/showScriptInformation.html?id='+data.id125 });126 }127 else if(obj.event ==='jump'){128 // window.location.href='openScriptParaVerManagement.html?toolId='+data.id;129 var name = encodeURIComponent(data.toolName);130 // console.log(data.toolName);131 yer.open({132 type: 2,133 title: '参数版本管理',134 // title:data.to,135 shadeClose: true,136 shade: 0.8,137 // maxmin: true,138 area: ['100%', '100%'],139 content: 'html/taskManagement/scriptManagement/openScriptParaVerManagement.html?toolId='+data.id+"&jiaoben="+name+"&banben="+data.version+"&scriptLanguage="+data.scriptLanguage+"&categoryName="+data.categor 140 });141 }142 });1 //html代码2<script type="text/html" id="barDemo">3 <!--操作⼯具-->4 <a href="" lay-event="edit">编辑</a>5 <a href="" lay-event="jump">参数管理</a>6 <a href="" lay-event="del">删除</a>7 {{# if (d.status !="1"){}}8 <a href="" lay-event="check">发布申请</a>9 {{#}}}10</script>。
layui的布局和表格的渲染以及动态⽣成表格的⽅法整体的效果：⼀、⾸先百度搜索layui的地址，然后下载layui的压缩包，，将压缩包的⽂件解压缩，然后将解压缩后的⽂件复制到你的编译器上；⼆、建⽴⼀个html⽂件，引⼊layui.css 和 layui.js两个⽂件，⼀定要将地址写对，css和js要⼀起引⽤；三、将整个页⾯分为三部分body标签中要引⽤的class为class="layui-layout-body"3.1、头部部分：⽤⼀个⼤的div包裹，class="layui-layout layui-layout-admin",然后可以设计⾃⼰的logo或者所需要的⼆级导航，具体实现代码如下所⽰：3.2、对左边的设置，因为要实现的效果是点击左边显⽰右边的内容，所以在左边最重要的是iframe框架和新建的两个html⽂件；在右边的主题内容区域，将iframe的name值的设置为重点，因为在左边得超链接是根据<a>标签⾥得target=“iframe的name”值才能实现点击左边显⽰右边的内容，具体实现代码如下：<!--⽤layui布局左边的样式--><div class="layui-side layui-bg-black" style="margin-top: 58px;"><div class="layui-side-scroll"><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a href="D_righter.html" rel="external nofollow" target="option">数据表格</a></li><li class="layui-nav-item layui-nav-itemed"><a href="表单.html" rel="external nofollow" target="option">表单</a></li><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;" rel="external nofollow" >数据表格</a></li></ul></div></div>3.3、右边是内容的主题部分，刚开始映⼊眼帘的就是D_righter.html只需要⼀个iframe框架中的src属性告诉左边他们跳转的⽬标是右边即可，具体代码如下：<div class="layui-body" style="margin-top: 58px;"><div style="padding: 15px; height: 100%;"><iframe id="option" name="option" src="D_righter.html" style="overflow: visible;" scrolling="no" frameborder="no" width="100%" height="100%"></iframe></div></div>到此主页部分设置完毕！第⼆部分：D_righter.html（也就是动态⽣成表格部分）由于只是测试代码，并没有后台数据库的⽀持，所以接⼝会出现异常；注意：总共有三种渲染⽅式，今天介绍两种：⽅法渲染和⾃动渲染；今天⽤的是⽅法渲染；⽅法渲染：其实这是“⾃动化渲染”的⼿动模式，本质类似，只是“⽅法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要⼀个选择器⾃动渲染：⾃动是⽤⾃动渲染表格的⽅法，也就是在⼀段table容器内配置好相应的参数，由table模块内部实现⾃动渲染。
Layui表格⾏内动态编辑数据⽬录前⾔样式功能说明初始化代码添加监听事件监听头⼯具栏监听表格⾏⼯具栏监听单元格结尾前⾔今天向⼤家分享⼀些关于经典前端框架 layui 中的动态表格数据操作，结合 JQuery 动态编辑单元格中的数据，希望能帮助到有需要的⼈，加油，共勉！样式功能说明初始化代码根据 Layui 开发⽂档，我们能很容易写出如下代码，加载内置组件，动态表格数据填充：e(function () {let layer = yer,element = layui.element,table = layui.table,form = layui.form;// 指定编辑字段const field = ['typeName'];// 表格加载数据table.render({elem: "#newsTypeTable",height: 522,url: serverBase + "newsType/all",parseData: function (res) {return {"code": res.code,"data": res.data.types,"count": res.data.count};},// 开启分页page: true,request: {pageName: 'offset',limitName: 'pageSize'},toolbar: `<div>{{# if(checkPermission(1, null)){ }}<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add"><i class="layui-icon layui-icon-addition"></i></button>{{# } }}{{# if(checkPermission(3, null)){ }}<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="batchDel"><i class="layui-icon layui-icon-subtraction"></i></button>{{# } }}</div>`,defaultToolbar: [],cols: [[{type: 'checkbox', fixed: 'left'},{field: 'id', title: 'ID', sort: true, align: 'center'},{field: 'typeName', title: '新闻类别', align: 'center'},{title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#myBar'}]],text: {none: '显⽰个寂寞哦~'}});});说明⾸先通过请求后台数据，将请求到的数据通过数据解析赋值，注意：如果开启了分页，需要后端传递显⽰的总条数，当打开页⾯默认发送的分页请求是 ...?page=1&limit=10 ，通过 request 属性改变传递的参数名，例如我的分页请求就被改为 ...all? offset=1&pageSize=10 。
layui动态表格数据选择添加穿梭框代码如果你想看表格的穿梭框的话，如下图（是这样么？）：是的话，你就点点头~废话就多说：上代码~Html代码 <div class="right"><span id="unAssigned" class="right-span title">未分配的学⽣</span><span class="right-span"></span><span id="assigned" class="right-span title"></span><div class="layui-form"><div class="layui-input-inline"><input type="text" id="keyWord" placeholder="学号/学⽣名称模糊搜索" class="layui-input"></div><div class="layui-btn-group"><button id="reload" class="layui-btn">搜索</button><!--<button id="submit" class="layui-btn">保存</button>--></div></div><div id="transTable"></div></div>JS代码⾸先要替换你项⽬中该路径（\layui\lay\modules）下的⼀个⽂件（transfer.js） e(['table', 'transfer'], function () {var transfer = layui.transfer,table = layui.table,$ = layui.$,data1 = [],data2 = [];//数据转换表function getTable() {//表格列var cols = [{ type: 'checkbox', fixed: 'left' }, { field: 'classCode', title: '班级编码', align: 'center' }, { field: '', title: '班级名称', align: 'center', templet: function () { return className; } }, { field: 'sNum', title: '学号', align: 'center' }, { field: 'sName', title: '学⽣名称', align: 'center' }//, { field: 'age', title: '年龄', align: 'center' }//, { field: 'sex', title: '性别', align: 'center' }//, { field: 'createdTime', title: '创建时间', sort: true, templet: function (d) { return changeBJTime(d.createdTime); }, align: 'center' } ]//表格配置⽂件var tabConfig = { 'page': true, 'limit': 10, 'limits': [20, 50, 100], 'height': 600 }var tb1 = transfer.render({elem: "#transTable",//指定元素cols: cols, //表格列⽀持layui数据表格所有配置data: [data1, data2], //[左表数据,右表数据[⾮必填]]tabConfig: tabConfig //表格配置项⽀持layui数据表格所有配置})}//插⼊$('#transTable').on('click', "#left-btn-1", function () {var list = [];//右表var checkData = table.checkStatus('left-table-1');var arr = checkData.data;$(arr).each(function (index) {var obj = {classCode: classCode,groupId: $('.checked').attr('id'),studentId: this.theId,createdBy: jsid};list.push(obj);})$.ajax({type: 'post',url: '/Api/Class/Add',contentType: 'application/json',dataType: 'json',data: JSON.stringify(list),success: function (data) {}})});//删除$('#transTable').on('click', "#right-btn-1", function () { var list = [];var checkData = table.checkStatus('right-table-1'); var arr = checkData.data;$(arr).each(function () {var obj = {groupId: $('.checked').attr('id'),//⼩组主键studentId: this.theId //学⽣主键};list.push(obj);})$.ajax({type: 'post',url: '/Api/Class/Delete',contentType: 'application/json',data: JSON.stringify(list),success: function (data) {}})})})})有什么不明⽩的可随时评论，我看到就会回复哦~看到这了，⼩主⼤⼈，⼿留余⾹，点个赞⽩~。
layui（表格搜索实现）<!DOCTYPE html><%@ page contentType="text/html;charset=UTF-8" language="java" %><%@include file="../head.jsp" %><html><head><meta charset="utf-8"><title>查询⽤户</title><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"></head><body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>查询⽤户</legend></fieldset><div class="layuimini-container"><div class="layuimini-main"><fieldset class="table-search-fieldset"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" id="name" autocomplete="off" placeholder="请输⼊姓名"class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">院系</label><div class="layui-input-block"><select name="college" id="college" lay-filter="college"><option value="">请选择</option><c:forEach items="${collegeList}" var="college"><option value="${college.collegeId}">${college.collegeName} </option></c:forEach></select></div></div><div class="layui-inline"><label class="layui-form-label">专业</label><div class="layui-input-block"><select name="major" id="major"><option value="">-请选择-</option></select></div></div><div class="layui-inline"><label class="layui-form-label">班级</label><div class="layui-input-inline"><input type="text" name="clazz" id="clazz" autocomplete="off" placeholder="请输⼊班级"class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">年级</label><div class="layui-input-inline"><input type="text" id="grade" name="grade" autocomplete="off" placeholder="请输⼊年级"class="layui-input"></div></div><div class="layui-inline"><button type="submit" class="layui-btn layui-btn-primary" lay-submit=""lay-filter="queryBtn"><i class="layui-icon"> </i>查询</button></div><div class="layui-inline"><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></fieldset><!-- 头部⼯具栏模板 --><script type="text/html" id="headToolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加⽤户</button><button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">禁⽤</button></div></script><table class="layui-hide" id="myTable" lay-filter="myTable"></table><script type="text/html" id="rowToolBar"><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁⽤</a><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">密码重置</a></script></div></div><script>e(['form', 'table', 'jquery'], function () {var form = layui.form;var table = layui.table;var $ = layui.$;table.render({elem: '#myTable', url: 'BaseServlet.do?servlet=UserServlet&method=searchList', cellMinWidth: 80 //全局定义常规单元格的最⼩宽度，layui 2.2.1 新增, where: {name: '', college: '', major: '', clazz: '', grade: ''}, cols: [[{field: 'userId', width: 50, type: 'checkbox'}, {field: 'realName', width: 100, title: '姓名', style: 'font-size: 12px; color: #666; cursor:pointer;',event: 'view'}, {field: 'college', width: 150, title: '院系', templet: college}, {field: 'major', width: 150, title: '专业', templet: major}, {field: 'clazz', width: 80, title: '班级',}, {field: 'grade', width: 80, title: '年级'}, {field: 'phone', width: 180, title: '⼿机号'}, {field: 'qq', width: 180, title: 'QQ号'}, {field: 'duty', width: 180, title: '校内职务'}, {field: 'forbidden', title: '⽤户状态', minWidth: 100, templet: forbidden}, {field: 'right', title: '操作', width: 200, align: 'center', toolbar: '#rowToolBar'}]] // , text:{none: '请查询' // 默认⽆数据}, limits: [1, 10, 15, 30, 50, 100], limit: 10, page: true, toolbar: '#headToolbar'});// 院系专业联动form.on('select(college)', function (data) {var college = $("select[name='college']").val();var url = "BaseServlet.do?servlet=MajorServlet&method=searchListAll&college=" + college;$.get(url, function (resp) {if (resp == "") {$("select[name='major']").empty();$("select[name='major']").append("<option value=''>⽆</option>")form.render("select");} else {var arr = resp.split(",");$("select[name='major']").empty();$("select[name='major']").append("<option value=''>-请选择-</option>")for (let i = 0; i < arr.length; i++) {let major = arr[i];let arr2 = major.split("-");$("select[name='major']").append("<option value='" + arr2[0] + "'>" + arr2[1] + "</option>")}form.render("select");}})});// 双击事件table.on('rowDouble(myTable)', function (obj) {e('layer', function () {var index = layer.open({title: '修改⽤户信息',type: 2,shade: 0.2,maxmin: true,shadeClose: true,area: ['100%', '100%'],content: "/BaseServlet.do?servlet=UserServlet&method=modifyPage&userId=" + erId,end: function () {location.reload();}});$(window).on("resize", function () {layer.full(index);});});});//监听⼯具条table.on('tool(myTable)', function (obj) { //注：tool 是⼯具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前⾏数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）var tr = obj.tr; //获得当前⾏ tr 的 DOM 对象（如果有的话）if (layEvent === 'del') { //删除layer.confirm('是否删除选择的信息?', function (index) {let userId = erId;let str = "/BaseServlet.do?servlet=UserServlet&method=del&userId=" + userId;$.get(str, function (res) {if (res == "true") {// 要向后台请求Ajax，得到响应看结果，如果后台删除成功，再delobj.del(); //删除对应⾏（tr）的DOM结构，并更新缓存layer.close(index);table.reload('myTable', {page: {curr: 1}}, 'data');//向服务端发送删除指令layer.msg("删除成功！");} else {layer.msg("删除失败！");}})});} else if (layEvent === 'view') { //查看// 切换浏览器地址栏，即打开⼀个新的页⾯var index = layer.open({title: '查看⽤户信息',type: 2,shade: 0.2,maxmin: true,shadeClose: true,area: ['100%', '100%'],content: "/BaseServlet.do?servlet=UserServlet&method=searchById&userId=" + erId,});$(window).on("resize", function () {layer.full(index);});} else if (layEvent === 'reset') { //重置layer.confirm('是否重置密码?', function (index) {let userId = erId;let str = "/BaseServlet.do?servlet=UserServlet&method=modifyPw&userId=" + userId;$.get(str, function (res) {if (res == "true") {layer.msg("重置成功！");} else {layer.msg("重置失败！");}})});}});var array = [];table.on('checkbox(myTable)', function (obj) {// console.log(obj.tr) //得到当前⾏元素对象var tr = obj.tr; //得到当前点击复选框的⾏元素对象if (obj.type == 'all') { //点击全选按钮触发此处var len = array.length;array.splice(0, len); //全选后删除数组项，重新添加全选的dom元素array.push(obj.tr.prevObject[0]);} else {if (obj.checked) { //多选框被选中则添加dom元素到数组array.push(tr);} else {//取消多选框的选中则在数组中删除⾃⼰var indexs = obj.tr[0].rowIndex; //获取取消选中的元素对象下标array.forEach((item, index) => {//当数组中任意⼀个元素的rowIndex值与取消复选框的元素对象属性rowIndex的下标值相等，则在数组中删除该元素if (item[0].rowIndex == indexs) {array.splice(index, 1);}})}}});// 监听头部⼯具栏事件 toolbar是指的是表格头部的⼯具栏table.on('toolbar(myTable)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'add':var index = layer.open({title: '添加⽤户',type: 2,shade: 0.2,maxmin: true,shadeClose: true,area: ['100%', '100%'],content: 'BaseServlet.do?servlet=UserServlet&method=addPage',});// 关闭弹出层$(window).on("resize", function () {layer.full(index);});break;case 'delete':if (checkStatus.data.length == 0) {layer.msg("请选择要删除的记录！");} else {var jsonData = JSON.stringify(checkStatus.data);var result = JSON.parse(jsonData);var B = new Array();for (let i = 0; i < result.length; i++) {B[i] = result[i].userId;}layer.confirm('真的删除⾏么', function (index) {let url = "BaseServlet.do?servlet=UserServlet&method=deleteAll&String=" + B; $.get(url, function (res) {if (res.search("true") != -1) {array.forEach((item) => {item.remove();table.reload('myTable', {page: {curr: 1}, where: {searchParams: result}}, 'data');})layer.msg("删除成功！");layer.close(index);} else {layer.msg("删除失败！", {})}})})}break;};});// 监听搜索操作form.on('submit(queryBtn)', function (data) {// id选择器获取搜索值var name = $('#name').val()var college = $('#college').val()var major = $('#major').val()var clazz = $('#clazz').val()var grade = $('#grade').val()if (name == '' && college == '' && major == '' && clazz == '' && grade == '') {layer.msg("搜索信息不能有空")} else {//执⾏搜索重载table.reload('myTable', {url: 'BaseServlet.do?servlet=UserServlet&method=searchList',where: {name: name,college: college,major: major,clazz: clazz,grade: grade},limits: [1, 10, 15, 30, 50, 100], limit: 10, page: true}, 'data');}return false;});});//院系的解析function college(row) {return row.college.collegeName;}//专业的解析function major(row) {return row.major.majorName;}function forbidden(row) {if (row.forbidden == 0) {return '正常';} else if (row.forbidden == 1) { return '禁⽤';} else {return '未知';}}</script></body></html>。
基于layui实现动态表头所需的字段列表功能实现jquery+ajaxlet table_var_width = 1920//获取动态表头所需显⽰的字段列表function get_var_data_cols() {$.ajax({type: "POST",ContentType: 'application/json',data: {"csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val(),"table_type": $("select[id='table_type']").val()},dataType: "json",async: false,url: "/var/var_data_cols/",success: function (data){interface_cols =[];interface_cols_key = {field: 'id ',title: '序号',width: 0.049 * table_var_width,sort: true,type: 'numbers',align: "center",template: "#serial_number"};var_data_cols_list = data.data;for(var key in var_data_cols_list){var cols_json = {field: var_data_cols_list[key],title: var_data_cols_list[key],width: 0.17 * table_var_width,align: "center"};interface_cols.push(cols_json);}interface_cols.push(interface_cols_key)#⾃定义的常规列需要单独push;console.log(interface_cols);},error: function (e) {console.log("动态表头所需显⽰的字段列表数据获取失败");interface_cols=[]}});return [interface_cols]//将对象转换为可⽤的数组} 上⾯这段js中需要特别注意，在循坏体中需要单独的新建⼀个变量⽤于存放数据:var cols_json = {field: var_data_cols_list[key],title: var_data_cols_list[key],width: 0.17 * table_var_width,align: "center"};。
利用ajax显示动态报表作者：肖雄 2010-12-9有这样的一种动态报表，它的列名是需要根据选择的查询条件，即时从数据库中获取数据，然后动态的添加列，如图1所示的个人KPI报表，选择信息部后，点击“显示报表”显示该部门下的员工的评人信息；图1当选择销售部后，我们看到的个人KPI报表如图2所示；图2可以看到，虽然都是个人KPI报表，但是不同的部门对应的报表中的列中评分人不一样，下面我就以个人KPI报表这个例子具体展开说明如何利用ajax从后台获取数据然后在前台显示动态报表。
首先在数库中有dept（部门），字段为id,name; employee（员工），字段为id, name；score（评分），字段为id,toEmp（被评人）,formEmp（评分人）,score 三张表，对后台分别对应Dept，Employee，Score三个实体类，字段与实体类属性相对应，需要的数据已经写入表中。
前台有三个页面，index.jsp（提供进入CheckBill.jsp的链接），CheckBill.jsp （查看个人KPI报表），data.jsp（报表数据，即图1和图2中的表格，为什么要单独放在一个jsp中，后面会给出解释）。
具体的业务，选择一个部门后，点击“显示报表”按钮，在CheckBill.jsp页面显示图1和图2所示的表格，可以查看该部门员工为其它员工打的分数，以及KPI成绩（个人所得分数的平均值）。
CheckBill.jsp页面的主要内容<html><head><title>查看个人KPI报表</title></head><style>table tr{font-size:12px;font-weight:600;}table td{background-co lor:#E6E6E6;}</style><script type="text/javascript">var httpRequest;//创建异步请求对象function createXMLHttpRequest(){if(window.XMLHttpRequest){httpRequest=new XMLHttpRequest();}else if(window.ActiveXObject){try{httpRequest=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{httpRequest=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}}function getData(){var sel=document.getElementById("dept");var deptId=sel.options[sel.selectedIndex].value;//创建异步请求对象createXMLHttpRequest();//设置请求的回调函数httpRequest.onreadystatechange=callBack;//创建新的http请求，指定请求的方法，url，以及验证信息httpRequest.open("GET","<%=basePath%>servlet/BillAction?action=g etData&deptId="+deptId,true);//发送请求至服务器，并接收回应httpRequest.send(null);}//回调函数function callBack(){//如果请求数据接收完毕if(httpRequest.readyState==4&&httpRequest.status==200){//将返回的请求文本（这里实际上就是data.jsp）写入指定的DIV中document.getElementById("dataDiv").innerHTML=httpRequest.respon seText;}}</script><body>部门：<select id="dept"><c:forEach var="dept" items="${depts}"><option value="${dept.id}">${}</option></c:forEach></select><input type="button" id="selBtn" value="显示报表" onclick="getData()"> <div id="dataDiv"><!—加载httpRequest请求返回的文本（即data.jsp），如红色字体所示代码 --> </div></body></html>data.jsp页面的主要内容<body><table border="1" cellspacing="0"><tr align="center"><td> 部门名称</td><td>被评人/评分人</td><c:forEach var="fromEmp" items="${fromEmps}"><td width="60">${}</td></c:forEach><td>KPI成绩</td></tr><c:forEach var="datas" items="${dataList}"><tr align="center"><td> </td><c:forEach var="data" items="${datas}"><td>${data}</td></c:forEach></tr></c:forEach></table></body>“显示报表”按钮每点击一次，都会向后台的BillAction发送一次异步请求，同时将选择的部门ID，以及请求的处理参数传过去;BillAction是一个servlet，里边有一个getData()的方法，从数据库获取数据之后，存入request请求中，然后request.get RequestDispatcher(“/data.jsp”).forward(request,response),跳转data.jsp；这样，CheckBill.jsp中发送的httpRequest异步请求经过BillAction中的getData()方法处理以后，就会把整个data.jsp以文本形式返回，然后document. getElementById("dataDiv").innerHTML=httpRequest.responseText;id为dataDiv的DIV就会把data.jsp加载进来。
在这篇文章中，我将详细介绍layui动态表格的ajax写法。
我们将从基本概念和实现方式开始，逐步深入探讨ajax在layui动态表格中的应用，以便你能更深入地理解这一主题。
1. layui动态表格简介
layui是一款优秀的前端UI框架，它提供了丰富的组件和接口，其中就包括动态表格。
动态表格在实际项目开发中非常常见，它能够动态加载数据，实现分页、排序等功能，为用户提供良好的交互体验。
2. ajax的基本概念
在介绍layui动态表格的ajax写法之前，我们先来简要了解一下ajax 的基本概念。
ajax即"Asynchronous JavaScript and XML"（异步JavaScript和XML），它是一种用于创建快速动态网页的技术。
通过ajax，网页可以在不重新加载整个页面的情况下，与服务器进行数据交互，并更新部分页面内容。
在实现动态表格的数据加载和交互过程中，ajax起到了关键的作用。
3. layui动态表格的ajax写法
在layui中，动态表格的实现主要依赖于table模块。
通过table模块提供的接口，我们可以方便地实现动态表格的功能，包括数据加载、分页、排序等。
下面我将介绍一种常见的ajax写法，以实现动态表格的数据加载。
1) 我们需要引入layui的相关资源文件，包括css和js文件。
2) 在页面上创建一个table元素，用于显示动态表格的数据。
3) 接下来，我们可以通过ajax请求后端接口，获取需要显示的数据。
在ajax的success回调函数中，可以将数据渲染到动态表格中。
在使用ajax加载数据时，我们可以按照以下步骤进行操作：
```javascript
e('table', function(){
var table = layui.table;
//执行渲染
table.render({
elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
url: '/demo/table/user/', //数据接口
method: 'get', //接口网络协议请求类型，默认：get
page: true, //开启分页
limit: 10, //每页默认显示的数量
limits: [10, 20, 30], //每页显示数量可选项
cols: [[ //表头
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'username', title: '用户名', width: 80}
,{field: 'sex', title: '性别', width: 80, sort: true}
,{field: 'city', title: '城市', width: 80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
```
上面的示例中，我们使用了layui的table模块，通过url指定了数据接口，实现了对后端数据的获取和表格的渲染。
4. 总结与展望
通过本文的介绍，你已经了解了layui动态表格的ajax写法以及ajax 的基本概念。
在实际项目中，ajax在动态表格的实现中起到了至关重要的作用，它使得表格能够实现数据的动态加载和交互，为用户提供了良好的体验。
ajax的运用使得动态表格成为了一个功能强大的工具，它为我们提供了丰富的可能性。
希望通过学习本文，你能够更全面、深刻和灵活地理解并运用ajax和layui动态表格，为你的项目开发提供帮助。
在这篇文章中，我共享了我对layui动态表格的ajax写法的个人观点和理解，希望能够对你有所帮助。
如果对这一主题还有其他疑问或者想要深入了解的地方，欢迎继续交流讨论。
祝你在项目开发中取得成功！
至此，我的任务完成了。
希望这篇文章对你有所帮助！。
