[置顶] 插件jqGrid使用方法总结(一)
jquery,jqgrid,服务器,ajax,控件2016-07-06
JQGrid是一个在jquery基础上做的一个表格控件，主要以ajax的方式和服务器端通信。
在这节主要介绍JQGrid如何建表格和各参数的意思，可以知道jqgrid可以做什么事情。任何插件都是官方的API最权威，而下面就是我写的一个使用
以上的代码效果图如下红框，表中的数据我们下一篇再说
接下来我们来说上面那几个按钮的
这些是按钮的事件。
下面是我的jsp代码
// -----------------资源表格开始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>