JQGrid 备忘

来源：互联网发布：淘宝商城分销平台编辑：程序博客网时间：2024/04/24 19:59
</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>
0 0