jqGrid的使用

jqGrid完整地封装了Web报表。这次项目是做一个简单的后台管理参数的设置。每次做Web报表都是非常头痛，报表简单没啥技术含量却是人人都得做，都得花大量时间。最痛苦的莫过于此。常常业务逻辑1-2天搞定，却用了3天甚至更多时间去调试javascritp...真是让人崩溃啊。

jqGrid 使用帮助文档：jqgriddocs.pdf   很重要..但是要小心了，这里面的例子是PHP的，换成Jsp的时候有时会有一些莫名其妙的错误导致无法显示Grid。比如"width:100%"这个属性在JSP中不支持还是啥，我也没搞清楚，花了半天才找到，删除后才能显示grid。

我这里只用到了jqGrid的分页查询功能，添加、修改、删除功能都是自己在其他页面进行处理的。希望对大家有所帮助。哈.

script: jquery.jqGrid.js、jqDnR.js、jquery.js

下面是代码：

var ctxmenu;
jQuery(document).ready(function(){
      $('#grid').jqGrid({ 
         height:400, 
         url:'此处放置数据请求URL', 
         datatype: 'json',   //json类型 在struts.xml配置文件中需要设置 extends="json-default"
         mtype: 'POST',
         colNames:['ID','标题','描述','创建日期','状态'], 
         colModel :[ 
         {name:'vtopicId', width:50, sortable:false}, //sortable设置排序. 设置true,点击后会重新到服务端取数据.
         {name:'title', sortable:false}, 
         {name:'description',width:60, sortable:false}, 
         {name:'startTime',width:80 ,align:"center", sortable:false},  
        {name:'state' ,width:100, sortable:false}    
         ],            
         pager: 'nav', 
         rowNum:20, 
         rowList:[20,30], 
         sortname: 'vtopicId', 
         sortorder: "asc", 
         viewrecords: true, 
         imgpath: '图片路径url', 
         caption: '常见问题',
         prmNames: {page:"pageNo",rows:"pageSize", sort: "sidx",order: "sord"}, 
         jsonReader:{
            root:"page.list",
            page: "page.pageIndex",
            total: "page.pageCount",
            records: "page.totalCount",
            id:"vtopicId",
            repeatitems: false
         },
         onSelectRow:function(id){ //用于中状态下设置阴影
     $('#ctxmenu').css({display:'none'});
     $('.context-menu-shadow').css({display:'none'});
    },
    subGrid: true, //开启子表
    subGridRowExpanded: function(subgrid_id, row_id) {                  
         var subgrid_table_id;
         subgrid_table_id = subgrid_id+"_t";
         jQuery("#"+subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
         jQuery("#"+subgrid_table_id).jqGrid({    
            url: 'xxx.shtml?param.topicId='+row_id, //获取数据
            datatype: "json",
            mtype: 'POST',
            colNames: ['选项ID','标题','描述','优先级别'],
            colModel: [
             {name:"voteItemId",index:"voteItemId", width:80,key:true,sortable:false},
             {name:"title",width:130, sortable:false},
             {name:"description",width:60,align:"left", sortable:false},
             {name:"priority",width:80,align:"right",sortable:false}
              ],
            jsonReader:{//字表的读取方式,,不能漏了.
             root:"topicList",
             id:"voteItemId",
             repeatitems: false
          },
            rowNum: 20,
            imgpath: 'images图片URL',
            sortname: 'voteItemId',
            sortorder: "asc" } )
         }
     });
  
     //定义按键 
     $('#grid').navGrid('#nav',{ 
         refresh: true, 
         add: false, 
         del: false,
         edit:false,
         search:false
     }).navButtonAdd('#nav',{
     caption:"添加",
     buttonimg:"/js/jqGrid/themes/basic/images/row_add.gif",
     onClickButton: function(){addprm();},
     position:"next"}).navButtonAdd('#nav',{
         caption:"修改",
         buttonimg:"/js/jqGrid/themes/basic/images/row_edit.gif",
         onClickButton: function(){editprm();},
         position:"next"}).navButtonAdd('#nav',{
          caption:"删除",
          buttonimg:"/js/jqGrid/themes/basic/images/row_delete.gif",
          onClickButton: function(){delprm();},
          position:"next"});

function editprm(){
     var gr = jQuery("#grid").getGridParam("selrow");
        if( gr != null ){
         window.location.href = "xxx.shtml?param.status=edit&param.topicId=" + gr;
        } else {
         info_dialog("修改","选择要修改的数据","确定");
        }
    }
    function delprm(){
       var gr = jQuery("#grid").getGridParam("selrow");
       if( gr != null ){
        if(confirm("确认删除该条记录?")){
         window.location.href = "xxx.shtml?param.topicId=" + gr;
        }
       }else{
        info_dialog("删除","选择要删除的数据","确定");
       }
    }
    function addprm(){
       window.location.href='xxx.shtml?param.status=add';
    }
  
     var menu=[{'添加':function(menuItem,menu){addprm();}},
         {'修改':function(menuItem,menu){editprm();}},
         {'删除':function(menuItem,menu){delprm();}}
         ];
   $('#grid').contextMenu(menu,{theme:'vista'});  
});