jqgrid使用步骤及说明

Love The Way You Lie 2022-08-27 14:54 189阅读 0赞

jqGrid 是一个用来显示网格数据的jQuery插件，可以动态的对数据网格的数据进行添加、删除、修改、查询、排序、拖拽等操作，数据源可以是json、xml

官网下载地址：http://www.trirand.com/blog/?page\_id=6

官网文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

观望DEMO:http://www.trirand.com/blog/jqgrid/jqgrid.html

jqgrid基于ssh代码实例：

下载simpleProj.war包后放到tomcat的webapp下，然后运行tomcat,访问http://localhost:8080/simpleProj/进行操作，数据库用的是内置的hsqldb

下载地址：ftp://192.168.100.253/liubx/simpleProj.war

使用jqGrid必须要引入jquery环境，如：

jquery和jqgrid的版本要对应，一下是对jqgrid的一些参数说明：

1、colNames:列名称,用于描述在界面上显示的列名称

colNames: \['编号','科室名称','联系人','联系电话','主管科室','状态','备注','opertype'\],

2、colModel:列名称对应的model，该model内的各个列要和colNames的各个列进行一一对应

可以对各个列设置属性，name属性药设置为json数据的key名称,也就是我们的Bean的对应属性名称，width：宽度,editable代表是否可编辑，edittype代表编辑框的类型，可以是  text、select、texare、checkbox等类型,formatter:格式化显示的数据，unformat：处于编辑状态后反格式化到以前的数据

如：

colModel: \[

\{name:'dpt\_code',index:'dpt\_code',width:110,editable: true,edittype:"text",cellEdit:false,editrules:\{required:true\}\},

\{name:'dpt\_name',index:'dpt\_name',width:110,editable: true,edittype:"text"\},

\{name:'dpt\_manager',index:'dpt\_manager',width:100,editable: true,edittype:"text"\},

\{name:'dpt\_tel',index:'dpt\_tel',width:120,editable: true,edittype:"text", editrules:\{custom:true, custom\_func:telcheck\}\},

\{name:'dpt\_mandpt',index:'dpt\_mandpt',editable: true,edittype:"text"\},

\{name:'dpt\_status',index:'dpt\_status',formatter:formatStatus,width:60,editable: true,edittype:"select",unformat:unformatStatus,                                   editoptions :\{value:'STP:停用'+';'+'USE:使用'\}\},

\{name:'dpt\_remark',index:'dpt\_remark',editable: true,edittype:"text"\},

\{name:'opertype',index:'opertype',editable: false,edittype:"text",hidden:true\},

\],

3、id:代表整个数据表格的一个ID，没条数据的ID必须是唯一的，常和后台数据表ID对应,

id:dpt\_code

4、caption:设置数据表格的标题名称

caption: "科室管理11",

5、rowNum:设置表格默认显示记录的条数，用于分页

rowNum:20

6、rowList:供用户选择每页显示的记录数

rowList:\[10,20,30,40\],

7、pager: 用指定表格的工具栏

pager: '\#pageDiv',pageDiv是页面某个DIV的ID

8、pgbuttons:true, 是否显示页面分页按钮

9、 multiselect:'true'，是指是否可以进行多选

10、altRows:'true',是否开启，提示功能

11、 multiboxonly:true 是否在多选的时候，显示复选框

12、height: 398，代表表格的高度

13、cellEdit:true,是否开启单元格的编辑功能

14、cellsubmit:'remote',remote代表每次编辑提交后进行服务器保存，clientArray只保存到数据表格不保存到服务器

15、cellurl:'departmentAction!updateCell.action',cellsubmit要提交的后台路径

16、scrollrows:true是否可以出现滚动条

17、shrinkToFit:false是否固定每列的宽度

18、editurl:表格的添加、修改、删除按钮所提交的路径

editurl:'departmentAction!updateDepartment2.action',

19、sortname:默认排序的列

sortname: 'dpt\_sort',

20、jsonReader:解析json数据的参数

jsonReader: \{

repeatitems : false,

id: "dpt\_code" //对应后台数据的ID

\},

21、prmNames :向后台交互时，所设置的参数名称对应的值

