JQGrid 备忘

最新推荐文章于 2017-11-15 12:55:51 发布

hi_kevin

最新推荐文章于 2017-11-15 12:55:51 发布

阅读量774

点赞数

分类专栏： jquery插件文章标签： jgqrid

jquery插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

</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 οnclick="echoSelRow()">当前行ID</button>
		<button οnclick="getContact()">选中行当前姓名</button>
		<button οnclick="addContact()">添加行</button>
		<button οnclick="updateContact()">修改选中行</button>
		<button οnclick="deleteContact()">删除选中行</button>
		<button οnclick="changeGridOptions()">改变Grid选项</button>
		<button οnclick="resetWidth()">改变Grid宽度</button>
	</div>
	<div>
		<button οnclick="selectRow()">选中第二行</button>
		<button οnclick="updateCell(2,'userName','test')">修改第二行中的姓名列</button>
		<button οnclick="getCell(2,'userName')">获取第二行姓名</button>
	</div>
</body>
</html>

hi_kevin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQGrid 备忘

jqgrad page $(function() { $("#gridTable").jqGrid({ url : "${basePath}/jqgridlist", contentType : 'application/json', mtype : "post", datatype : 'json', height : "auto", col
复制链接

扫一扫