Gibt es eine einfache Möglichkeit, die Zeilen innerhalb einer Gruppe in jqGrid auszuwählen?

Question

Ich arbeite mit einem jqGrid, das auf der Grundlage von Staat oder Provinz gruppiert ist. Jede Zeile innerhalb der Gruppe hat ein Kontrollkästchen. Ich muss ein Kontrollkästchen in der Kopfzeile der Gruppe platzieren, das es dem Benutzer ermöglicht, alle Kontrollkästchen der Zeile innerhalb dieser Gruppe zu aktivieren/deaktivieren.

Wenn ich mir das von jqGrid erzeugte HTML ansehe, sehe ich keine Klassen oder IDs, die sich auf die Zeilen innerhalb einer Gruppe beziehen. Ich sehe auch keine Möglichkeit, eine solche Klasse über die Spaltenoptionen oder die Gruppierungskonfiguration hinzuzufügen.

Irgendwelche Vorschläge?

Answer 1

Wir haben dasselbe Problem mit Teilrastern gelöst, und die Lösung lässt sich möglicherweise an ein Gruppierungsszenario anpassen. Wir haben benutzerdefinierte Formatierer um Styling- und Datenattribute sowohl für den Link/das Kontrollkästchen in der Kopfzeile als auch für die Kontrollkästchen in den Unterrastern hinzuzufügen. Dann haben wir einen Link oder ein Kontrollkästchen in der Kopfzeile mit einem Ereignis, das jQuery verwendet, um alle Kontrollkästchen im Untergitter mit dem entsprechenden Datenattribut und Stil auszuwählen. Schließlich fügt das Ereignis "grid load complete" den Click-Event-Handler für den Link "check all" hinzu.

Hier ist ein Beispiel für einen benutzerdefinierten Formatierer für die Spalte mit dem Kontrollkästchen im Untergitter. Beachten Sie das data-groupingId-Attribut, das einen Wert speichert, der verwendet wird, um die Kopfzeile mit den Zeilen des Unterrasters zu verknüpfen.

function checkBoxColumnFormatter(cellvalue, options, rowObject) {
    return "<input type=\"checkbox\"" + data-groupingId=\"" + rowObject.GroupingId + "\" class=\"subgridCheck\" />";
}

Hier ist ein Beispiel für einen benutzerdefinierten Formatierer für die Spalte "check all". Beachten Sie das data-groupingId-Attribut, das einen Wert speichert, der verwendet wird, um die Kopfzeile mit den Untergitterzeilen zu verknüpfen.

function checkAllColumnFormatter(cellValue, options, rowObject) {
    var link = $("<a class=\"checkAll\" href=\"#\" data-groupingId=\"" + rowObject.Id + "\">Check All</a>");

    var linkHtml = $("<div>").append(link.clone()).remove().html();

    return linkHtml;
}

Hier ist das Load-Completion-Ereignis, das die Klick-Ereignisse für die "Check-All"-Links, die im obigen Formatierer erstellt wurden, einbindet.

function mainGridLoadComplete(data) {
    $(".checkAll").click(function (e) {
        checkSubGridRows(
            $(this).attr("data-groupingId")); // Use the data attribute to specify the value that will be on all the *relevant* subgrid checkboxes.
    });
},

Und schließlich ist da noch die Methode, die die Arbeit erledigt.

function checkSubGridRows(groupingId) {
    $("#GridId .subgridCheck[data-groupingId=\"" + groupingId + "\"]").not(":disabled").each(
        function () {
            $(this).attr("checked", "checked");
        });
}

Das hat bei uns sehr gut funktioniert. Alles in allem würde ich, wenn die Dinge so kompliziert werden, lieber ein clientseitiges Modell haben, das Daten vom JSON-Webdienst empfängt und die maßgebliche Quelle für das jqGrid ist. Ich denke, dass dies letztlich besser wäre, als wenn das jqGrid die Daten selbst abgreift und die eigentlichen Datenobjekte verschluckt, was es schwierig oder unmöglich macht, die Daten direkt zu referenzieren oder zu verarbeiten. Allerdings ist das Erstellen und Verwalten einer clientseitigen Modell/View-Trennung kein triviales Unterfangen. Daher funktioniert dies als schnelle Alternative. Aber Vorsicht, denn das kann schnell aus dem Ruder laufen.

