jqgrid：如何获取列索引使用自定义格式化程序

Question

如何获取列索引使用自定义格式程序。

在栏«税»我尝试使用自定义格式化程序。需要获取列索引值和行索引值。我可以得到irow参数irow = options.rowid但是获取icol参数的问题。

这是我的例子：

var $grid = $("#grid"); 

    $grid.jqGrid({ 
     datatype: "local", 
     height: 250, 
     colNames:[' ', 'Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
     colModel:[ 
      {name: 'myac', width:80, fixed:true, frozen: true, sortable:false, resize:false, formatter:'actions', 
      formatoptions:{keys:true}}, 
      {name:'id',index:'id', width:60, sorttype:"int", frozen: true}, 
      {name:'invdate',index:'invdate', width:90, sorttype:"date", frozen: true, editable: true}, 
      {name:'name',index:'name', width:100, editable: true, editable: true}, 
      {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true}, 
      {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true, 

       formatter: function(cellvalue, options) { 
        var id = options.rowId; 
        var col; 

        return id ? 
          '<span class="editable" data-id="' + id + '" data-col="' + col + '">$' + cellvalue + '</span>' : 
          cellvalue; 
       } 

      },  
      {name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},  
      {name:'note',index:'note', width:150, sortable:false, editable: true}  
     ], 
     rowNum:10, 
     width:700, 
     rowList:[10,20,30], 
     pager: '#pager', 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: "date", 
     shrinkToFit: false, 
     rownumbers: true, 
     caption: "Frozen Column with Group header and custom cell formatter", 
     height: 'auto', 
     frozen : true 
    }); 

    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++) $grid.jqGrid('addRowData',i+1,mydata[i]); 

    $grid.jqGrid('setGroupHeaders', { 
     useColSpanStyle: true, 
     groupHeaders:[ 
     {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'}, 
     ] 
    }); 

    $grid.jqGrid('setFrozenColumns'); 

使用点击方格事件，我可以得到山口和行索引。

$grid.click(function(e) { 
     var el = e.target; 
      if (el.nodeName !== "TD") { 
       el = $(el,this.rows).closest("td"); 
      } 
     var iCol = parseInt($(el).index()); 
     var row = $(el,this.rows).closest("tr.jqgrow"); 
     var rowId = parseInt(row[0].id); 

      alert ("rowId="+rowId+"; iCol="+iCol+";"); 

Answer 1

首先能，请千万不要用addRowData，使有datatype: "local" jqGrid的初始填充。除此之外，您可以在代码开始时移动var mydata = [...];，并将data: mydata添加到jqGrid的参数列表中。

现在你的主要问题：自定义格式的options参数有4个属性：

• grid财产 - 保持字符串代表电网的id。你的情况是"grid"。
• pos property - 它是colModel中列的索引。这将是你的情况6。 所以options.pos就是你的问题的答案。
• rowId财产 - 这是它将建现在
• colModel属性行的ROWID - 它代表的项目IM colModel与索引options.pos的对象。

此外jqGrid初始化为this到网格的DOM元素，就像在调用任何回调的情况下一样。因此，例如$(this).jqGrid("getGridParam")或this.p将为您提供jqGrid的选项。

Answer 2

有jqgrid：onselectcell的回调函数。在你可以得到山坳指数

onCellSelect : function(rowId, iCol, cellcontent,e) { 
    var col = $("#grid").jqGrid("getGridParam", "colModel"); 
    var colName = col[iCol]['index']; 

}