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

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')


  		}

  • 10
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
要实现这个功能,需要结合 layuitable 组件以及右键菜单插件。以下是实现的步骤: 1. 引入 layui 和右键菜单插件的 js 和 css 文件,具体可以在 layui 官网上找到。 2. 在 table 的配置项中加入 `contextmenu: true`,开启右键菜单功能。 3. 给 table 绑定 `contextmenu` 事件,在事件处理函数中阻止默认的右键菜单事件,然后根据点击的行和列获取对应的数据,将菜单 div 显示在指定位置。 4. 给菜单选项绑定点击事件,分别触发修改和作废的处理函数,处理函数中可以通过获取选中行的数据来进行相应的操作。 下面是一个示例代码,仅供参考: ```javascript layui.use(['table', 'layer', 'jquery', 'contextMenu'], function(){ var table = layui.table; var layer = layui.layer; var $ = layui.jquery; var contextMenu = layui.contextMenu; // 定义表格数据 var data = [ {id: 1, name: '张三', age: 20, sex: '男'}, {id: 2, name: '李四', age: 22, sex: '女'}, {id: 3, name: '王五', age: 25, sex: '男'} ]; // 渲染表格 table.render({ elem: '#demo', data: data, cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {field: 'sex', title: '性别'} ]], contextmenu: true // 开启右键菜单 }); // 绑定右键菜单事件 $('#demo .layui-table-body').on('contextmenu', 'tr', function(e){ e.preventDefault(); // 阻止默认的右键菜单事件 var data = table.cache.demo[this.dataset.index]; // 获取当前行的数据 var menuHtml = '<ul class="layui-context-menu">' + '<li data-type="edit">修改</li>' + '<li data-type="delete">作废</li>' + '</ul>'; var $menu = $(menuHtml).appendTo('body'); // 将菜单 div 显示在指定位置 $menu.css({top: e.clientY, left: e.clientX}); // 绑定菜单选项点击事件 $menu.find('li').on('click', function(){ var type = $(this).data('type'); switch(type){ case 'edit': edit(data); break; case 'delete': del(data); break; } $menu.remove(); // 移除菜单 div }); // 点击页面其他位置,隐藏菜单 div $(document).one('click', function(){ $menu.remove(); }); }); // 修改处理函数 function edit(data){ layer.open({ type: 1, title: '修改', content: '这里是修改表单', area: ['500px', '300px'], btn: ['保存', '取消'], yes: function(index, layero){ // 获取表单数据,发送请求进行修改操作 layer.close(index); } }); } // 作废处理函数 function del(data){ layer.confirm('确定要作废吗?', function(index){ // 发送请求进行作废操作 layer.close(index); }); } }); ``` 需要注意的是,这里使用的是 layui 的右键菜单插件,不同的插件可能有不同的使用方法,具体请参考对应插件的文档。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值