Answer 2

Wir hatten das Problem ohne die Verwendung von Unterrastern gelöst. Bitte prüfen Sie im Folgenden, ob es Ihrer Anforderung entspricht.

Der HTML-Code beginnt hier

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Jquery3._Default" %>

<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css" />

    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />

    <script src="js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>

    <script src="js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
<%--Html Code begins here --%>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            /**
            * Format the column [AsOfDate].
            * Places label for the columns in the grouped rows
            * places Checkbox in the Group header
            */
            function formatAsOfDate(cellvalue, options, rowObject)
            {
                if (parseInt(options.rowId) > 0)
                {

                    return "<label>" + cellvalue + "<label/>";
                }
                else
                {
                    return "<input type=checkbox value=" + cellvalue + " onclick='SelectCheckbox(this," + options.rowId + ")'/>" + cellvalue;
                }

            }

            /**
            * Format the column [DebtStatusId].
            * Places label for the columns in the grouped rows
            * places Checkbox in the Group header
            */
            function formatDebtStatusId(cellvalue, options, rowObject)
            {
                if (parseInt(options.rowId) > 0)
                {

                    return "<label>" + cellvalue + "<label/>";
                }
                else
                {
                    return "<input type=checkbox value=" + cellvalue + " onclick='SelectCheckbox(this," + options.rowId + ")'  />" + cellvalue;
                }

            }

            /**
            * To select/Deselect all the grouped rows based on the checkbox selected at group level.
            */
            function SelectCheckbox(chkbox, groupingId)
            {

                var grid = jQuery("#<%= JQGrid1.ClientID %>");

                var Rows = grid.find("TR");
                $.each(Rows, function(i, item)
                {
                    var label = $(item).find("label");
                    if (label.length > 0)
                    {
                        $.each(label, function(i, labelitem)
                        {
                            if (labelitem.innerText === chkbox.defaultValue)
                            {
                                var CheckBox = $(item).find("INPUT.cbox");
                                $(chkbox).click(function()
                                {
                                    if ($(this).attr("checked"))
                                    {
                                        CheckBox.attr("checked", "checked");
                                    }
                                    else
                                    {
                                        CheckBox.removeAttr("checked");
                                    }
                                })
                            }
                        })

                    }
                });
            }

            /**
            * To Edit the Selected Row(s).
            */
            function Selectedrow()
            {
                var grid = jQuery("#<%= JQGrid1.ClientID %>");
                var rowKey = grid.getGridParam("selarrrow");
                if (rowKey)
                {
                    grid.editGridRow(rowKey, grid.editDialogOptions, { reloadAfterSubmit: false });
                }
                else
                {
                    alert("No rows are selected");
                }

            }

        </script>

        <span style="font-size: 140%"><b>Group grid by:</b> </span>
        <asp:DropDownList runat="server" ID="groupColumnDdl" AutoPostBack="true">
            <asp:ListItem Text="DebtStatusID" Value="DebtStatusID" />
            <asp:ListItem Text="AsOfDate" Value="AsOfDate"></asp:ListItem>
        </asp:DropDownList>
        <trirand:JQGrid ID="JQGrid1" runat="server" Height="200px" OnRowEditing="JQGrid1_RowEditing"
            AppearanceSettings-Caption="First Grid"  MultiSelect="true">
            <Columns>
                <trirand:JQGridColumn DataField="DebtID" PrimaryKey="True" />
                <trirand:JQGridColumn DataField="SequenceNumber" Editable="true" />
                <trirand:JQGridColumn DataField="DebtStatusID">
                 <Formatter>
                        <trirand:CustomFormatter FormatFunction="formatDebtStatusId" />
                    </Formatter>
                </trirand:JQGridColumn>
                <trirand:JQGridColumn DataField="AsOfDate" DataFormatString="{0:d}">
                    <Formatter>
                        <trirand:CustomFormatter FormatFunction="formatAsOfDate" />
                    </Formatter>
                </trirand:JQGridColumn>
                <trirand:JQGridColumn DataField="Alias" Editable="true" />                
            </Columns>
            <SortSettings InitialSortColumn="DebtID"></SortSettings>
            <EditDialogSettings CloseAfterEditing="false" />
            <AppearanceSettings ShowRowNumbers="True" Caption="First Grid"></AppearanceSettings>
            <ToolBarSettings ShowEditButton="true" ShowRefreshButton="True" />
        </trirand:JQGrid>
        <input type="button" onclick="Selectedrow()" value="Edit" />
        <div style="display: none;">
            <input type='checkbox' id="chkTest" runat="server" />
        </div>
    </div>
    </form>
