插件jqGrid使用方法总结(一)

JQGrid是一个在jquery基础上做的一个表格控件，主要以ajax的方式和服务器端通信。

在这节主要介绍JQGrid如何建表格和各参数的意思，可以知道jqgrid可以做什么事情。任何插件都是官方的API最权威，而下面就是我写的一个使用

	// -----------------资源表格开始grid-------------------
	jQuery("#resourceTable").jqGrid({<span style="line-height:1.5"></span>  //<span style="line-height:1.5"></span>"#resourceTable"这个是我jsp里面table标签的id
		url : templateRoot+'plat/resource/res_findAll.action',// 请求的URL地址，这个就涉及struts2的知识了，不过也可以用servlet的url
		datatype : "json",// 服务器返回的数据类型，常用的是xml和json两种
		colNames : ['', 'ID','资源名称','资源职能','资源描述','资源路径'], //这里是表格头
		colModel : [{
					name : 'id',			//json对应的名称		
					width : 35,
					hidden : false,               //是否隐藏
					editable : true,
  					sortable :false,
 					align : "center",
					editoptions : {
 					size : 2
					}
 				}, {
 					name : 'id',
					index : 'SYS_RES_ID',
					width : 35,
					align : "center",
					editable : true,
					 sortable :false,
					editoptions : {
					size : 2
 					}
				},  {
					name : 'name',
 					width : 100,
					editable : true,
					 sortable :false,
					align : "center",
					editoptions : {
					size : 25
					}
			  	},{
					 name : 'task',
					width : 35,					
					editable : true,
					align : "center",
 					sortable :false,
					editoptions : {
					size : 100
					}
 				}
				,{
					name : 'descript',				
					 width : 250,
					editable : true,
 					align : "center",					
 					editoptions : {
 					size : 100
					 }
 				},{
 					name : 'url',
					 width : 250,
 					//hidden : true,
					 editable : true,
 					align : "center",
 					sortable :false,
					editoptions : {
					size : 100
					}
				}

		],
		rownumbers : true, //是否显示右
		rowNum : 10, // 默认的每页显示记录条数
		rowList : [10, 20, 30],// 可供用户选择的每页显示记录条数。
		pager : '#pagernav',// 导航条对应的Div标签的ID,注意一定是DIV，不是Table
		sortname : 'SYS_RES_ID',// 默认的查询排序字段
		viewrecords : true,// 定义是否在导航条上显示总的记录数
		autowidth : true,
		sortorder : "asc", // 默认的排序规则
		ondblClickRow : function(rowid) { // 双击行
			alerts(rowid);
		},
		onRightClickRow : function(rowid) {// 右键单击
       //	alerts(jQuery("#resourceTable").rowNum);
		},
		onSelectRow : function(rowid) {// 左键单击
		},
		//caption : "", // 显示表格的表名称
        //		multiselect : true,
//		toolbar : [true, "top"],
		jsonReader : {
			root : 'list',// 注意这里 详细请到官方查看
			total : 'totalPage', // 总页数
			page : 'page', // 页码
			records : 'totalSize', // 总记录数
			id : "id",
			repeatitems : false
			// 注意这个属性的取值 详细请到官方查看
		},
		height : 250
	});
	//导航条 包括分页/增删改查 功能 ,此处不需要它自带的 所以设为false
	//只留刷新按钮
	jQuery("#resourceTable").jqGrid('navGrid', '#pagernav', {
				edit : false,
				add : false,
				del : false,
				search : false
	});

以上的代码效果图如下红框，表中的数据我们下一篇再说


接下来我们来说上面那几个按钮的
这些是按钮的事件。

