• jqgrid使用简单记录


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

     1 $("#jqGrid").jqGrid({
     2     url: 'data/test.json',
     3     mtype: "GET",
     4     styleUI : 'Bootstrap',
     5     datatype: "jsonp",
     6     colModel: [
     7         { label: '编号', name: 'OrderID', key: true,  75},
     8         { label: '名称', name: 'nameID',  150},
     9         { label: '联系方式', name: 'tellId',  150},
    10         { label: '开户时间', name: 'dateId',  150},
    11         { label:'经理名称', name: 'canaId',  150}
    12     ],
    13     viewrecords: true,
    14     rowList:[10,20,50,100],//下拉框选项
    15     // autotrue,//改变时调用setGridWidth
    16     shrinkToFit: true,//自适应列宽
    17     height:400,//高度
    18     rowNum: 20,//初始化每页数据
    19     multiselect: true,//多行选择
    20     pager: "#jqGridPager"
    21  });
    jqgrid使用基本形式

    对jqgrid使用中的基本操作,

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

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

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

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

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

    1   var colMo=$("#"+jqgridid).jqGrid('getGridParam',"colModel");//获取table设置的列数组
    2   var arrLabel=[];
    3   for(var i=0; i<colMo.length;i++){
    4     arrLabel.push(colMo[i].label);
    5   }
    6   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);

    删除选中的多行数据,对应代码:

    1 var selrows=$("#jqGrid").jqGrid('getGridParam',"selarrrow");
    2 for(var i=selrows.length-1;i>=0;i--) {  
    3     $("#jqGrid").jqGrid("delRowData", selrows[i]);
    4 } 
  • 相关阅读:
    Redis 常用命令
    docker安装与配置nginx详细过程
    docker安装与配置redis详细过程
    kettle 查询 tinyint 值为 Y,kettle 查询 tinyint 为布尔值
    kettle 乱码问题处理方案
    Vue响应式原理
    ES6学习笔记1
    xlxs转成Unicode编码的json文件
    移动、PC图片拖拽缩放2
    util
  • 原文地址:https://www.cnblogs.com/coyote/p/5893157.html
Copyright © 2020-2023  润新知