当前操作：
资源维护
这里是失败提示！
这里是成功提示！
|
|
插件jqGrid使用方法总结(一)
JQGrid是一个在jquery基础上做的一个表格控件，主要以ajax的方式和服务器端通信。
在这节主要介绍JQGrid如何建表格和各参数的意思，可以知道jqgrid可以做什么事情。任何插件都是官方的API最权威，而下面就是我写的一个使用
以上的代码效果图如下红框，表中的数据我们下一篇再说
接下来我们来说上面那几个按钮的
这些是按钮的事件。
下面是我的jsp代码
// -----------------资源表格开始grid-------------------
jQuery("#resourceTable").jqGrid({ //"#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("");
$('#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("");
$('#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("");
$('#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"%>