是否有一种直接的方法来选择 jqGrid 中组内的行?

Posted

技术标签:

【中文标题】是否有一种直接的方法来选择 jqGrid 中组内的行?【英文标题】:Is there a straight-forward way to select the rows within a group in jqGrid? 【发布时间】:2011-05-23 01:53:22 【问题描述】:

我正在使用基于州或省分组的 jqGrid。组中的每一行都有一个复选框。我需要在组标题中放置一个复选框,允许用户选择/取消选择该组中的所有行复选框。

在查看 jqGrid 生成的 html 时,我没有在组内的行上看到任何与组相关的类或 ID。我也看不到使用列选项或分组配置添加此类的方法。

有什么建议吗?

【问题讨论】:

【参考方案1】:

我们已经用子网格解决了同样的问题,并且该解决方案可能适用于分组场景。我们使用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 自己抓取数据并吞下实际的数据对象更可取,这使得直接获取数据以供参考或处理变得困难或不可能。但是,创建和管理客户端模型/视图分离并非易事。所以这是一个快速的选择。但要小心,因为这可能会很快失控。

【讨论】:

【参考方案2】:

我们在不使用子网格的情况下解决了这个问题。 请检查以下是否符合您的要求。

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;
            
        
    

【讨论】:

以上是关于是否有一种直接的方法来选择 jqGrid 中组内的行?的主要内容,如果未能解决你的问题,请参考以下文章

如何围绕组内的一个点旋转 Three.js 组?

jqgrid列宽自动

选择组内的最高记录[重复]

是否有一种 OCP 友好的方式来动态选择 DbContext 中要访问的集合?

如何更改 jqGrid 中的字体大小?

Blender Python选择同一组内的对象?