prmNames : \{

page:"department.curr\_page",    // 表示请求页码的参数名称

rows:"department.page\_size",    // 表示请求行数的参数名称

sort: "department.sort\_field", // 表示用于排序的列名的参数名称

order: "department.sord", // 表示采用的排序方式的参数名称

search:"search", // 表示是否是搜索请求的参数名称

totalrows:"department.totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal

22、gridComplete:设置表格数据加载完毕后，所执行的操作

gridComplete:function()\{

if($("\#gridTable").getDataIDs().length>0)\{

$("\#gridTable").jqGrid('setSelection',$("\#gridTable").getDataIDs()\[0\]);//默认选中第一行

\},

23、onSelectRow:表格某行被选中后执行的操作：

onSelectRow:function()\{

loadDataGrid();

\},

24、ondblClickRow:数据某行所执行的操作

25、beforeSelectRow：某行记录在被选中前执行操作

26、afterSelectRow:某行记录再被选中后所执行操作

27、设置表格的添加、删除、修改、查询按钮是否显示，也可以自定义按钮

search:false不显示查询按钮，add\_options主要设置点添加按钮后弹出框的样式及模式

navButtonAdd：通过该方法可以添加自定义的按钮

var add\_options=\{

width:400,

height:290,

left:20,

top:30,

reloadAfterSubmit:false,

jqModal:false,

addCaption: "添加部门信息",

bSubmit: "保存",

bCancel: "关闭",

closeAfterAdd:true

\};

jQuery("\#gridTable").jqGrid('navGrid','\#pageDiv',\{search:false,edit:true,add:true,del:true\},edit\_options,add\_options,\{\},\{\},\{\}).navButtonAdd('\#pageDiv',\{

caption:"添加",edit:true显示编辑按钮

title:'添加药品信息',

buttonicon:"ui-icon-update",

onClickButton:function()\{

tb\_show('添加科室信息','/simpleProj/bsic/departmentAction!addDepartment.action?TB\_iframe=true&height=420&width=630&keepThis=false"',true);

\},

position:"last"

\});

28、获取表格总行数

var ids = $("\#gridTable").getDataIDs();获得所有数据的ID数组

29、按ID获取某行数据操作：

$("\#gridTable").jqGrid("getRowData",id);

30、获取选中行的记录，如果设置的multiselect为true那么获取的是数组反正是一个对象

var re = $("\#gridTable").jqGrid('getGridParam','selrow'),返回一个json对象，可以通过如下方式访问：

re.dpt\_name,re.dpt\_tel

31、在数据网格动态增加行操作

rowid代表行号、dataRow一条josn数据，last指向表格最后一行追加

$("\#gridTable").jqGrid("addRowData", rowid, dataRow, "last");

32、一下是对部门表管理的完整代码：

<%@page contentType="text/html; charset=utf-8" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

+ path + "/";

<html>

<head>

$(document).ready(function()\{

function formatStatus(cval, options )\{

if(cval)\{

if(cval=='STP')\{

return "停用";

\}else if(cval=='USE')\{

return '可用';

\}else\{

return cval;

function unformatStatus(cval, options )\{

if(cval)\{

if(cval=='停用')\{

return "STP";

\}else if(cval=='可用')\{

return 'USE';

\}else\{

return cval;

function telcheck(val, colname)\{

var pattern =/^0\{0,1\}(13\[0-9\]|15\[7-9\]|153|156|18\[7-9\])\[0-9\]\{8\}$/;

if(!pattern.exec(val)) \{

return \[false,"请输入正确的电话号码！"\];

\}else\{

return \[true,""\];

$('\#gridTable').jqGrid(\{

url: 'departmentAction!queryDepartment.action',

datatype: "json",

height: "auto",

colNames: \['编号','科室名称','联系人','联系电话','主管科室','状态','备注','opertype'\],

colModel: \[

\{name:'dpt\_code',index:'dpt\_code',width:110,editable: true,edittype:"text",cellEdit:false,editrules:\{required:true\}\},

\{name:'dpt\_name',index:'dpt\_name',width:110,editable: true,edittype:"text"\},

\{name:'dpt\_manager',index:'dpt\_manager',width:100,editable: true,edittype:"text"\},

\{name:'dpt\_tel',index:'dpt\_tel',width:120,editable: true,edittype:"text", editrules:\{custom:true, custom\_func:telcheck\}\},

\{name:'dpt\_mandpt',index:'dpt\_mandpt',editable: true,edittype:"text"\},

\{name:'dpt\_status',index:'dpt\_status',formatter:formatStatus,width:60,editable: true,edittype:"select",unformat:unformatStatus, editoptions :\{value:'STP:停用'+';'+'USE:使用'\}\},

\{name:'dpt\_remark',index:'dpt\_remark',editable: true,edittype:"text"\},

\{name:'opertype',index:'opertype',editable: false,edittype:"text",hidden:true\},

\],

id:'dpt\_code',

caption: "科室管理11",

rowNum:20,

rowList:\[10,20,30,40\],

pager: '\#pageDiv',

pgbuttons:true,

viewrecords: true,

pagerpos:'center',

multipleSearch:'true',

altRows:'true',

multiselect: true,

multiboxonly:true,

height: 398,

cellEdit:true,

cellsubmit:'remote',

cellurl:'departmentAction!updateCell.action',

scrollrows:true,

shrinkToFit:false,

width:838,

editurl:'departmentAction!updateDepartment2.action',

sortname: 'dpt\_sort',

jsonReader: \{

repeatitems : false,

id: "dpt\_code"

\},

prmNames : \{

page:"department.curr\_page",    // 表示请求页码的参数名称

rows:"department.page\_size",    // 表示请求行数的参数名称

sort: "department.sort\_field", // 表示用于排序的列名的参数名称

order: "department.sord", // 表示采用的排序方式的参数名称

search:"search", // 表示是否是搜索请求的参数名称

totalrows:"department.totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal

\});

var add\_options=\{

width:400,

height:290,

left:20,

top:30,

reloadAfterSubmit:false,

jqModal:false,

addCaption: "添加部门信息",

bSubmit: "保存",

bCancel: "关闭",

closeAfterAdd:true

\};

var edit\_options=\{

width:400,

height:290,

left:20,

top:30,

reloadAfterSubmit:false,

jqModal:false,

editCaption: "修改部门信息",

bSubmit: "保存",

bCancel: "关闭",

closeAfterEdit:true

\};

jQuery("\#gridTable").jqGrid('navGrid','\#pageDiv',\{search:false,edit:true,add:true,del:true\},edit\_options,add\_options,\{\},\{\},\{\}).navButtonAdd('\#pageDiv',\{

caption:"添加",

title:'添加药品信息',

buttonicon:"ui-icon-update",

onClickButton:function()\{

tb\_show('添加科室信息','/simpleProj/bsic/departmentAction!addDepartment.action?TB\_iframe=true&height=420&width=630&keepThis=false"',true);

\},

position:"last"

\});

$("\#queryButton\_id").click(function()\{

dpt\_code =encodeURIComponent($("\#dpt\_code\_id").val());

dpt\_status =encodeURIComponent($("\#dpt\_status\_id").val());

dpt\_name =encodeURIComponent($("\#dpt\_name\_id").val());

jQuery("\#gridTable").jqGrid('setGridParam',\{url:"departmentAction!queryDepartment.action?department.dpt\_code="+dpt\_code+"&department.dpt\_name="+dpt\_name+"&department.dpt\_status="+dpt\_status,page:1\}).trigger("reloadGrid");

\});

$("\#addRow").click(function()\{

var ids = $("\#gridTable").jqGrid('getDataIDs');

var rowid = ids.length + 1;

var dataRow =\{dpt\_code:'',dpt\_name:'',dpt\_manager:'',dpt\_tel:'',dpt\_mandpt:'',dpt\_status:'USE',dpt\_remark:'',opertype:'add'\};

$("\#gridTable").jqGrid("addRowData", rowid, dataRow, "last");

\});

$("\#saveButton\_id").click(function()\{

var ids = $("\#gridTable").getDataIDs();

var re;

var type;

var mty\_num=0;

var strparm="\{";

$.each(ids,function(i,id)\{

re=$("\#gridTable").jqGrid("getRowData",id);

type = re.opertype;

if(type=="add" || type=="update")\{

patrnVal(re.dpt\_status);

strparm=strparm+"'mtyzptList\["+mty\_num+"\].dpt\_code':'"+re.dpt\_code+"','mtyzptList\["+mty\_num+"\].dpt\_name':'"+re.dpt\_name+"','mtyzptList\["+mty\_num+"\].dpt\_manager':'"+re.dpt\_manager+"','mtyzptList\["+mty\_num+"\].dpt\_tel':'"+re.dpt\_tel+"','mtyzptList\["+mty\_num+"\].dpt\_mandpt':'"+re.dpt\_mandpt+"','mtyzptList\["+mty\_num+"\].dpt\_status':'"+re.dpt\_status+"','mtyzptList\["+mty\_num+"\].dpt\_remark':'"+re.dpt\_remark+"',";

mty\_num++;

\});

if(mty\_num==0)\{

alert("数据未更改！");

return;

strparm=strparm.substring(0,strparm.length-1);

strparm=strparm+"\}";

while(strparm.indexOf("\\r\\n") >= 0)\{

strparm = strparm.replace("\\r\\n", "\\\\r\\\\n");

eval("var param="+strparm);

$.post("departmentAction!batchUpdate.action",param,function(data)\{

alert(data);