jqgrid使用步骤及说明

                                      jqgrid使用说明

 

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 + "/";

%>

   

       

       

       

       

       

       

       

       

       

       

       

   

   

       

           

               

                   

                   

                       

                       

                       

                       

                   

                   

                       

                       

                       

   

                   

 

               

科室编号		科室名称
状态	list="#{'USE':'---有 效---','STP':'---无 效---'}"  />