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>
 

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 瀏覽器向伺服器提交的資料

{"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 在過濾欄輸入過濾內容