jqgrid每组只选择一行

Question

我们如何允许用户每组只选择一行？

我有以下代码。

var data = [
           { ActionItemId: "AAZ08702-0001104", StrarTime: "2007-10-01", Category: "General", CategoryDetails: "dummy text of industry. a galley of type ", TargetCategory: "200.00",
            TargetDateCategory: "10.00", ActualCategory: "210.00"}
        ];

        $("#jqGrid").jqGrid({
            data: data,
            datatype: "local",
            colModel: [
                { label: 'Action Item ID', name: 'ActionItemId',  key: true },
                { label: 'Start Time', name: 'StrarTime'},
                { label: 'Category', name: 'Category'},
                { label: 'Details', name: 'CategoryDetails', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
                { label: 'Target <Category>', name: 'TargetCategory' },
                { label: 'Target Date <Category>', name: 'TargetDateCategory'}
            ],
            loadonce: true,
            viewrecords: true,
            //width: 1000,
            height: 400,
            rowNum: 20,
            rowList: [20, 30, 50],
            rownumbers: true,
            rownumWidth: 25,
            multiselect: true,
            shrinkToFit: false,
            pager: "#jqGridPager",
            grouping: true,
            groupingView: {
                groupField: ["Category"],
                groupColumnShow: [true],
                groupText: ["Category: <b>{0}</b>"],
                groupOrder: ["asc"],
                groupSummary: [false],
                groupCollapse: false

            }
        });

我需要禁用每列选择多行的功能。有可能吗？

分组功能中是否有一个设置可以按照 mu 要求启用？还是应该定制开发？

注意：我只添加了一列以避免问题中的代码很长

Answer 1

其中一个可能的实现可能是添加add 回调，如果已经选择了同一组中的另一行，则返回false。实现示例如下：

beforeSelectRow: function (rowid, e) {
    var selarrrow = $(this).jqGrid("getGridParam", "selarrrow"),
        $tr = $(e.target).closest("tr.jqgrow"),
        otherIdsOfTheGroup;

    if ($tr.length > 0) {
        otherIdsOfTheGroup =
            // get all rows of the group before the current
            $tr.prevUntil("tr.jqgroup")
                // add all rows of the group after the current
                .add($tr.nextUntil("tr.jqgroup"))
                // enum all the rows of the group without the current
                .map(function () {
                    // test whether the rowid is already selected
                    if ($.inArray(this.id, selarrrow) >= 0) {
                        // add the rowid to the array of returned values
                        return this.id;
                    }
                });
        // otherIdsOfTheGroup contains the array of rowids of the rows
        // from the same group, which are already selected
        if (otherIdsOfTheGroup.length > 0) {
            return false; // prevent selection
        }
    }
    return true; // allow selection
}

见the demo

更新：可以轻松修改 aboce vode 以取消选择以前选择的行来自同一组。只需为 otherIdsOfTheGroup 数组中的每个 rowid 调用 resetSelection 并从 otherIdsOfTheGroup 返回 true 以允许选择：

beforeSelectRow: function (rowid, e) {
    var $this = $(this),
        selarrrow = $this.jqGrid("getGridParam", "selarrrow"),
        $tr = $(e.target).closest("tr.jqgrow"),
        otherIdsOfTheGroup;

    if ($tr.length > 0) {
        otherIdsOfTheGroup =
            // get all rows of the group before the current
            $tr.prevUntil("tr.jqgroup")
                // add all rows of the group after the current
                .add($tr.nextUntil("tr.jqgroup"))
                // enum all the rows of the group without the current
                .map(function () {
                    // test whether the rowid is already selected
                    if ($.inArray(this.id, selarrrow) >= 0) {
                        // add the rowid to the array of returned values
                        return this.id;
                    }
                });
        // otherIdsOfTheGroup contains the array of rowids of the rows
        // from the same group, which are already selected
        if (otherIdsOfTheGroup.length > 0) {
            $.each(otherIdsOfTheGroup, function () {
                $this.jqGrid("resetSelection", this);
            });
        }
    }
    return true; // allow selection
}

见the next demo。我包括隐藏“全选”按钮的列标题只是为了编写更少的代码。您可以实现onSelectAll 回调并允许从每个组中仅选择一个（例如第一行）行。

Answer 2

我设法使用以下代码解决了这个问题。

        beforeSelectRow: function (id, e) {
            var rowdata = $("#jqGrid").getRowData(id);
            var category = rowdata.Category;
            var selectedRowTR = $("#jqGrid").find("tr[id='" + id + "']");
            var groupTRs = $("#jqGrid").find("tbody> tr.jqgrow > td[title='" + category + "']").parents("tr");

            var ids = groupTRs.map(function () {
                return this.id;
            }).get();

            var selectedIDs = $("#jqGrid").getGridParam("selarrrow");

            var commonValues = [];
            var i, j;
            var arr1Length = ids.length;
            var arr2Length = selectedIDs.length;

            for (i = 0; i < arr1Length; i++) {
                for (j = 0; j < arr2Length; j++) {
                    if (ids[i] === selectedIDs[j]) {
                        commonValues.push(ids[i]);
                    }
                }
            }

            for (var i = 0; i < commonValues.length; i++) {
                $("#jqGrid").jqGrid('setSelection', commonValues[i], false);

            }

        return true;
    },

行数据.Category;是表被分组的变量。唯一的问题是用户无法取消勾选他/她已经在组中选择的内容。所以它就像一个单选按钮集。但它适用于我的要求。 希望我们可以改进这一点，并在 jqgrid 中引入无线电类型的分组行为。 谢谢大家。