Jqgrid 详解

Jqgrid入门-显示基本的表格(一)

 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。

        特点如下:

• 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。
• 自定义的工具列。
• 预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
• 完整的分页功能。
• 按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。
• 预设的action formatter，可以快速而直觉地对每笔资料做运算。
• 支持多种数据格式。比如json、xml、array等。

 

（1）HTML部分 

 想要顺利的使用Jqgrid，需要引用下面6个文件。分别是：

• jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）
• ui.jqgrid.custom.css（专用于jqGrid界面的CSS文件）
• jquery-1.7.2.js（jQuery的核心）
• jquery-ui-1.8.1.custom.min.js（用于支持jQuery UI界面）
• grid.locale-zh-CN.js（针对jqGrid的locale设置，根据locale不同，选择不同的尾缀）
• jquery.jqGrid.min.js（jqGrid的核心，可以到jqGrid网站，根据需求选择模块下载）

        然后在html的body里面创建一个table和div并赋予id属性就行了。如图，非常简洁。

<link href="<%=basePath%>main/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>main/css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>main/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=basePath%>main/js/grid.locale-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>main/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>main/js/grid.custom.js"></script>

<table id="list"></table>
<div id="page"></div>

table是jqgrid的表格获取的id

div#page是分页使用

（2）JS部分

官方文档说实现一个要想生成一个 Jqgrid ，最直接的方法就是：

        $(“#grid_id”).jqGrid(options);也就是得到一个table的jquery对象，然后传递options就可以得到一个Jqgrid对象。

        简单的介绍下options中最重要的部分。

 

1. jqGrid的重要选项

具体的options参考，可以访问Jqgrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有几个是比较常用的，重点介绍一下：

• url：提交处理数据的地址。
• datatype：这个参数用于设定将要得到的数据类型。我最常用的是“json”，其余的类型还包括：xml、xmlstring、local、javascript、function、local。
• mtype: 定义使用哪种方法发起请求，GET或者POST。
• height：Grid的高度，可以接受数字、%值、auto，默认值为150。
• width：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
• shrinkToFit：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
• autowidth：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
• pager：定义页码控制条PageBar
• sortname：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到服务端。
• viewrecords：设置是否在PagerBar显示所有记录的总数。
• caption：Grid的标题。如果设置了，则将显示在Grid的Header层 ；如果未设置，则标题区域不显示 。
• rowNum：用于设置Grid中一次显示的行数，默认值为20。
• rowList：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
• prmNames：这是一个数组，用于设置jqGrid将要向服务端传递的参数名称。我们一般不用去改变什么。
• colModel：最重要的数组之一，用于设定各列的参数。（稍后详述）
• jsonReader：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

 

2. colModel的重要选项

        和Jqgrid一样colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。

• name：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
• index：设置排序时所使用的索引名称，这个index名称会作为sidx参数传递到服务端。
• label：表格显示的列名。
• width：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
• sortable：设置该列是否可以排序，默认为true。
• search：设置该列是否可以被列为搜索条件，默认为true。
• resizable：设置列是否可以变更尺寸，默认为true。
• hidden：设置此列初始化时是否为隐藏状态，默认为false。
• formatter：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档）。

 

3. jsonReader选项

        jsonReader是Jqgrid的一个重要选项，用于设置如何解析从服务端发回来的json数据。其默认值为：

jsonReader : {
root : "rows", // 实际模型的人口
page : "page", // 当前页码
total : total, // 当前共多少页
records : "records", // 总共多少行数据
repeatitems : true,
cell : "cell",
id : "id",
userdata : "userdata", // 数据
subgrid : {
root : "rows",
repeatitems : true,
cell : "cell"
}
}

我们可以这样理解，prmNames设置了如何将Grid所需要的参数传给服务端，而jsonReader设置了如何去解析从服务端传回来的json数据。如果没有设置jsonReader的话，Jqgrid将会根据默认的设置来解析json数据，并显示在表格里。一般情况下，我们修改jsonReader的root为服务端传递过来的数组就可以满足要求了。比如：

jsonReader : {
root : "dataList", // 服务端保存数据的集合
records : "record", // 可以不要,因为我的服务端是record,不是默认的,才加上的
repeatitems : false
// 其它的全部默认就行
}

由此，Jqgrid完成一个request，并将得到的response，解析为所需的数据，显示到Grid表格中。整个流程就走完了。

 

https://www.cnblogs.com/hongzai/p/3159546.html

 

Jqgrid入门-操作表格的数据(二)

上一篇中，Jqgrid已经可以从服务端获得数据，并显示在Grid表格中了。下面说一下，如何操作表格及其数据。

 

        jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：

          $(“#grid_id”).jqGridMethod( parameter1,…,parameterN );

或者

        $(“#grid_id”).jqGrid(‘method’, parameter1,…,parameterN );

        首先介绍一下Jqgrid的几个最常用的方法函数，具体的方法API也可以参考文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods） 。

1. getGridParam

        这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，如果不传入name参数，则会返回 Jqgrid整个选项options。例如：

var id = $("#gridTable").jqGrid("getGridParam", "selrow");      //获得选中行的ID
var sort = $("#gridTable").jqGrid("getGridParam", "sortname");  //获得排序的字段
var page = $("#gridTable").jqGrid("getGridParam", "page");      //获得当前的页数
var row = $("#gridTable").jqGrid("getGridParam", "rowNum");     //获得当前页的行数
var count = $("#gridTable").jqGrid("getGridParam", "records");  //获得总记录数
var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多选时，返回选中行的ID

2. getRowData

这个方法用来获得某行的数据。它具有一个rowid参数，Jqgrid会根据这个rowid返回对应行的数据，返回的是name:value类型的数组。如果rowid未能被找到，则返回一个空数组；如果未设置rowid参数，则以数组的形式返回Grid的所有行数据。例如：

var getRowdata = function() {
    var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
    var rowData = $("#gridTable").jqGrid("getRowData", selectedId);

3. addRowData

        这个方法用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：

• rowid：新行的id号；
• data：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；
• position：插入的位置（first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；
• srcrowid：新行将插入到srcrowid指定行的前面或后面。

        这个方法可以一次性插入多行，data参数必须是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]这样的数组形式。例如:

var addStudent= function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
id : 99,
lastName : "Zhang",
firstName : "San",
email : "<a href="mailto:zhang_san@126.com">zhang_san@126.com</a>",
telNo : "0086-12345678"
};
if (selectedId) {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
}
};

 

 4. setRowData

        这个方法用于为某行数据设置数据值。执行成功返回true，否则返回false。它具有3个参数：

• rowid：更新数据的行id；
• data：更新的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；这个数据对象，不必设置完全，需要更新哪列，就设置哪列的name:value对；
• cssprop：如果cssprop为String类型，则会使用jQuery的addClass为行增加相应名称的CSS类；如果为object类型，则会使用html的css属性，为行添加样式。如果只想增加css样式而不更新数据，可以将data参数设为false。

例如：

var updateStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
lastName : "Li",
firstName : "Si",
email : "<a href="mailto:li_si@126.com">li_si@126.com</a>"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};

5. delRowData

        这个方法用于删除某行数据。执行成功返回true，否则返回false。具有一个参数rowid，代表要删除的行id。例如：

var deleteStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
$("#gridTable").jqGrid('delRowData', selectedId);
};

6. trigger(“reloadGrid”)

        根据当前设置，重新载入Grid表格，即意味着向服务端重新发送一个新的请求。此方法只能用于已经构建好的Grid。此外，此方法不会使对colModel所做出的改变生效。应该使用gridUnload来重新载入对colModel的新设置。例如:

$("#gridTable").jqGrid("setGridParam", {
datatype : "json",
search : true,
mtype : "post"
}).trigger("reloadGrid");

7. 其他方法

除了以上介绍的的方法外，jqGrid还有其他有用的方法，例如：addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等以及增强模块提供的方法，例如：filterGrid、GridDestroy、GridUnload、setColProp等。这些方法的具体用法，或浅显易懂，或不是非常常用。都可以参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods），得到具体指示。

https://www.cnblogs.com/hongzai/p/3159546.html

 

Jqgrid入门-使用模态对话框编辑表格数据(三)

 

Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。这三种方式分别是：

• Cell Editing——只允许修改某一个单元格内容
• Inline Editing——允许在jqGrid中直接修改某一行的数据
• Form Editing——弹出一个新的编辑窗口进行编辑和新增

       在我做的DEMO中，主要运用的是第三种， 弹出一个新窗口来编辑数据。如果想用其它两种方式可以参考官网。

 

        相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。在jquery的ready方法里面我将初始化div生成为一个模态对话框，用作编辑数据的界面。这个用到了jquery ui的dialog。关于如何使用dialog，参考这篇文章就ok了。这是主要的js代码。这个div放在哪里都可以

// 配置模态对话框
$("#consoleDlg").dialog({
autoOpen : false, // 是否自动弹出窗口
modal : true, // 设置为模态对话框
resizable : true,
width : 500,
height : 300,
position : "center" // 窗口显示的位置
});

       那么我们通过什么方式来打开这个窗口呢？ 细心的朋友们可以发现我在前面的文章一的截图中，表格的最前面新增了一列操作栏。这个操作栏主要是通过Jqgrid的gridComplete方法来实现的。当表格所有数据都加载完成而且其他的处理也都完成时触发此事件。

