2010-12-09 38 views
4

Je travaille avec un jqGrid qui est groupé en fonction de l'état ou de la province. Chaque rangée du groupe a une case à cocher. Je dois placer une case à cocher dans l'en-tête du groupe qui permet à l'utilisateur de sélectionner/désélectionner toutes les cases à cocher de la ligne dans ce groupe.Existe-t-il un moyen simple de sélectionner les lignes d'un groupe dans jqGrid?

En examinant le code HTML généré par jqGrid, je ne vois aucune classe ou ID lié au groupe sur les lignes d'un groupe. Je ne vois pas non plus un moyen d'ajouter une telle classe en utilisant les options de colonnes ou la configuration de groupe.

Des suggestions?

Répondre

1

Nous avons résolu ce même problème avec des sous-réseaux, et la solution peut être adaptable à un scénario de regroupement. Nous avons utilisé custom formatters pour ajouter des attributs de style et de données à la fois pour le lien d'en-tête/case à cocher et les cases à cocher de sous-grille. Ensuite, nous avons un lien ou une case à cocher dans la ligne d'en-tête avec un événement qui utilise jQuery pour sélectionner toutes les cases dans la sous-grille avec l'attribut et le style de données appropriés. Enfin, l'événement grid load complete ajoute le gestionnaire d'événements click pour le lien "check all".

Voici un exemple de formateur personnalisé pour la colonne de case à cocher de sous-grille. Notez l'attribut data-groupingId qui stocke une valeur utilisée pour lier la ligne d'en-tête aux lignes de sous-grille. Voici un exemple de formateur personnalisé pour la colonne "cocher tout". Notez l'attribut data-groupingId qui stocke une valeur utilisée pour lier la ligne d'en-tête aux lignes de sous-grille.

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; 
} 

est ici le cas d'achèvement de charge que les crochets les événements de clic pour les liens « vérifier tous les » créés dans le formatter ci-dessus.

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. 
    }); 
}, 

Enfin, voici la méthode qui fonctionne.

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

Cela a très bien fonctionné pour nous. Tout bien considéré, quand les choses se compliquent comme ça, je préfère avoir un modèle côté client pour recevoir des données du service web JSON et être la source d'autorité pour le jqGrid. Je pense que cela serait finalement préférable à ce que jqGrid saisisse les données elles-mêmes et avalise les objets de données réels, ce qui rend difficile ou impossible l'accès direct aux données à des fins de référence ou de traitement. Cependant, créer et gérer une séparation modèle/vue côté client n'est pas une tâche facile. Donc cela fonctionne comme une alternative rapide. Mais méfiez-vous, car cela peut devenir trop rapide.

1

Nous avons résolu le problème sans utiliser de sous-réseaux. Veuillez vérifier les points suivants s'ils correspondent à vos besoins.

code HTML commence ici

<%@ 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> 

code Cs commence ici

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; 
      } 
     } 
    } 
}