LayUI使用--单击tabel数据表格操作，单击弹出层，弹出层表单动态获取table单条数据

最新推荐文章于 2024-06-04 17:34:22 发布

铁汉柔情li

最新推荐文章于 2024-06-04 17:34:22 发布

阅读量2.6w

点赞数 10

分类专栏：前端 layui 文章标签： layui table数据操作、弹窗前端

本文链接：https://blog.csdn.net/qq_37306041/article/details/80410835

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

layui

4 篇文章 0 订阅

订阅专栏

1.页面基本元素

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<%@ taglib uri="/priveliege"  prefix="privilege" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格操作 - layui</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/src/css/layui.css">
<style>
body{padding: 20px; /*overflow-y: scroll;*/}
</style>
</head>
<body>
	<table id="userTable" lay-filter="test"></table>

	<script type="text/html" id="barDemo">
  		<div>
		<privilege:operation operationId="10004"  clazz="layui-btn layui-btn-xs" onClick="updateUserDialog()"   name="修改"  iconCls="icon-edit" layEvent="edit" ></privilege:operation>
		<privilege:operation operationId="10018" clazz="layui-btn layui-btn-danger layui-btn-xs"  onClick="" name="删除"  iconCls="icon-remove" layEvent="del"></privilege:operation>
		</div>
	</script>

	<script src="${pageContext.request.contextPath}/layui/src/layui.js" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/common/js/jquery-1.12.3.js" charset="utf-8"></script>
	
	<!-- 需要弹出的修改和添加员工界面 -->
	<div class="layui-row" id="popUpdateTest" style="display:none;">
	    <div class="layui-col-md10">
	        <form class="layui-form" lay-filter="formTestFilter" id="addAndUpdateEmployeeForm">
	            <div class="layui-form-item">
	                <label class="layui-form-label">用户名：</label>
	                <div class="layui-input-inline">
	                    <input type="text" name="userName"  class="layui-input">
	                </div>
	                <label class="layui-form-label">密码：</label>
	                <div class="layui-input-inline">
	                	<input type="text" name="password"  class="layui-input">
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <label class="layui-form-label">角色：</label>
	                <div class="layui-input-inline">
	                    <input type="text" name="roleName" class="layui-input">
	                </div>
	                <div class="layui-input-inline">
	                	<button type="button" οnclick="selectRole()" class="layui-btn layui-btn-normal">角色名称</button>
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <label class="layui-form-label">备注：</label>
	                <div class="layui-input-block">
	                    <textarea placeholder="请输入内容" class="layui-textarea" name="userDescription"></textarea>
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <div class="layui-input-block">
	                    <button type="button" class="layui-btn layui-btn-normal">提交</button>
	                </div>
	            </div>
	        </form>
	    </div>
	</div>
</body>

2.渲染table数据表格

<script charset="utf-8" >
	var tableIns;
	var popForm;
	layui.use(["form","table"], function(){
		  var table = layui.table;
		  var form = layui.form;
		  popForm=layui.form;
		  //方法级别渲染
		  //添加返回值，目的为了“重载”。
		  tableIns = table.render({
			    elem: '#userTable'
			        ,height: 450
			        ,url: '${pageContext.request.contextPath}/cacUser/userList.do'
			        ,method: 'post'
			        ,request: {
			       	  	pageName: 'curr' //页码的参数名称，默认：page
			       		,limitName: 'limit' //每页数据量的参数名，默认：limit
			        		} 
			        ,page:true
			        ,id: 'testReload'
			        ,limit: 5
			        ,limits:[5,10,15,20,50]//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
			        ,toolbar: '#toolbarDemo'
			        ,cols: [[
			          {type: 'checkbox', fixed: 'left'}
			          ,{field:'userName', title:'用户名', width:150, edit: 'text'}
			          ,{field:'password', title:'密码', width:150}
			          ,{field:'roleName', title:'用户角色', width:150, edit: 'text', sort: true}
			          ,{field:'userDescription', title:'备注', width:150}
			          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
			        ]]
		  });
		  	//搜索查询
		var $ = layui.$, active = {
		    reload: function(){
		      var userName = $('#userName');
		      var roleId = $('#roleId option:selected');
		      //执行重载
		      //testReload为table 的id标识
		      table.reload('testReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	userName: userName.val()
		            ,roleId: roleId.val()
		        }
		      });
		    }
		};
	  $('.layui-btn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });

3.监听点击事件

//监听工具条
	   table.on('tool(test)', function(obj){
		   var data = obj.data;
		   //formData = data;
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del();
		        layer.close(index); 
		      });
		    } else if(obj.event === 'edit'){
		    	
				layer.open({
		        	//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
		            type:1,
		            title:"修改用户信息",
		            area: ['70%','70%'],
		            content:$("#popUpdateTest").html()
		        });
				setFormValue(data);//动态向表单赋值
		    	
		    }
	  });

4.动态向表单添加数据

function setFormValue(data){
		popForm.val("formTestFilter", {
			  "userName":data.userName 
			 ,"password":data.password
			 ,"roleName":data.roleName
			 ,"userDescription":data.userDescription
			});
  		popForm.render(null,'formTestFilter')


  		}

铁汉柔情li

关注

10
点赞
踩
29

收藏

觉得还不错? 一键收藏
15
评论
LayUI使用--单击tabel数据表格操作，单击弹出层，弹出层表单动态获取table单条数据

1.页面基本元素&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;&lt;%@ tagl
复制链接

扫一扫

专栏目录