0

enter code here継承したコードにグリッドビューがあり、rowdatabound を使用して JavaScript をチェックボックスに追加しています。これは、行のチェックボックスをヘッダーのマスター チェックボックスで設定できるようにするためです。そして、それはすべてうまくいきます。問題はパフォーマンスです。ユーザーはページングを望んでおらず、これらのグリッドの一部には何千行もある場合があります。Attributes.Add() を使用して JavaScript をフックしない場合、レンダリングは高速です。javascript インジェクションに rowdatabound を使用すると、わずか 600 行の場合、パフォーマンスが瞬時から 1 分近くになります。それは正しくありません。

だから私は2つの質問があります：

1)rowdatabound がこれらの JavaScript インジェクションを処理するのに永遠にかかるのは正常ですか?

2) もしそうなら、行のチェックボックスを設定してヘッダーのマスターチェックボックスと連携させるよりも速い代替手段として何をお勧めしますか?

そして、私はフォーラムに参加したばかりなので、すでに助けてくれた皆さんに感謝したいと思います。私は何週間も潜伏してきましたが、皆さんの知識と支援への意欲は非常に印象的です.

アップデート：

助けてくれてありがとう。これが私がやったことです：

まず、マスター ページ環境の clientID を取得するために、aspx にいくつかの変数を設定する必要がありました。

 <script language="javascript" type="text/javascript">
  //set the control id required by the external javascript 
  var ChangedAddressesGridViewID = '<%=ChangedAddressesGridView.ClientID%>';
 </script>

次に、ヘッダー チェックボックスの onclick をヘッダー関数の名前に設定し、子チェックボックスの onclick を子クリック関数の名前に設定します。クリックしたチェックボックス自体の "this"、GridView の MasterPage フレンドリ名、および列を表す数値の 3 つのパラメーターのみを指定しました。ハードコーディングされていることはわかっていますが、列は動的ではないため、現時点では問題ありません。

<asp:GridView id="ChangedAddressesGridView" runat="server" AutoGenerateColumns="False" >
    <Columns>
        <asp:BoundField datafield="AddressId" headertext="ID" />
        <asp:BoundField datafield="Code" headertext="Code" />
        <asp:BoundField datafield="Facility" headertext="Facility" />
        <asp:BoundField datafield="Address" headertext="Address" /> 

        <asp:TemplateField headertext="Select">
            <HeaderTemplate>
                <asp:Label id="LBLOverride" runat="server" text="Override" font-size="Smaller" font-names="Arial"></asp:Label><br />
                <asp:CheckBox id="chkBxHeader1" runat="server" onclick="HeaderClick(this,ChangedAddressesGridViewID,'4');"></asp:CheckBox> <br />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox id="chkBxSelect1" runat="server" onclick="ChildClick(this,ChangedAddressesGridViewID,'4');" ></asp:CheckBox> 
            </ItemTemplate>
            <headerstyle horizontalalign="Center" />
            <itemstyle horizontalalign="Center" />
        </asp:TemplateField>    

        <asp:BoundField datafield="CAddress" headertext="Corrected Address" />

        <asp:TemplateField headertext="Select">
            <HeaderTemplate>
                <asp:Label id="lblChange" runat="server" text="Change" font-size="Smaller" font-names="Arial"></asp:Label><br />
                <asp:CheckBox id="chkBxHeader2" runat="server" onclick="HeaderClick(this,ChangedAddressesGridViewID,'6');"></asp:CheckBox> 
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox id="chkBxSelect2" runat="server" onclick="ChildClick(this,ChangedAddressesGridViewID,'6');"></asp:CheckBox> 
            </ItemTemplate>
            <headerstyle horizontalalign="Center" />
            <itemstyle horizontalalign="Center" />
        </asp:TemplateField>  

     </Columns>
</asp:GridView>

これを機能させるJavaScriptは次のとおりです。

function GetHeaderCheckBox(grid, cellnum) {
    cell = grid.rows[0].cells[cellnum];
    for (j = 0; j < cell.childNodes.length; j++) {
        if (cell.childNodes[j].type == "checkbox") {return cell.childNodes[j]; }
    }
    return false;   
}

function CheckBoxIsChecked(row, cellnum) {
    cell = row.cells[cellnum];
    for (j = 0; j < cell.childNodes.length; j++) {
        if (cell.childNodes[j].type == "checkbox") {
            return cell.childNodes[j].checked;
        }
    }
}

