是否有一种直接的方法来选择 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 中组内的行？的主要内容，如果未能解决你的问题，请参考以下文章