Question

我有3列（orderType，po number，bill id）我正在分组，我使用formatDisplayField为每个组文本添加一个链接/按钮，所以点击后会打开一个允许我的用户访问的上下文菜单将子组添加到该组。我需要传递与该组相关的直接行数据。现在我正在做一些hacky并且数据不够具体。

示例：

用户点击论坛 ordertype 并获取一个上下文菜单，其中显示 Add PO Number ，然后他们可以添加一个号码，然后点击该组标题会显示 Add Billing Id 的上下文菜单。用户还可以在不添加号码的情况下添加帐单ID，这很重要，因为这是我的数据不稳定的地方。让我们说网格看起来像：

OrderGroupType: Direct
    PONumber: 12345
        BillingId: abc

OrderGroupType: Direct
    BillingId: abc

我似乎无法弄清楚如何获取与当前组有关的数据行，因此我从网格中获取所有数据，然后搜索它并仅返回等于我的组名的行，然后我将该信息放入数据属性中，我在上下文菜单中提取信息：

groupText: ['Group Type: <b>{0} - {1} Item(s)</b>',
            'PO Number: <b>{0} - {1} Item(s)</b>',
            'Bill To: <b>{0} - {1} Item(s)</b>'
        ],
 formatDisplayField: [
    function (ordgrpTypVal) {
        //all rowData
        var allRowData = $(this).jqGrid("getGridParam", "data");
        //this row data
        var rowData = $.grep(allRowData, function (v) {
            return v.OrderGroupType == grpTypVal;
        });
        var elementId = "groupType_" + grpTypVal.replace(/\s+/g, '') + "_" + i++;
        var newElement = '<span id="' + elementId + '" data-rowdata=\'' + JSON.stringify(rowData).replace(/'/g, "\\'") +'\' class="groupTypeMenu" style="cursor: pointer; color: blue;">' + grpTypVal + '</span>';
        return newElement;
    }
]

我出错的地方是我在formatDisplayField属性中还有两个函数，我还在子组上设置了链接/按钮：

formatDisplayField: [
    function (grpTypVal) {
        //all rowData
        var allRowData = $(this).jqGrid("getGridParam", "data");
        //this row data
        var rowData = $.grep(allRowData, function (v) {
            return v.OrderGroupType == grpTypVal;
        });
        var elementId = "groupType_" + grpTypVal.replace(/\s+/g, '') + "_" + i++;
        var newElement = '<span id="' + elementId + '" data-rowdata=\'' + JSON.stringify(rowData).replace(/'/g, "\\'") +'\' class="groupTypeMenu" style="cursor: pointer; color: blue;">' + grpTypVal + '</span>';
        return newElement;
    },
    function (poVal) {
        if (poVal !== null) {
            //all rowData
            var allRowData = $(this).jqGrid("getGridParam", "data");
            //this row data
            var rowData = $.grep(allRowData, function (v) {
                return v.PoNumber == poVal;
            });
            var elementId = "PoNum_" + poVal.replace(/\s+/g, '') + "_" + i++;
            var newElement = '<span id="' + elementId + '" data-rowdata=\'' + JSON.stringify(rowData).replace(/'/g, "\\'") + '\'  class="poMenu" style="cursor: pointer; color: blue;">' + poVal + '</span>';
            return newElement;
        }
        else
            return null;
    },
    function (billToVal, val, props, index, obj) {
        if (billToVal !== null) {
            //all rowData
            var allRowData = $(this).jqGrid("getGridParam", "data");
            //this row data
            var rowData = $.grep(allRowData, function (v) {
                return v.BillToId == billToVal;
            });
            var elementId = "BillTo_" + billToVal.replace(/\s+/g, '') + "_" + i++;
            var newElement = '<span id="' + elementId + '" data-rowdata=\'' + JSON.stringify(rowData).replace(/'/g, "\\'") + '\' class="billToMenu" style="cursor: pointer; color: blue;">' + billToVal + '</span>';
            return newElement;
        }
        else
            return null;
    }
]

当我的帐单ID具有相同帐单ID的父帐号时，这会中断。如果我在两个不同的订单组中有两个完全相同的po数字，它也可能会崩溃。

所以我的问题是如何才能更可靠地获取与该组相关的数据？我更喜欢我只得到与特定组有关的rowData。如果我能获得更多数据，我可以看到发生这种情况，可能是这样的：

formatDisplayField: [
    function (billToVal, val, props, index, obj) {
        if (billToVal !== null) {
            //all rowData
            var allRowData = $(this).jqGrid("getGridParam", "data");
            //this row data
            var rowData = $.grep(allRowData, function (v) {
                return v.BillToId == billToVal **&& v.PoNumber == obj.PoNumber && v.OrderGroupType == obj.OrderGroupType;**
            });
            var elementId = "BillTo_" + billToVal.replace(/\s+/g, '') + "_" + i++;
            var newElement = '<span id="' + elementId + '" data-rowdata=\'' + JSON.stringify(rowData).replace(/'/g, "\\'") + '\' class="billToMenu" style="cursor: pointer; color: blue;">' + billToVal + '</span>';
            return newElement;
        }
        else
            return null;
    }
]

下面的小提琴说明了我的问题;要查看它的工作情况，请点击MANUALS并选择编辑，您会看到它会将手册下的行突出显示为橙色，但是，如果您点击1下的DSPO并点击编辑，您会看到所有的颜色帐单ID为1的行而不仅仅是您选择的行组...要编辑的行应为橙色。 JSFIDDLE

任何帮助都是惊人的，我尝试了很多不同的东西，而且数据不可靠。谢谢！

Answer 1

在我看来，你的代码太复杂了。第一个非常重要的问题：您的输入数据不包含具有唯一值的id属性。您只能放置JSON.stringify(rowData)而不是逗号分隔的rowid列表，因为您的输入数据没有id值。例如，如果RecurringOrderLineTemplateId列的值是唯一的，则可以在列中添加key: true，jqGrid将使用该值作为rowid。如果复合键（RecurringOrderHeaderTemplateId，RecurringOrderLineTemplateId）是唯一的，那么您可以使用值id填充item.RecurringOrderHeaderTemplateId + "_" + item.RecurringOrderLineTemplateId属性。您可以使用RecurringOrderHeaderTemplateId从rowid获取值RecurringOrderLineTemplateId和rowid.split("_")。设置好的rowid不会解决你的主要问题，但它会节省你的时间。

现有代码中的主要问题在于我$.grep 对formatDisplayField回调内的整个数据的使用情况。从性能的角度和共同的设计来看，这似乎是错误的。网格的数据已经被分组，但您在每个formatDisplayField调用内再次尝试重做相同的内容。我不喜欢它。

我不确定我是否完全了解您尝试实施的内容。在我看来，您只能在列标题的data-rowdata元素上设置<span>，以便稍后在上下文菜单的$link.data('rowdata')处理程序中使用click。你可以添加

var $tr = $(e.target).closest("tr.jqgroup"),
    jqgrouplevel = parseInt($($tr).data("jqgrouplevel"), 10);

在build的{{1}}回调内，并且只使用

contextMenu

修改过的演示版https://jsfiddle.net/dv4v8mmz/3/使用上面的代码，在“.billToMenu”和“.poMenu”中添加了一些edit: { ... callback: function () { for ($tr = $tr.next(); $tr.length; $tr = $tr.next()) { if ($tr.hasClass("jqgroup") && parseInt($tr.data("jqgrouplevel"), 10) <= jqgrouplevel) { break; // stop enumeration } else if ($tr.hasClass("jqgrow")) { $tr.addClass("markedForModification"); // mark the row } } //EditBillToHeader(rowData) }（仅复制代码）。你可以看到这种方法有效。

在分组中使用formatDisplayField

1 个答案: