</pre><pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isErrorPage="true"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqgrad page</title>
<link rel="stylesheet" type="text/css" href="${basePath}/js/jquery-ui/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" href="${basePath}/js/jqgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="${basePath}/js/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="${basePath}/js/jqgrid/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="${basePath}/js/jqgrid/i18n/grid.locale-cn.js"></script>
<script type="text/javascript">
$(function() {
$("#gridTable").jqGrid({
url : "${basePath}/jqgridlist",
contentType : 'application/json',
mtype : "post",
datatype : 'json',
height : "auto",
colNames : [ '编号', '姓名', '性别', '年龄', '出生日期' ], //表头
colModel : [
//name:这里会根据name去解析jsonReader中root对象的属性，填充cell ,
//index:设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。
{
name : 'userId',
index : 'userId',
align : "center",
sortable : true
}, {
name : 'userName',
index : 'userName',
sortable : true
}, {
name : 'sex',
index : 'sex',
align : "right",
sortable : false
}, {
name : 'age',
index : 'age',
align : "center",
sortable : false
}, {
name : 'birdthday',
index : 'birdthday',
sortable : false,
formatter : "date"
} ],
width : 'auto', //数字 & 'auto','100%'
sortable : false, //这里是排序的默认设置，这些值会根据列表header点击排序时覆盖
sortname : 'userName',
sortorder : 'desc',
rowNum : 5, //每页记录数
rowList : [ 5, 15, 50, 100 ], //每页记录数可选列表
rownumbers : true, //是否显示行号
viewrecords : true,
//显示记录数信息，如果这里设置为false,下面的不会显示 recordtext: "第{0}到{1}条, 共{2}条记录",
//默认显示为{0}-{1} 共{2}条 scroll: false, //滚动翻页，设置为true时翻页栏将不显示
caption : "用户列表",
pager : "#pager",
multiselect : true, //多选框
jsonReader : {
root : "data",
page : "page",
total : "totalPage",
records : "totalCount",
repeatitems : false
},
onSelectAll : function(ids, status) {
},
onSelectRow : function(id, status) {
},
loadComplete : function(dataStr) {
//相对于gridComplete 后执行
},
gridComplete : function(dataStr) {
//相对于loadComplete 先执行
}
});
});
var echoSelRow = function() {
var id = $("#gridTable").jqGrid("getGridParam", "selrow");
alert("当前选中行ID：" + id);
};
var getContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var rowData = $("#gridTable").jqGrid("getRowData", selectedId);
alert("UserName: " + rowData.userName);
};
var addContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
userId : 100,
userName : "wang",
age : "2",
sex : "女",
birdthday : "2012-07-09"
};
if (selectedId) {
$("#gridTable").jqGrid("addRowData", "userId", dataRow, "before",selectedId);
} else {
$("#gridTable").jqGrid("addRowData", "userId", dataRow);
}
};
var updateContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
userId : 100,
userName : "wang",
age : "2",
sex : "女",
birdthday : "2012-07-09"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};
var deleteContact = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
$("#gridTable").jqGrid('delRowData', selectedId);
};
var changeGridOptions = function() {
$("#gridTable").jqGrid("setGridParam", {
rowNum : 50,
page : 16
}).trigger('reloadGrid');
$("#gridTable").jqGrid("setCaption", "Contact List").trigger('reloadGrid');
alert($("#gridTable").jqGrid("getGridParam", "caption"));
alert($("#gridTable").jqGrid("getGridParam", "rowNum"));
};
var resetWidth = function() {
$("#gridTable").jqGrid("setGridWidth", 300, false);
};
var selectRow = function(){
$("#gridTable").jqGrid("setSelection", 2, true);
};
var updateCell = function(row,col,val){
jQuery("#gridTable").setCell(row,col,val,{background:'#ff0000'});
};
var getCell = function(row,col){
var rowObj = jQuery("#gridTable").getRowData(row);
alert(rowObj[col]);
}
</script>
</head>
<body style="margin: 0; padding: 0; background-color: #f5f5f5;">
<div>
<table id="gridTable">
</table>
<div id="pager"></div>
</div>
<div>
<button onclick="echoSelRow()">当前行ID</button>
<button onclick="getContact()">选中行当前姓名</button>
<button onclick="addContact()">添加行</button>
<button onclick="updateContact()">修改选中行</button>
<button onclick="deleteContact()">删除选中行</button>
<button onclick="changeGridOptions()">改变Grid选项</button>
<button onclick="resetWidth()">改变Grid宽度</button>
</div>
<div>
<button onclick="selectRow()">选中第二行</button>
<button onclick="updateCell(2,'userName','test')">修改第二行中的姓名列</button>
<button onclick="getCell(2,'userName')">获取第二行姓名</button>
</div>
</body>
</html>