//在列表上方的工具栏里放增删改查按钮,自定义放增删改查
	//获取父节点
	var currNode = function(){
		var Node = $("#resourceTable").node();
				
		return Node;
	};
	
	$("#t_resourceTable").append("<button  id='addB'>增加资源</button>");
	$('#addB').button({
				text : true,
				icons : {
					// primary: 'ui-icon-seek-start'
				}
	});
	$("#addB").click(function() {
				addWin();
	});
	function addWin() {
		var addOrEditForm = $("#addOrEditForm1");
		var dialogButtonPanel = addOrEditForm.siblings(".ui-dialog-buttonpane");
		addOrEditForm.find("input").removeAttr("disabled").val("");
		addOrEditForm.find("textarea").removeAttr("disabled").val("");
		dialogButtonPanel.find("button:not(:contains('取消'))").hide();
		dialogButtonPanel.find("button:contains('创建')").show();
		// 窗口标题,打开窗口
		addOrEditForm.dialog("option", "title", "添加资源窗口","height","400").dialog("open");
	};
	//--------新增结束----------//
	//--------修改-------//
	$("#t_resourceTable").append("<button  id='editB'>修改资源</button>");
	$('#editB').button({
				text : true,
				icons : {
					// primary: 'ui-icon-seek-start'
				}
	});
	$("#editB").click(function() {
				updateDialog();
	});
	function updateDialog() {
		if (!loadSelectedRowData()) {
			return;
		}
		var addOrEditForm = $("#addOrEditForm1");
		var dialogButtonPanel = addOrEditForm.siblings(".ui-dialog-buttonpane");

		addOrEditForm.find("input").removeAttr("disabled");
		addOrEditForm.find("textarea").removeAttr("disabled").val("");
		dialogButtonPanel.find("button:not(:contains('取消'))").hide();
		dialogButtonPanel.find("button:contains('保存')").show();
		dialogButtonPanel.find("button:contains('创建')").hide();
		addOrEditForm.dialog("option", "title", "修改资源窗口").dialog("open");;

	};
	//--------修改结束---------//
	//---------删除---------//
	$("#t_resourceTable").append("<button  id='deleteB' >删除资源</button>");
	$('#deleteB').button({
				text : true,
				icons : {
					//按钮旁边的图标
					//primary: 'ui-icon-seek-start'
				}
	});
	$("#deleteB").click(function() {
				// selrow 单选
				// selarrrow 多选
				var ids = [];
				var gr = jQuery("#resourceTable").jqGrid('getGridParam',
						'selrow');
				
				var rowData =jQuery("#resourceTable").jqGrid('getRowData',
						gr);
				if (!gr) {
					hAlert('请选择要删除的记录!');
					return;
				}
				ids.push(rowData.id);
				
				var config = {
					url : templateRoot+'plat/resource/res_deleteById.action',
					ids : {
						ids : ids
					}
				};
				deleteByids(config);
	});
	function deleteByids(config) {
		 hConfirm('您确定要删除所选记录吗？', null, function(r){
		 	if(r){
				$.ajax({
							type : "post",
							url : config.url,
							data : jQuery.param(config.ids, true),
							dataType : "json",
							cache : false,
							error : function(res,textStatus, errorThrown) {
								hError("系统ajax交互错误: " + textStatus);
							},
							success : function(data, textStatus) {
								hAlert(data.message);
								if (data.success) {
									$("#resourceTable").jqGrid("setGridParam", {  
								        search: true    //将jqGrid的search选项设为true 
								        
								    }).trigger("reloadGrid", [{page:1}]);   //重新载入Grid表格，以使上述设置生效
								} 
							}
				});
		 	}
		 });
	}
	//---------删除结束---------//
	// 配置增加或者编辑对话框
	//添加修改资源，添加修改资源表单初始化验证
    var resForm = $('#resourceForm');
	$("#addOrEditForm").dialog({
		autoOpen : false,
		modal : true, // 设置对话框为模态（modal）对话框
		resizable : false,//是否可以拉伸缩小
		width : 580,
//		height: 400,
		buttons : { // 为对话框添加按钮
			"创建" : function() {
				if(resForm.validationEngine({
                    returnIsValid: true
                }))
				create();
			},
			"保存" : function() {
				if(resForm.validationEngine({
                    returnIsValid: true
                }))
				update();
			},
			"取消" : function() {
				$("#addOrEditForm1").dialog("close")
			}
		}
	});
	//编辑数据时将记录数据加载在弹出框里
	function loadSelectedRowData() {
		var selectedRowId = jQuery("#resourceTable").jqGrid('getGridParam',
				'selrow');
		if (!selectedRowId) {
			hAlert("请选择一条记录!");
			return false;
		}else {
			var rowData = $("#resourceTable").jqGrid("getRowData",
					selectedRowId);
			var addOrEditForm = $("#addOrEditForm1");
		
			addOrEditForm.find("#name").val(rowData.name);
			addOrEditForm.find("#task").val(rowData.task);
			addOrEditForm.find("#descript").val(rowData.descript);
			addOrEditForm.find("#url").val(rowData.url);
		
		}
		return true;
	};
	// 点击修改按钮时提交到服务器
	function update() {
		var gr = jQuery("#resourceTable").jqGrid('getGridParam',
						'selrow');
		var parentId = '';
		
			var rowData = $("#resourceTable").jqGrid("getRowData",
					gr);
					
			parentId = rowData.parentId;
		
		var addOrEditForm = $("#addOrEditForm1");
		var name = $.trim(addOrEditForm.find("#name").val());
		var task = $.trim(addOrEditForm.find("#task").val());
		var descript = $.trim(addOrEditForm.find("#descript").val());
		var url = $.trim(addOrEditForm.find("#url").val());

		
		var params = {
			"id" : gr,
			"name" : name,
			"task" : task,
			"descript" : descript,
			"url" : url
		};
		var actionUrl = templateRoot+'plat/resource/res_update.action';
		$.ajax({
					url : actionUrl,
					data : params,
					dataType : "json",
					cache : false,
					error : function(textStatus, errorThrown) {
						alert("系统ajax交互错误: " + textStatus);
					},
					success : function(data, textStatus) {
						hAlert(data.message);
						if (data.success) {
							addOrEditForm.dialog("close");
							var url = templateRoot+"plat/resource/res_findAll.action";
							jQuery("#resourceTable").jqGrid('setGridParam', {
										url : url
									}).trigger("reloadGrid");
							
						}
					}
				});
	}
	// 点击创建按钮时提交到服务器
	function create() {
		if(!currNode){
			hAlert("请先选择一个父节点");
			return;
		}
		var addWinDialog = $("#addOrEditForm1");
		var name = $.trim(addWinDialog.find("#name").val());
		var task = $.trim(addWinDialog.find("#task").val());
		var descript = $.trim(addWinDialog.find("#descript").val());
		var url = $.trim(addWinDialog.find("#url").val());
	
		// 传到服务器的参数
		var params = {
			"name" : name,
			"task" : task,
			"descript" : descript,
			"url" : url
		};
		var actionUrl = templateRoot+'plat/resource/res_saveOrUpdate.action';
		$.ajax({
				url : actionUrl,
				data : params,
				dataType : "json",
				cache : false,
				error : function(res,textStatus) {
					hError("系统ajax交互错误: " + res.responseText);
				},
				success : function(data, textStatus) {
					hAlert(data.message);
					if (data.success) {
						addWinDialog.dialog("close");
						var url = templateRoot+"plat/resource/res_findAll.action";
						jQuery("#resourceTable").jqGrid('setGridParam', {
									url : url
								}).trigger("reloadGrid");
						currNode.isParent = true;
					} 
				}
			});
	};

});

