利用ligerUI实现类似数据列表过滤展示，类似JQuery datatable和某些框架的dataGrid

1. 利用的是ligerui的框架，本篇文章使用的ligui版本是LigerUIV1.3.3 ， 网址  <a href="http://www.ligerui.com">www.ligerui.com</a>

2. 如下图展示

3.代码如下

3.1 先导入css 和 js文件

 

<!-- 导入css样式  -->
<link href="${ctx}/js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<%-- <link href="${ctx}/js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /> --%>
<%-- <link href="${ctx}/js/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />  --%>

<!-- 导入js文件 -->
<script src="${ctx}/js/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerMenuBar.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>

3.2 HTML内容

<div class="content">
			<div class="search">
				<label style="font-size: 20px;">姓名：</label>
				<input type="text" id="clientName" style="height: 25px;" />
				<label style="margin-left: 50px; font-size: 20px;">年龄：</label>
				<input type="text" id="clientAge" style="height: 25px;" />
				<input type="button" id="filterBtn" value="过滤">
			</div>
			<div id="maingrid4" style="margin: 0; padding: 0"></div>
</div>

3.3  js框架处理

function onedit(id) {
	alert(id);
};

var usrGrid;

$(function() {
	//初始化表格
	usrGrid = $("#maingrid4").ligerGrid({
		columns : [{
					display : '主键',
					name : 'id',
					align : 'left',
					width : 120,
					hide : true,
					type : 'int'
				}, {
					display : '姓名',
					name : 'name',
					width : 120
				}, {
					display : '年龄',
					name : 'age',
					width : 120
				}, {
					display : 'accountId',
					name : 'accountId',
					width : 120,
					hide : true
				}, {
					display : '账户',
					name : 'accountName',
					width : 120,
					align : 'left'
				}, {
					display : '操作',
					render : function(row) {
						var html = "<a href='#' onclick='onedit(\""
								+ row.name + "\")';>编辑</a>";
						return html;
					}
				}],
		checkbox : true,// 是否支持复选框
		width : 'auto',
		height : '80%',
		rownumbers : true,// 显示行号
		// 发送到服务器的参数
		pageParmName : 'pageNo',// 页号的参数名
		pagesizeParmName : 'pageSize',// 每页数据量的参数名
		pageSize : 10,// 设置每页显示的数据条数

		// 设置接收来自服务器返回的json参数
		record : 'total',// 总页数参数名
		root : 'data',// 当前查询页的数据参数名

		url : top.pt.ctx + '/web/module/user/findUserPageList.action',
		method : 'post',
		// 自己额外需要传递到服务器的参数
		parms : {
			"country" : 'cn',
			"customerId" : 'tgfig_658947'
		}

	});
	//点击过滤按钮后的处理
	$("#filterBtn").click(function() {
		var gridManager = $("#maingrid4").ligerGetGridManager();
		// setOptions可以额外添加发送到服务器的参数
		var clientName = $("#clientName").val();
		var clientAge = $("#clientAge").val();
		gridManager.setOptions({
					parms : [{
								name : 'clientName',
								value : clientName
							}, {
								name : 'clientAge',
								value : clientAge
							}]
				});
		gridManager.loadData(true);
	});
});

3.4 浏览器向服务器提交的数据

3.5  服务器返回的json数据内容如下

{"data":[{"accountId":2001,"accountName":"家人账户","age":23,"college":"555","id":105,"name":"555"},{"accountId":2002,"accountName":"奖学金卡","age":45,"college":"234","id":1001,"name":"Jack"},{"age":21,"college":"369","id":1002,"name":"Tom"},{"age":17,"college":"589","id":1003,"name":"Jane"},{"age":19,"college":"111","id":1004,"name":"111"},{"age":20,"college":"66","id":1006,"name":"666"},{"age":21,"college":"777","id":1007,"name":"777"},{"age":18,"college":"888","id":1008,"name":"888"},{"age":17,"college":"99","id":1009,"name":"999"},{"age":22,"college":"1011","id":1011,"name":"1011"}],"total":12}

3.6 在过滤栏输入过滤内容

   

 3.7 点击过滤按钮后向服务器提交的请求参数