javascript - 当网格数据绑定(bind)是动态时，如何为 jqgrid 单元格设置自定义标题

Question

我有一个带有动态数据绑定(bind)的 jqgrid，需要为每个单元格设置自定义标题。我应用了解决方案中描述的方法 JQGrid with dynamic column: cellattr does not work

但是它不起作用。我的代码如下。

设置colModel的action方法:

var result = new { 
    Json = new { 
        colNames = new[] { "T1", "T2" }, 
        colModels = new[] { 
            new { index = "T1", label = "T1", name = "T1", 
                width = 100, cellattr = "customTitle", 
                editable = true, strtooltip = "A0" }, 
            new { index = "T2", label = "T2", name = "T2", 
                width = 100, cellattr = "customTitle", 
                editable = true, strtooltip = "A1" 
            } 
        }, 
        data = ......................

$.ajax({
    url: '/Client/PatientListing/GetTestData',
    type: 'POST',
    data: {},
    success: function (result) {
        var colModels = result.Json.colModels;
        var colNames = result.Json.colNames;
        var data = result.Json.data.options;
        jQuery.each(colModels, function (index, value) {
            debugger;
            cm = value;
            if (cm.hasOwnProperty("cellattr") &&
                functionsMapping.hasOwnProperty(cm.cellattr)) {
                cm.cellattr = functionsMapping[cm.cellattr];
            }
        });

        var functionsMapping = {
            "customTitle": function (rowId, val, rawObject) {
                return 'title="' + rawObject.T1 + ' (' + rawObject.T2 + ')"';
            }

        };

Answer 1

在我看来，您想从服务器返回 JSON 数据，其中包含 cellattr。如果您使用更新版本的 jqGrid，这是可能的。您可以定义自定义字符串名称，您可以通过以下方式将其用作 cellattr 回调的值。

$.jgrid = $.jgrid || {};
$.jgrid.cellattr = $.jgrid.cellattr || {};
$.extend(true, $.jgrid.cellattr, {
    customTitle: function (rowId, val, rawObject) {
        return 'title="' + rawObject.T1 + ' (' + rawObject.T2 + ')"';
    },
    customTitle2: function (rowId, val, rawObject) {
        return 'title="' + rawObject.T1 + ' [' + rawObject.T2 + ']"';
    }
});

现在您可以在列定义中使用 cellattr: "customTitle" 和 cellattr: "customTitle2"。

顺便说一下，免费的jqGrid支持更多的cellattr参数。它具有附加参数 cm 和 rdata。参数cm是当前要处理的colModel的项，rdata与rawObject接近，但是它始终具有相同的格式和命名属性。问题在于，cellattr、rowattr 和自定义格式化程序中使用的 rawObject 具有与输入数据完全相同的格式。 。如果您处理 XML 输入数据，则 rawObject 是一个 XML 节点。如果使用数组形式的数据处理 JSON 输入 ["1", "2007-10-01", "test", "note", "200.00", "10.00", "true", "TN", "210.00"] 而不是 {id: "1", invdate: "2007-10-01", 名称: "test", note: "note", 金额: "200.00", 税金: "10.00", 关闭:true，ship_via:“TN”，total:“210.00”并且您另外使用loadonce:true，比cellattr将具有rawObject 在第一次处理输入数据时作为数组，在稍后处理时作为具有命名属性的对象。它使 cellattr 的逻辑更加复杂。

因为free jqGrid引入了额外的rdata参数，它以对象形式提供数据allays。免费的 jqGrid 是 jqGrid 的分支，自从 Tony 更改了 jqGrid 的许可协议(protocol)并将其产品重命名为 Guriddo jqGrid JS(请参阅 here 和 here )以来，我就开发了它。

下面是代码的代码片段

$.jgrid = $.jgrid || {};
$.jgrid.cellattr = $.jgrid.cellattr || {};
$.extend(true, $.jgrid.cellattr, {
    customTitle: function (rowId, cellValue, rawObject, cm, rdata) {
        if (cm.name === "name") {
            return 'title="' + rdata.amount + ' (' + rdata.note + ')"';
        } else {
            return 'title="' + rdata.amount + ' (' + rdata.name + "; " + rdata.note + ')"';
        }
    }
});

查看相应的演示https://jsfiddle.net/OlegKi/mme1krLj/1/