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，以取消选择以前选定的来自同一组的行。只需为resetSelection数组中的每个rowid调用otherIdsOfTheGroup，然后从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。我包括隐藏＆＃34; Select All＆＃34;的列标题。按钮只是为了编写更少的代码。您可以实现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;
    },

<强> rowdata.Category;是表格分组的变量。唯一的问题是用户无法取消他/她已在组中选择的内容。所以它就像一个单选按钮设置。但它符合我的要求。希望我们可以改进这一点并引入无线电行为，以便在jqgrid中进行分组。谢谢大家。

jqgrid每组只选择一行

2 个答案: