layer之table用法

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>









	

		

			
		
		

			查询
			新增
		
	
	

		
	
	
		
	

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('真的删除《' + data.rolename
					+ '》这个角色吗?', 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('编辑行：
' + 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();
});