jqGrid数据增删查改

为什么80%的码农都做不了架构师？>>>   

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'});   
});

转载于:https://my.oschina.net/i33/blog/62486