下面是我的jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title></title>
    <%@ include file="/commons/common_include.jsp"%>
    <script src="${pageContext.request.contextPath}/plat/resource/js/resource.js"></script>
 	 <script src="${pageContext.request.contextPath}/plat/role/js/role.js"></script>
  </head>
  <body>
	  <div id="main">
	  	<div id="titlearea">
	  		<h1>当前操作：</h1>
	  		<h2>资源维护</h2>
	    	<div id="errormsg">这里是失败提示！</div>
	   	 	<div id="successmsg">这里是成功提示！</div>
	  	</div>
	  	<div id="formarea">
	  		<table style="width:100%;" width="0" border="0" cellspacing="1" cellpadding="0">
	  			<tr>
	  				<td style="vertical-align:top;">
	  					<!-- 弹出框DIV -->
	  					<div id="dialog-message">
	   					</div>
	  					<!-- 资源表格 操作按钮-->
	  					<div id="operationarea">
	  						<div id="t_resourceTable">
  							</div>
	  					</div>
	  					
  						<!-- 资源表格 -->
	  					<table id="resourceTable" style="width:100%;" border="0" cellspacing="1" cellpadding="0">
	  					</table>
	  					<!-- 分页栏 -->
	  					<div id="pagernav"></div>
						<!-- 添加编辑表单 -->
					   <div id="addOrEditForm1" style="display: none;">
					   	<div id="formContainer">
					   		<form id="resourceForm">
					   			<input type="hidden" id="id" name="id"/>
					   			<table  style="width:530px;" border="0" cellspacing="1" cellpadding="0">
					   				<tr>
					   					<td style="width:150px;">资源名称：</td><td> <input type="text" id="name" name="name" size="40"  validator="validate[required][length[1,32]]"/></td>
					   				</tr>
					   				<tr>
					   					<td>资源职能：</td><td><select id="task">
					   					<option value ="增加" id="add">增加</option>
					   					<option value ="删除" id="delete">删除</option>
					   					<option value ="修改" id="revise">修改</option>
					   					</select></td>
					   				</tr>
					   				<tr>
					   					<td>资源描述：</td><td> <input type="text" id="descript" name="descript" size="40"  validator="validate[required][length[1,100]]]"/></td>
					   				</tr>
					   				<tr>
					   					<td>资源入口：</td><td> <input type="text" id="url" name="url" size="40"/></td>
					   				</tr>
					   				<!--<tr>
					   					<td>描述：</td><td><textarea name="descript" id="descript" rows="5" cols="40" validator="validate[length[0,150]]"></textarea></td>
					   				</tr>
					   			--></table>
					   		</form>
					   	</div>
					   </div>
					   <!-- 添加编辑栏结束 -->
	  				</td>
	  			</tr>
	  		</table>
	  	</div>
	  </div>
  </body>
</html>