jqgrid使用步骤及说明

最新推荐文章于 2023-02-04 21:00:24 发布

丨心静如水丨

最新推荐文章于 2023-02-04 21:00:24 发布

阅读量1k

点赞数

文章标签： jqgrid jquery插件网格分页

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",