Есть ли прямой способ выбрать строки в группе в jqGrid? - PullRequest
Новая
       26

Есть ли прямой способ выбрать строки в группе в jqGrid?

4 голосов
/ 09 декабря 2010

Я работаю с jqGrid, который сгруппирован по штатам или провинциям. Каждая строка в группе имеет флажок. Мне нужно установить флажок в заголовке группы, который позволяет пользователю выбирать / снимать флажки всех строк в этой группе.

Глядя на сгенерированный jqGrid HTML, я не вижу классов или идентификаторов, связанных с группами, в строках внутри группы. Я также не вижу способа добавить такой класс, используя параметры столбца или конфигурацию группировки.

Есть предложения?

Ответы [ 2 ]

1 голос
/ 24 июня 2011

Мы решили проблему без использования подсеток. Пожалуйста, проверьте следующее, соответствует ли оно вашим требованиям.

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;
            }
        }
    }
}
1 голос
/ 26 мая 2011

Мы решили эту же проблему с подсетями, и решение может быть адаптировано к сценарию группировки.Мы использовали пользовательские средства форматирования , чтобы добавить стили и атрибуты данных как для ссылки / флажка заголовка, так и для флажка подсетки.Затем у нас есть ссылка или флажок в строке заголовка с событием, которое использует 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 и быть авторитетным источником для jqGrid.Я думаю, что в конечном итоге было бы предпочтительнее иметь jqGrid для захвата самих данных и проглатывания реальных объектов данных, что затрудняет или делает невозможным получение данных непосредственно для ссылки или обработки.Однако создание и управление разделением модели / представления на стороне клиента не является тривиальной задачей.Так что это работает как быстрая альтернатива.Но будьте осторожны, потому что это может выйти из-под контроля БЫСТРО.

...