15jqGrid - 加载数组数据

最新推荐文章于 2022-06-16 15:50:08 发布

杨林伟

最新推荐文章于 2022-06-16 15:50:08 发布

阅读量980

点赞数 2

分类专栏： # JQGrid

本文链接：https://blog.csdn.net/qq_20042935/article/details/89488436

版权

JQGrid 专栏收录该内容

83 篇文章 2 订阅

订阅专栏

这个例子告诉我们如何加载数组数据。在这里我们需要用到addRowData方法。

在这里插入图片描述

HTML代码举例

<html>
  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="list2"></table> 
    <div id="pager2"></div>
    ···代码省略···
  </body>
</html>

javascript代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#list4").jqGrid(
      {
        datatype : "local",
        height : 250,
        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"}, 
                     {name : 'name',index : 'name',width : 100}, 
                     {name : 'amount',index : 'amount',width : 80,align : "right",sorttype : "float"}, 
                     {name : 'tax',index : 'tax',width : 80,align : "right",sorttype : "float"}, 
                     {name : 'total',index : 'total',width : 80,align : "right",sorttype : "float"}, 
                     {name : 'note',index : 'note',width : 150,sortable : false} 
                   ],
        multiselect : true,
        caption : "Manipulating Array Data"
      });
  var mydata = [ 
                 {id : "1",invdate : "2007-10-01",name : "test",note : "note",amount : "200.00",tax : "10.00",total : "210.00"}, 
                 {id : "2",invdate : "2007-10-02",name : "test2",note : "note2",amount : "300.00",tax : "20.00",total : "320.00"}, 
                 {id : "3",invdate : "2007-09-01",name : "test3",note : "note3",amount : "400.00",tax : "30.00",total : "430.00"}, 
                 {id : "4",invdate : "2007-10-04",name : "test",note : "note",amount : "200.00",tax : "10.00",total : "210.00"}, 
                 {id : "5",invdate : "2007-10-05",name : "test2",note : "note2",amount : "300.00",tax : "20.00",total : "320.00"}, 
                 {id : "6",invdate : "2007-09-06",name : "test3",note : "note3",amount : "400.00",tax : "30.00",total : "430.00"}, 
                 {id : "7",invdate : "2007-10-04",name : "test",note : "note",amount : "200.00",tax : "10.00",total : "210.00"}, 
                 {id : "8",invdate : "2007-10-03",name : "test2",note : "note2",amount : "300.00",tax : "20.00",total : "320.00"}, 
                 {id : "9",invdate : "2007-09-01",name : "test3",note : "note3",amount : "400.00",tax : "30.00",total : "430.00"} 
               ];
  for ( var i = 0; i <= mydata.length; i++){
    jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);
  }
}