jqGrid userData 自定义格式化程序

Question

是否有任何解决方法可以将自定义“格式化程序”添加到 jqGrid 中的 userData 中？我发现这个问题，它对我有很大帮助。下面是我用来填充 jqGrid 的代码。请注意，我在 jsonReader 中填充了一个自定义 userData 对象，并将其设置为 loadComplete 中的网格，我需要添加单独的“格式化程序”总列数。如果有办法请告诉我。提前致谢。

var userDataTotals;
jq("#testGrid").jqGrid({
    url:'local',
    datatype: 'local',
    mtype: 'GET',
    colNames:[
              'rowId','unitId',
              '<fmt:message key="report.col1"/>',
              '<fmt:message key="report.col2"/>',
    ],
    colModel :[ 
        {name:'rowId', index:'rowId',hidden: true,sortable: true,key:true}, 
        {name:'unitId', index:'unitId',hidden: true,sortable: true,key:true}, 
        {name:'outboundReadyDate', index:'outboundReadyDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
        {name:'outboundDate', index:'outboundDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
    ],
    // this will enable the footer row to display totals
    footerrow : true,
    //userDataOnFooter : true,
    altRows : true,
    //to hide pager buttons
    pgbuttons:false,
    recordtext:'',
    pgtext:'',
    gridview: true,
    height:270,
    loadonce: true,
    sortname: 'rowId',
    sortorder: 'asc',
    viewrecords: true,
    rowNum:30000,
    loadComplete: function() {
        // This will increase the column header height ( to show two rows in the header)
        jq(".ui-jqgrid-sortable").css('white-space', 'normal');
        jq(".ui-jqgrid-sortable").css('height', 'auto');
        //Set the total values after load complete,otherwise
        // custom formatter will format the total value as well.

        jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false);

        //check the data type to avoid this code to  execute when the pageload
        var checkDatatype = myGrid.jqGrid("getGridParam","datatype");
        if(checkDatatype =='json' && myGrid.getGridParam('records') == 0){
            // when no records are displaying alert it to the user
            alert(noRecordsMsg);
        }

    },

    jsonReader : {
        root: "dtos",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "rowId",
        userdata :function(obj) {
            userDataTotals = {"outboundReadyDate":obj.totalOutBounded,
                "outboundDate":obj.totalOutBoundReady};
        }

    },


    //This will format the date of the grid (without displaying time)
    function dateOnlyFmatter (cellvalue, options, rowObject){
        var opts = options.colModel.formatoptions;
        if(cellvalue==null || cellvalue=='undefined'){
            return '-';
        }else{
            if(opts != undefined && rowObject.projectTypeName =='IOD'){
                return 'N/A';   
            }
            var now = new Date(cellvalue);
            return now.format('M j, Y');
        }
    }

我使用自定义 dateFormat.js 来格式化日期。

json 响应是 -

{
    "dtos": [
        {
            "unitId": 1068,
            "outboundDate": null,
            "outboundReadyDate": 1317619303000,
            "rowId": 13,
        },
        {
            "unitId": 1105,
            "outboundDate": 1317616970000,
            "outboundReadyDate": 1317617213000,
            "rowId": 14,
        }
    ],
    "totalOutBounded": 0,
    "totalOutBoundReady": 4,
    "rowTotal": 15,
    "returnCode": 0,
    "msg": ""
}

我使用 sortType 作为 integer 因为从服务器我将“java”Date 对象直接传递到网格。为了对其进行排序，我需要将 sortType 设置为 integer

我遇到的基本问题是在 IE8 中我看不到“userData”总值。但在其他浏览器中我可以看到它。我需要将 userData 总值格式化为“超链接”。

没有 userData 格式，我可以在 IE8 中看到总数。所以我想在不使用列 'formatter' 的情况下，将自定义格式化程序添加到总值（userData）中。

Answer 1

您有许多小语法错误：

• 使用尾随逗号（如“,}”）是一个语法错误。您必须从 JSON 数据以及 colNames 和 colModel 中删除尾随逗号。无法读取 "rowId": 13,} 和 "rowId": 14,}。
• 您定义 jQuery("#testGrid")，但使用 jQuery("#mainReportGrid") 设置页脚。
• 在 datatype: 'local' 的情况下，url: 'local' 或任何其他 url 参数没有任何意义。如果 datatype: 'local'，url 参数将被忽略（不使用）。
• 您使用的是未在发布的代码中定义的 myGrid 。您应该在代码开头的某个位置定义 var myGrid = jQuery("#testGrid"); 或在代码开头定义 var myGrid = $(this); loadComplete 事件处理程序。
• 您使用 now.format('M j, Y') 而不是发布 Date 的扩展方法 format。您可以改用 jqGrid 方法：return $.fmatter.util.DateFormat(undefined, now, 'M j, Y', $.jgrid.formatter.date);。
• 我建议您始终使用严格相等 === 而不是 == 和 !== 而不是 != >。例如，请阅读此处了解更多信息。
• 如果您使用没有滚动条的 jqGrid，我建议您使用 height: 'auto' 或 scrollOffset: 0。

• 我建议您阅读答案。如果您使用所描述的错误修复，则可以将 jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false); 行修改为行

  myGrid.jqGrid("footerData", "set", myGrid.jqGrid('getGridParam', 'userData'), false);

  将不需要变量userDataTotals，并且userdata中的方法userdata可以定义为

  用户数据：函数（obj）{
返回 {
outboundReadyDate: obj.totalOutBounded,
outboundDate: obj.totalOutBoundReady
};
}

您可以在此处查看代码的修改版本。