jqGrid用法汇总(全经典)

 $("#grid1").jqgrid( ........ datatype: "xml", ........ ); 

　　XML格式：　

 <rows> <page></page> <total></total> <records></records> <row id="rowid"> <cell>value1</cell> ......... <cell>valueN</cell> </row> </rows>

　　数组格式

 var datas=[ {name1:'value1',name2:'value2',..... nameN:'valueN'}, .... {....} ]; //把数据添加到jqgrid里 for (var i = 0; i <= mydata.length; i++) { jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]); }

或者设置data属性

 $("#grid1").jqgrid( ...... data:mydata,　　　　datatype:'local', ....... ); 

　　将footerrow设为true,绑定gridComplete事件。

 $("#grid1").jqgrid(...... footerrow: true, gridComplete: completeMethod, .......); function completeMethod() { var sum_amount=$("#grid1").getCol('amount',false,'sum'); var sum_tax=$("#grid1").getCol('tax',false,'sum'); var sum_total=$("#grid1").getCol('total',false,'sum'); $("#grid1").footerData('set', { name: '合计:', amount: sum_amount, tax: sum_tax, total: sum_total }); }

　　只要单击列的标题，就可以对该列进行升序或降序的排序。设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。

 $("#grid1").jqgrid( ........ colModel: [ ......... { name: 'id', index: 'id', width: 60, myexport: true, editable: true , sorttype: "int", sortable: true}, ............. ], ........);

分组

 var mydata = [ {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} , {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; jQuery("#list48").jqGrid({ data: mydata, datatype: "local", height: 'auto', rowNum: 30, rowList: [10,20,30], colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"}, {name:'name',index:'name', width:100, editable:true}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], pager: "#plist48", viewrecords: true, sortname: 'name', grouping:true, groupingView : { groupField : ['name'] }, caption: "Grouping Array Data" }); 

 <table id="s2list"></table> <div id="s2pager"></div> 

　　javascript:

 jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false}); jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', 　　　　onClickButton:function(){　　　　　　 mygrid[0].toggleToolbar() 　　}});jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',　　　　 onClickButton:function(){ 　　　　　　mygrid[0].clearToolbar() 　　}}); jQuery("#s3list").jqGrid('filterToolbar');

 <div id="pager"></div> $("#grid1").jqgrid( ...... pager:"#pager",　　　　　//通过这属性还可以设置可选的页面大小　　　　 rowList: [10, 20, 30], ....... );//这里的 edit,add等就是对应编辑新增等按钮，通过设置布尔值来决定是否显示 jQuery("#grid1").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true});//或者用这种形式 　　jQuery("#grid1").jqGrid('navGrid', '#pager', 　　　　{}, //options 　　　　{height: 280, reloadAfterSubmit: false }, // edit options 　　　　{height: 280, reloadAfterSubmit: false }, // add options 　　　　{reloadAfterSubmit: false }, // del options 　　　　{} // search options 　　);

　　既然上面已提及到分页，下面则介绍另一种分页方式，通过滚动条进行翻页。在这种分页方式中，数据库的所有数据并非一下子读取出来填充到grid中，而是通过滚动条的位置得出当前浏览到的哪一页数据，才从数据库读取那部分的数据。

 $("#grid1").jqgrid( ...... //设置了这个才会根据滚动分页读取数据 scroll: 1, 　　 //设置页面的大小 　　 rowNum: 10, ....... ); 

下面的例子只是用到本地的数据，同样也是实现了滚动翻页的效果

 jQuery("#scrolling").jqGrid({ scroll: 1, datatype: "local", data:mydata, height: 100, width: 600, colNames: ['Index', 'Name', 'Code'], colModel: [ { name: 'id', index: 'id', width: 65 }, { name: 'name', index: 'name', width: 150 }, { name: 'note', index: 'note', width: 100 } ], rowNum: 5, gridview: true, pager: '#pscrolling', sortname: 'item_id', viewrecords: true, sortorder: "asc", caption: "Loading data while scrolling" }); 

　　通过以下设置可使用子表

 $("#grid1").jqgrid( ...... //启用子表 subGrid : true, subGridUrl: '............', //设置子表的属性 subGridModel: [{ name : ['name1','name2',......,'nameN'], width : [width1,width2,.....,widthN] } ], ....... );

　　当然也可以Get/Set 行或者列，在这里可查阅更多get/set/add的方法http://www.trirand.com/jqgridwiki/doku.php?

　　通过设置colModel的editrules属性，可以对输入的数据进行验证

 jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true }, ... ] ... });

设置条带状的列

 jQuery("#ghcs").jqGrid('setGroupHeaders', {　//设置列头是否启用colSpan效果 useColSpanStyle: false, groupHeaders:[ {　　　　　　startColumnName: 'colName', //合并列组的第一个列名 　　　　numberOfColumns: number, //合并列的数量　　　　titleText: 'title' //合并列的标题　　　},　　　　........ ] }

在colModel里设置edittype则可

 jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editable:true, edittype:'text',editoptions: {size:10, maxlength: 15}....},　　　　 ... 　　] 　　... });

上面介绍的编辑器只是使用了html的表单元素而已，下面介绍的是调用插件。

 <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script type="text/javascript"> function InitDatePicker(cl) { $(cl).click(function () { WdatePicker(); }); } .... jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'date', ..., editable:true, edittype:'text',editoptions: {dataInit:InitDatePicker}....}, 　　　　 ... 　　 ] , 　　 ... }); ....... </script>

如果想在一个模板列里放置多种控件，可以用一下方式

 jQuery("#grid_id").jqGrid({ ... afterInsertRow: function (rowid, aData) { var controls=" "; //放置在模板里的控件 ....... $("#grid_id").jqGrid('setCell', rowid, 'tag', controls); } 　　 ... });

 jQuery("#grid_id").jqGrid({ ... cellEdit:true, cellsubmit:'clientArray', //定义了单元格内容保存位置 默认值是'remote' 　　 ... });

以上所述是小编给大家介绍的jqGrid用法汇总，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本网站网站的支持！

您可能感兴趣的文章:

• jqgrid 简单学习笔记
• JQGrid的用法解析(列编辑,添加行,删除行)
• jQuery中jqGrid分页实现代码
• jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
• jqGrid随窗口大小变化自适应大小的示例代码
• Bootstrap嵌入jqGrid，使你的table牛逼起来
• 一个关于jqGrid使用的小例子(行按钮)
• jqGrid 学习笔记整理——进阶篇(一 )
• 给jqGrid数据行添加修改和删除操作链接（之一）
• 利用jqgrid实现上移下移单元格功能