gridComplete : function() {
var ids = jQuery("#gridTable").jqGrid('getDataIDs');
for ( var i = 0; i < ids.length; i++) {
var cl = ids[i];
update = "<input type='button' value='修改' onclick='updateStu("
+ cl + ")'/>&nbsp;";
del = "<input type='button' value='删除' onclick='deleteStu("
+ cl + ")'/>&nbsp;";
view = "<input type='button' value='查看' onclick='viewStu("
+ cl + ")'/>";
jQuery("#gridTable").jqGrid('setRowData',
ids[i], {
process : update + del + view
});
}
},

   从这段代码我们可以看出，我们使用这个方法先获得表格所有列的id，然后在每一列中追加了三个按钮。这三个按钮点击时就会触发各自的方法。注意：代码中的process对应colModel中的列。

        按钮已经设置完成了，下面就该操作表格的数据了。

•         添加数据

        点击页面上的新增按钮，就会弹出刚才初始化的模态对话框。如图：

        

        这是一个form表单，里面包含学生的基本信息，还有两个按钮。有的朋友可能会问这个对话框是在弹出来的呢？别急，看这里。

/**
* 弹出新增学生对话框
*/
function addStu() {
var consoleDlg = $("#consoleDlg");
consoleDlg.html("");
var a1 = " <iframe src='studentProcess.jsp?op=add'"+ "style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>";
consoleDlg.append(a1);
consoleDlg.dialog("option", "title", "新增学生信息").dialog("open");
};

   原来点击按钮调用的是这个方法呀。解释一下，先获得这个对象，然后清空对话框里面的元素。然后追加一个iframe。再调用dialog的open方法。

        填写好表单，点击新增按钮。提示新增成功后，就可以在表格中看到刚才新增的同学了。不用刷新页面，Jqgrid有现成的方法。

        这是新增学生的具体方法。

function addStu() {  // 序列化表单
var obj2 = $("#myform").serializeArray();
$.ajax({   url : "QueryActionUrl_addStu.action",
data : obj2,
dataType : "json",
cache : false,
type : "post",
error : function(textStatus, errorThrown) {
window.parent.hiAlert("系统ajax交互错误");   },
success : function(data, textStatus) {
if (data.messageBean.code == "200") {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");      // 刷新表格
window.parent.$("#gridTable").jqGrid("setGridParam", {
search : true,       mtype : "post"      }).trigger("reloadGrid", [ {
page : 1      }
]);
});
} else {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");     });
}
}
}); }

• 修改数据

       修改数据的时候，和刚才新增方法就有点区别了。因为修改的时候要先把数据加载到对话框的表单中。如图：

 

      比如，我要修改李丽丽的信息。我们需要把原来的信息加载出来。所以在弹出对话框之前我们需要把这个学生的id也传递过来。如图:

/**
* 弹出修改学生的对话框
*/
function updateStu(selectedRowId) {
var consoleDlg = $("#consoleDlg");
consoleDlg.html("");
var str = $("#gridTable").jqGrid("getRowData", selectedRowId); // 根据行ID，获取选中行的数据
id = {
id : str.id
};
var a1 = " <iframe src='studentProcess.jsp?op=update&id="
+ JSON.stringify(id)
+ "' style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>";
consoleDlg.append(a1);
consoleDlg.dialog("option", "title", "修改学生信息").dialog("open");
};

通过和上面新增方法对比，可以发现修改方法是先得到选中行的id，然后得到学生的id，最后通过json传递过去。

点击修改按钮，提示修改成功后，就可以在表格中看到修改后的学生数据了。

 这是修改学生的方法。

function updateStu() {
var obj2 = $("#myform").serializeArray();
$.ajax({
url : "QueryActionUrl_updateStu.action",
data : obj2,
dataType : "json",
cache : false,
type : "post",
error : function(textStatus, errorThrown) {
window.parent.hiAlert("系统ajax交互错误");
},
success : function(data, textStatus) {
if (data.messageBean.code == "200") {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");
// 刷新表格
window.parent.$("#gridTable").jqGrid("setGridParam", {
search : true,
mtype : "post"
}).trigger("reloadGrid", [ {
page : 1
} ]);
});
} else {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");
});
}
}
});
}

  删除和查看数据就不做具体说明了，和修改差不多只是dao层中调用的方法不一样。在这些代码中只需关注op（操作标识）和传递的学生id。也可以这样做，在修改、删除和查看的时候，把学生的信息通过json全部传递过来，就不需要通过学生id去查询数据库了，减少与数据库的交互。