주 또는도를 기준으로 그룹화 된 jqGrid로 작업하고 있습니다. 그룹 내의 각 행에는 확인란이 있습니다. 그 그룹 내에서 모든 행 체크 박스를 선택/선택 해제 할 수있는 그룹 헤더에 체크 박스를 배치해야합니다.jqGrid에서 그룹 내의 행을 선택하는 간단한 방법이 있습니까?
jqGrid 생성 HTML을 보면 그룹 내의 행에 그룹 관련 ID 또는 클래스가 표시되지 않습니다. 또한 열 옵션 또는 그룹화 구성을 사용하여 클래스를 추가하는 방법을 볼 수 없습니다.
제안 사항?
우리는 subgrids와 동일한 문제를 해결했으며 해결 방법은 그룹화 시나리오에 적용 할 수 있습니다. custom formatters을 사용하여 헤더 링크/체크 박스와 서브 그리드 체크 박스 모두에 스타일 및 데이터 속성을 추가했습니다. 그런 다음 jQuery를 사용하여 적절한 데이터 속성 및 스타일을 가진 subgrid의 모든 체크 박스를 선택하는 이벤트가있는 헤더 행에 링크 또는 체크 박스가 있습니다. 마지막으로 그리드로드 완료 이벤트는 "모두 검사"링크에 대한 클릭 이벤트 처리기를 추가합니다.
다음은 subgrid 체크 박스 열에 대한 사용자 정의 포맷터의 예입니다. 헤더 행을 서브 그리드 행과 연관시키는 데 사용되는 값을 저장하는 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 웹 서비스에서 데이터를 받고 jqGrid에 대한 신뢰할 수있는 소스가되는 클라이언트 측 모델이 필요합니다. jqGrid가 데이터 자체를 가져와 실제 데이터 객체를 삼키는 것이 궁극적으로 바람직하다고 생각합니다. 따라서 참조 또는 처리를 위해 직접 데이터를 얻는 것이 어렵거나 불가능합니다. 그러나 클라이언트 측 모델/뷰 분리를 생성하고 관리하는 것은 간단한 작업이 아닙니다. 그래서 이것은 빠른 대안으로 작동합니다. 그러나 이것이 조속히 빠져 나올 수 있기 때문에 조심하십시오.
우리는 서브 그리드를 사용하지 않고이 문제를 해결했습니다. 귀하의 요구 사항과 일치하는지 다음을 확인하십시오.
<%@ 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>
고사 코드가 여기
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;
}
}
}
}
HTML 코드를 시작합니다