function SetCheckBox(row, cellnum, checkedValue) {
     cell = row.cells[cellnum];
     for (j = 0; j < cell.childNodes.length; j++) {
         if (cell.childNodes[j].type == "checkbox") {
             cell.childNodes[j].checked = checkedValue;
         }
     }
}

function HeaderClick(HeaderCheckBox, GridViewID, checkboxcolumn) {

    var checkedValue;
    var grid = document.getElementById(GridViewID);
    var TotalChkBx = grid.rows.length;

    if (HeaderCheckBox.checked == true) { checkedValue = true; } else { checkedValue = false; }

    for (var n = 1; n < TotalChkBx; n++) {
        SetCheckBox(grid.rows[n], checkboxcolumn, checkedValue);
    };
}

function ChildClick(RowCheckBox, GridViewID, checkboxcolumn) {

    var grid = document.getElementById(GridViewID);
    var HeaderCheckBox = GetHeaderCheckBox(grid, checkboxcolumn);
    var TotalChkBx = grid.rows.length;
    var TotalChkBxChecked = 0;

    for (var n = 1; n < TotalChkBx; n++) {
        if (CheckBoxIsChecked(grid.rows[n], checkboxcolumn)) { TotalChkBxChecked++; }
    };

    if (TotalChkBxChecked == TotalChkBx - 1) { HeaderCheckBox.checked = true; } else { HeaderCheckBox.checked = false; }
}

そこにあります。これがほとんどの同様の例と異なる点の 1 つは、単に「入力」リストを調べるのではなく、列ごとに移動したかったことです。これは、2 つのチェックボックス列があり、「入力」を使用して、非常に面倒になることなくそれらを分離しておく方法がわからなかったためです。そのため、ここでこれを行う方法を理解するのに役立つ例を見つけました。

http://technico.qnownow.com/how-to-delete-multiple-rows-from-gridview-with-checkboxes/

また、不要なパラメーターをさらに排除するために、子関数にヘッダー チェックボックスを独自に割り当てさせました。

とにかく、今ではどこにでもドロップできるヘッダー/子チェックボックスの全選択パターンがあります。以前のバージョンでは、特定のチェックボックス名を検索する必要があったため、その 1 つの列に限定されていたため、必要な場所に機能をコピーして貼り付ける必要がありました。違いが忍び込み、一貫性がなく、間違った行動をとっていました。このソリューションでは、これまでのところエラーはなく、どこでもまったく同じ動作をしています。

また、rowdatabound はありません。人生は素晴らしい。

皆さんに改めて感謝します。皆さんのおかげで、問題のさまざまな部分を考えることができました。

4

2 に答える 2

0

私の理解が正しければ、JavaScript を追加してマスターのチェックボックスと対話し、内部のすべてのチェックボックスをオン/オフにしますGridView

あなたはネイコードを提供しておらず、上記の私の質問にも答えていないので、これは私の仮定です....

この場合、クライアント側で JQuery を使用して同じ効果を得ることができます。

例：

<script>
    $(function () {
        var $grid = $("table[id$=myCustomGridView]");
        var $rows = $("> tbody > tr:not(:has(table, th))", $grid);
        var $master = $("input:checkbox[id$=masterCheck]");
        var $gridChecks = $("input:checkbox", $rows);

        $master.change(function (e) {
            e.preventDefault();

            $gridChecks.prop("checked", $master.is(":checked"));
        });

        $gridChecks.change(function (e) {
            e.preventDefault();

            var masterValue = true;

            for (var i = 0; i < $gridChecks.length; i++) {
                var $x = $gridChecks.eq(i);

                if (!$x.is(":checked")) {
                    masterValue = false;
                    break;
                }
            }

            $master.prop("checked", masterValue);
        });
    });
</script>
<asp:CheckBox Text="Check/Uncheck all" runat="server" ID="masterCheck" />
<asp:GridView runat="server" ID="myCustomGridView">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="myCheckBox" Text='<%# Eval("job_desc") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

これはライブサンプルです

于 2012-10-14T04:39:55.000 に答える
0

JavaScriptを使用せずにバックエンドから同じことを行うことができます. CheckedChangedこれを行うには、ヘッダー チェックボックスの機能を使用します。コードは次のようになります-

protected void chkAll_CheckedChanged(object sender, EventArgs e)
{
    CheckBox chk = (CheckBox)GridView1.HeaderRow.FindControl("chkAll");
    if (chk.Checked)
    {
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            CheckBox chkrow = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
            chkrow.Checked = true;
        }

    }
    else
    {
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            CheckBox chkrow = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
            chkrow.Checked = false;
        }
    }

}

これがどのように機能するか教えてください。

于 2012-10-14T04:39:59.090 に答える