</body>
</html>

Der Cs-Code beginnt hier

    using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using Trirand.Web.UI.WebControls;

namespace Jquery3
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            JQGrid1.DataSource = GetData();
            JQGrid1.DataBind();

            GroupField gf = new GroupField();
            //Dynamic Grouping based on the combo value selected
            switch (groupColumnDdl.SelectedValue)
            {
                case "DebtStatusID":
                    gf = new GroupField { DataField = "DebtStatusID", HeaderText = "DebtStatus ID : {0}", GroupSortDirection = Trirand.Web.UI.WebControls.SortDirection.Asc, ShowGroupColumn = true, ShowGroupSummary = false };
                    break;
                case "AsOfDate":
                    gf = new GroupField
                    {
                        DataField = "AsOfDate",
                        HeaderText = "AsOfDate : {0}",

                        GroupSortDirection = Trirand.Web.UI.WebControls.SortDirection.Asc,
                        ShowGroupColumn = true,
                        ShowGroupSummary = false
                    };
                    break;
            }
            JQGrid1.GroupSettings.GroupFields.Add(gf);
        }

        protected void JQGrid1_RowEditing(object sender, Trirand.Web.UI.WebControls.JQGridRowEditEventArgs e)
        {

            var rows = e.RowKey;
            ArrayList ArrayOfIds = new ArrayList(rows.Split(new char[] { ',' }));
            for (int i = 0; i < ArrayOfIds.Count; i++)
            {
                DataSet ds = GetData();
                DataTable dt = ds.Tables[0];
                dt.PrimaryKey = new DataColumn[] { dt.Columns["DebtID"] };
                DataRow rowEdited = dt.Rows.Find(ArrayOfIds[i]);
                rowEdited["SequenceNumber"] = e.RowData["SequenceNumber"];
                rowEdited["DebtStatusID"] = e.RowData["DebtStatusID"];
                rowEdited["Alias"] = e.RowData["Alias"];
            }
            JQGrid1.DataSource = GetData();
            JQGrid1.DataBind();
        }

        protected DataSet GetData()
        {
            if (Session["EditDialogData"] == null)
            {
                string ConnectionString = "Data Source =192.168.0.20; Initial Catalog = LW_TTX_IMPL; User ID=Development;password=jk;";
                DataSet ds = new DataSet();
                SqlConnection sqlconn = new SqlConnection(ConnectionString);
                SqlDataAdapter sqlAdp = new SqlDataAdapter();
                sqlAdp.SelectCommand = new SqlCommand("SELECT DebtID,SequenceNumber,DebtStatusID,AsOfDate,'Alias'+Alias Alias FROM Debt_Profile", sqlconn);
                sqlAdp.Fill(ds);
                Session["EditDialogData"] = ds;
                return ds;
            }
            else
            {
                return Session["EditDialogData"] as DataSet;
            }
        }
    }
}