Question

如何让列索引使用自定义格式化程序。

在«Tax»栏中，我尝试使用自定义格式化程序。需要获取列索引值和行索引值。我可以得到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');

使用单击单元格事件我可以获得col和row索引。

    $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属性 - 它是colModel中列的索引。在你的情况下它将是6。 因此options.pos就是您问题的答案。
rowId属性 - 它是将立即构建的行的rowid
colModel属性 - 它是表示项目im colModel且索引为options.pos的对象。

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

Answer 2

jqgrid：onselectcell有一个回调函数。在那你可以获得col索引

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

}

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

2 个答案: