有沒有一種直接的方式來選擇jqGrid中的組內的行？

我正在使用根據州或省進行分組的jqGrid。組中的每一行都有一個複選框。我需要在組標題中放置一個複選框，允許用戶選擇/取消選擇該組內的所有行復選框。有沒有一種直接的方式來選擇jqGrid中的組內的行？

在查看jqGrid生成的HTML時，我沒有看到組中的行與組相關的任何類或ID。我也沒有看到使用列選項或分組配置來添加這樣的類的方法。

有什麼建議嗎？

2010-12-09 Tim Colton

我們已經解決了與子網格相同的問題，該解決方案可能適用於分組方案。我們使用custom formatters爲標題鏈接/複選框和子網格複選框添加樣式和數據屬性。然後我們在標題行中有一個鏈接或複選框，其上有一個事件，它使用jQuery來選擇具有適當數據屬性和樣式的子網格中的所有複選框。最後，網格加載完成事件添加「全部檢查」鏈接的點擊事件處理程序。

以下是子網格複選框列的示例自定義格式化程序。請注意data-groupingId屬性，該屬性存儲用於將標題行與子網格行相關聯的值。

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

下面是「全部檢查」列的示例自定義格式化程序。請注意data-groupingId屬性，該屬性存儲用於將標題行與子網格行相關聯的值。

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

下面是加載完成事件，它鉤住上述格式化程序中創建的「檢查所有」鏈接的點擊事件。

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

最後，這是做這項工作的方法。

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

這對我們工作得非常好。所有事情都考慮到了，當事情變得如此複雜時，我寧願有一個客戶端模型來接收來自JSON Web服務的數據，併成爲jqGrid的權威來源。我認爲這最終會比使用jqGrid抓取數據本身併吞下實際數據對象更好，這使得直接獲取數據以供參考或處理是困難的或不可能的。但是，創建和管理客戶端模型/視圖分離並非輕而易舉的事情。所以這可以作爲一個快速的選擇。但要小心，因爲這可能會失控FAST。

來源

2011-05-26 15:48:49

我們已經解決了這個問題，而不使用子網格。請檢查以下是否符合您的條件。

HTML代碼開始從這裏

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

Cs的代碼開始在這裏

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

來源

2011-06-24 12:33:12

有沒有一種直接的方式來選擇jqGrid中的組內的行？

回答

相關問題