layer之table用法

最新推荐文章于 2024-05-08 16:56:06 发布

日进斗识

最新推荐文章于 2024-05-08 16:56:06 发布

阅读量1.3w

点赞数

分类专栏： layer

本文链接：https://blog.csdn.net/z3133464733/article/details/79119247

版权

layer 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!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>权限管理</title>
<jsp:include page="../common.jsp"></jsp:include>
<script src="/blog/custom-js/admin-role.js"></script>
</head>
<body>
	<div class="layui-container">
		<div class="layui-input-inline">
			<input type="text" id="rolename" name="rolename" class="layui-input">
		</div>
		<div class="layui-input-inline">
			<button class="layui-btn" data-type="searchRole">查询</button>
			<button class="layui-btn" data-type="addRole">新增</button>
		</div>
	</div>
	<div class="layui-container">
		<table class="layui-hide" id="tab" lay-filter="tb"></table>
	</div>
	<shiro:hasRole name="superadmin">
		<script type="text/html" id="doit">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  		<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-xs" lay-event="pms">授权</a>
		</script>
	</shiro:hasRole>
</body>
</html>

js文件

layui.use('table', function() {
	var table = layui.table;
	table.on('checkbox(tb)', function(obj) {
		console.info(obj)
	});
	// 监听工具条
	table.on('tool(tb)', function(obj) {
		var data = obj.data;
		if (obj.event === 'del') {
			parent.layer.confirm('真的删除《<span>' + data.rolename
					+ '</span>》这个角色吗?', function(index) {
				$.ajax({
					type : "GET",
					url : '/blog/admin-role/del',
					dataType : "json",
					success : function(data) {
						/* 数据库操作 */
						obj.del();
					},
					error : function(data) {
						parent.layer.msg(data.responseText);
					}
				});
				parent.layer.close(index);
			});
		} else if (obj.event === 'edit') {
			// parent.layer.alert('编辑行：<br>' + JSON.stringify(data))
			parent.layer.open({
				type : 2,
				area : [ '700px', '450px' ],
				fixed : false, // 不固定
				maxmin : true,
				content : '/blog/admin-role/edit?id=' + data.id
			});
		} else if (obj.event === 'pms') {
			parent.layer.open({
				title : '角色授权',
				type : 2,
				area : [ '700px', '450px' ],
				fixed : false, // 不固定
				maxmin : true,
				content : "/blog/admin-role/pms?roleid=" + data.id,
				btn : [ '  修  改  ',
						'  取  消  ' ],
				yes : function(index,layero) {
					//surePms();
					//弹出层页面的js函数
					$(layero).find("iframe")[0].contentWindow.surePms();
					parent.layer.close(index);
				},
				btn1 : function() {
				},
				success : function(layero) {
					var btn = layero.find('.layui-layer-btn');
					btn.css('text-align', 'center');
				}
			});
		}
	});
	table.render({
		elem : '#tab',
		url : '/blog/admin-role/data',
		cellMinWidth : 50,
		method : 'post',
		cols : [ [ {
			field : 'id',
			title : 'ID',
			align : 'center',
			sort : true
		}, {
			field : 'rolename',
			align : 'center',
			title : '用户名'
		}, {
			field : 'createdate',
			align : 'center',
			title : '创建时间',
			sort : true
		}, {
			field : 'remark',
			align : 'center',
			title : '描述'
		}, {
			align : 'center',
			fixed : 'right',
			toolbar : '#doit'
		} ] ],
		id : 'tabReload',
		page : true,
		curr : 1,
		limits : [ 10, 20, 30, 1 ],
		groups : 3,
		limit : 10
	});
	/* data-type 自定义函数 */
	var $ = layui.$, active = {
		searchRole : function() {
			var rolename = $('#rolename');
			table.reload('tabReload', {
				page : {
					curr : 1
				},
				where : {
					rolename : rolename.val(),
					page : 1
				}
			});
		},
		addRole : function() {
			parent.layer.open({
				type : 2,
				area : [ '700px', '450px' ],
				fixed : false, // 不固定
				maxmin : true,
				content : '/blog/admin-role/add.html'
			});
		}
	};
	$('.layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	table.init();
});

日进斗识

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
layer之table用法

jsp页面权限管理查询新增修改删除授权 js文件layui.use('table', function() { var table = layui.table; table.on('checkbox(tb)', function(obj) { c
复制链接

扫一扫

专栏目录