jqgrid使用简单记录

时间：2022-05-24 17:05:20

我要为id为jqGrid的table使用jqgrid插件。

 $("#jqGrid").jqGrid({

     url: 'data/test.json',

     mtype: "GET",

     styleUI : 'Bootstrap',

     datatype: "jsonp",

     colModel: [

         { label: '编号', name: 'OrderID', key: true, width: 75},

         { label: '名称', name: 'nameID', width: 150},

         { label: '联系方式', name: 'tellId', width: 150},

         { label: '开户时间', name: 'dateId', width: 150},

         { label:'经理名称', name: 'canaId', width: 150}

     ],

     viewrecords: true,

     rowList:[10,20,50,100],//下拉框选项

     // autowidth:true,//改变时调用setGridWidth

     shrinkToFit: true,//自适应列宽

     height:400,//高度

     rowNum: 20,//初始化每页数据

     multiselect: true,//多行选择

     pager: "#jqGridPager"

  });

jqgrid使用基本形式

对jqgrid使用中的基本操作，

获取选中行id，如果你选择了多行，那下面的selrow是最后选择的行的id

var selrow=$("#jqGrid").jqGrid('getGridParam',"selrow");

如果想要获取选择多行的id，那这些id便封装成一个selrows数组

var selrows=$("#jqGrid").jqGrid('getGridParam',"selarrrow");

获取table的列名，我现在把他放到数组arrLabel里,代码如下：

   var colMo=$("#"+jqgridid).jqGrid('getGridParam',"colModel");//获取table设置的列数组

   var arrLabel=[];

   for(var i=0; i<colMo.length;i++){

     arrLabel.push(colMo[i].label);

   }

   console.log(arrLabel)；

获取table各列名的id，我现在把它们放到数组arrName里，对应代码如下：

  var colMo=$("#"+jqgridid).jqGrid('getGridParam',"colModel");//获取table设置的列数组

  var arrName=[];

  for(var i=0; i<colMo.length;i++){

    arrName.push(colMo[i].name);

  }

  console.log(arrName)；

获取选中行的数据，其中selrow为选中行的id，rowData为获取的行数据，得到的rowData为json数据，对应代码如下

var selrow=$("#jqGrid").jqGrid("getGridParam","selrow");

var rowData=$("#jqGrid").jqGrid('getRowData',selrow);

console.log(rowData);

删除选中的多行数据，对应代码：

 var selrows=$("#jqGrid").jqGrid('getGridParam',"selarrrow");

 for(var i=selrows.length-1;i>=0;i--) {

     $("#jqGrid").jqGrid("delRowData", selrows[i]);

 }

相关文章