最近のトラックバック

2017年10月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Google AdSense2

« サービスアプリ追加(データテキストファイルビューア) | トップページ | C#でCSV・TSVファイル作成 »

ASP.NET(C#)でJQuery+TableSorterを利用

ASP.NET(C#)とJQuery+TableSorterを連携してみた。
対象はグリッド系コントロールのGridView・ListView・Repeater・DataList・DataGrid。



■開発・運用環境
  • Visual Studio 2008 SP1
  • .NET Framework 3.5 SP1
  • ASP.NET3.5

■ブラウザ
  • IE6,IE8
  • Firefox3
  • Opera9
  • Chrome2.0


TableSorterではtableタグ内にtheadタグが必須である。
しかしASP.NETのグリッド系コントロールは「デフォルト設定ではtheadを出力しない」もしくは「theadを出力できない」。(下表参照)
コントロール 出力可否(*1) 設定方法
GridView プロパティで設定。
ListView Templateコントロールにtableタグを記述。
Repeater Templateコントロールにtableタグを記述。
DataList × 「サーバサイド設定」「JavaScript(*2)」連携が必要。
DataGrid × 「サーバサイド設定」「JavaScript(*2)」連携が必要。
(*1)出力可否の基準は「簡単に出力できるか?」である。サーバサイドでもtheadタグの出力方法はあると思う。(方法は不明)。
(*2)JavaScript処理内でtableタグのinnerHTMLとouterHTMLに対して読み書きしているが、innerHTMLとouterHTMLにはブラウザ依存がある。

ASP.NETでTableSorterを利用する為には、この制限を突破しtheadタグを出力させる必要がある。

なお後述のサンプルソースではtheadのほかにtbodyも出力している。
本ページでは関係ないことだが他のテーブル操作プラグインでtbodyが必要な場合もあるため一応出力している。


■GridView
①Page_Load等で以下のプロパティ設定を行う。

GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

②JavaScriptでtablesorter()関数呼び出し。

$(function () {
    $("#GridView1").tablesorter();
};


■ListView
①aspxファイルでLayoutTemplate・ItemTemplateにtableタグを記述。

<asp:ListView ID="ListView1" runat="server">
    <LayoutTemplate>
        <table id="ListView1Table" class="tablesorter">
            <thead>
                <tr>
                    <th>No</th>
                    <th>文字列</th>
                </tr>
            </thead>
            <tbody>
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </tbody>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
            <tr>
                <td><%# Eval("No") %></td>
                <td><%# Eval("文字列") %></td>
            </tr>
    </ItemTemplate>
</asp:ListView>

②JavaScriptでtablesorter()関数呼び出し。

$(function () {
    $("#ListView1Table").tablesorter();
};


■Repeater
①aspxファイルでHeaderTemplate・ItemTemplate・FooterTemplateにtableタグを記述。

<asp:Repeater ID="Repeater1" runat="server">
     <HeaderTemplate>
        <table id="Repeater1Table" class="tablesorter">
            <thead>
                <tr>
                    <th>No</th>
                    <th>文字列</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
                <tr>
                    <td><%# Eval("No") %></td>
                    <td><%# Eval("文字列")%></td>
                </tr>
    </ItemTemplate>
    <FooterTemplate>
            </tbody>
        </table>
    </FooterTemplate>
</asp:Repeater>

②JavaScriptでtablesorter()関数呼び出し。

$(function () {
    $("#Repeater1Table").tablesorter();
};


■DataList
①aspxファイルでHeaderTemplate・ItemTemplate・FooterTemplateにtableタグを記述。

<asp:DataList ID="DataList1" runat="server">
    <HeaderTemplate>
        <table id="DataList1Table" class="tablesorter">
            <thead>
                <tr>
                    <th>No</th>
                    <th>文字列</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
                <tr>
                    <td><%# Eval("No") %></td>
                    <td><%# Eval("文字列")%></td>
                </tr>
    </ItemTemplate>
    <FooterTemplate>
            </tbody>
        </table>
    </FooterTemplate>
</asp:DataList>

②Page_Load等で以下のプロパティ設定を行う。

DataList1.RepeatLayout = RepeatLayout.Flow;

③JavaScriptで②の設定変更で出力されるspan・brタグを除去後、tablesorter()関数呼び出し。

$(function () {
    var objDataList1Table = document.getElementById("DataList1Table")
    if ($.browser.msie)
    {
        // IE
        var sDataList1TableHTML = objDataList1Table.outerHTML;
        sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+SPAN[>]+/gi, "");
        sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+\/SPAN[>]+/gi, "");
        sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+BR[>]+/gi, "");
        objDataList1Table.outerHTML = sDataList1TableHTML;
    }
    else
    {
        // FireFox,Opera,Chrome
        var sDataList1TableHTML = objDataList1Table.innerHTML;
        sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+SPAN[>]+/gi, "");
        sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+\/SPAN[>]+/gi, "");
        sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+BR[>]+/gi, "");
        objDataList1Table.innerHTML = sDataList1TableHTML;
    }
    $("#DataList1Table").tablesorter();
});


■DataGrid
①Page_Load等で以下のプロパティ設定を行う。

DataGrid1.ShowHeader = false;

②JavaScriptで「theadタグの付与」「ヘッダー列作成」「tableからstyle属性削除」後、tablesorter()関数呼び出し。

$(function () {
    var objDataGrid1 = document.getElementById("DataGrid1")
    if ($.browser.msie)
    {
        // IE
        var sNewOuterHTML;
        var sNewInnerHTML = "";
        sNewInnerHTML += "<thead><th>No</th><th>文字列</th></thead>";
        sNewInnerHTML += objDataGrid1.innerHTML;
        sNewOuterHTML = objDataGrid1.outerHTML.replace(objDataGrid1.innerHTML, sNewInnerHTML);
        objDataGrid1.outerHTML = sNewOuterHTML;
    }
    else
    {
        // FireFox,Opera,Chrome
        var sNewInnerHTML = "";
        sNewInnerHTML += "<thead><th>No</th><th>文字列</th></thead>";
        sNewInnerHTML += objDataGrid1.innerHTML;
        objDataGrid1.innerHTML = sNewInnerHTML;
    }
    $("#DataGrid1").removeAttr("style");
    $("#DataGrid1").tablesorter();
});


ASP.NET(C#)とJQuery+TableSorterを連携したときのサンプルソースを記述する。

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!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>各種グリッド+TableSorter</title>
    <script src="../js/jquery/jquery-1.3.2.js" type="text/ecmascript"></script>
    <link href="../js/Tablesorter/blue/style.css" rel="stylesheet" type="text/css" />
    <script src="../js/Tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
    <script type="text/C#" runat="server">
    /// <summary>
    /// Page_Load
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //-------------------------------------------------------------------------------------
            // DataTable作成
            //-------------------------------------------------------------------------------------
            DataTable dt = new DataTable("DataTable");
            dt.Columns.Add("No", typeof(int));
            dt.Columns.Add("文字列", typeof(string));
            for (int i = 1; i <= 3; i++)
            {
                DataRow dr = dt.NewRow();
                dr[0] = i;
                dr[1] = string.Format("文字{0}", 4-i);
                dt.Rows.Add(dr);
            }
            //-------------------------------------------------------------------------------------
            // テーブル系コントロール設定
            //-------------------------------------------------------------------------------------
            // GridView
            GridView1.DataSource = dt;
            GridView1.DataBind();
            GridView1.UseAccessibleHeader = true;
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            // ListView
            ListView1.DataSource = dt;
            ListView1.DataBind();
            // Repeater
            Repeater1.DataSource = dt;
            Repeater1.DataBind();
            // DataList
            DataList1.DataSource = dt;
            DataList1.DataBind();
            DataList1.RepeatLayout = RepeatLayout.Flow;
            // DataGrid
            DataGrid1.DataSource = dt;
            DataGrid1.DataBind();
            DataGrid1.ShowHeader = false;
        }
    }
    </script>
    <script type="text/ecmascript">
        $(function () {
            //-------------------------------------------------------------------------------------
            // Tablesorterの有効化
            // <注意1>
            // Tablesorterにはthead,tbodyが必要。しかしDataList,DataGridコントロールは
            // サーバサイド処理でthead,tbodyを出すのが困難なため、クライアントスクリプトで
            // 強引にthead,tbodyを付与している。
            // <注意2>
            // 注意1に関連することだがIE系はtableタグのinnerHTMLは読取専用である。
            // このためinnerHTMLの代用としてouterHTMLを使っている。
            // ちなみにFirefoxはouterHTMLがない。
            // <注意3>
            // DataListはHTML上部にspanタグをレンダリングする。これがレイアウトをおかしくする。
            //-------------------------------------------------------------------------------------
            // GridView
            $("#GridView1").tablesorter();
            // ListView
            $("#ListView1Table").tablesorter();
            // Repeater
            $("#Repeater1Table").tablesorter();
            // DataList
            var objDataList1Table = document.getElementById("DataList1Table")
            if ($.browser.msie)
            {
                // IE
                var sDataList1TableHTML = objDataList1Table.outerHTML;
                sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+SPAN[>]+/gi, "");
                sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+\/SPAN[>]+/gi, "");
                sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+BR[>]+/gi, "");
                objDataList1Table.outerHTML = sDataList1TableHTML;
            }
            else
            {
                // FireFox,Opera,Chrome
                var sDataList1TableHTML = objDataList1Table.innerHTML;
                sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+SPAN[>]+/gi, "");
                sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+\/SPAN[>]+/gi, "");
                sDataList1TableHTML = sDataList1TableHTML.replace(/[<]+BR[>]+/gi, "");
                objDataList1Table.innerHTML = sDataList1TableHTML;
            }
            $("#DataList1Table").tablesorter();
            // DataGrid
            var objDataGrid1 = document.getElementById("DataGrid1")
            if ($.browser.msie)
            {
                // IE
                var sNewOuterHTML;
                var sNewInnerHTML = "";
                sNewInnerHTML += "<thead><th>No</th><th>文字列</th></thead>";
                sNewInnerHTML += objDataGrid1.innerHTML;
                sNewOuterHTML = objDataGrid1.outerHTML.replace(objDataGrid1.innerHTML, sNewInnerHTML);
                objDataGrid1.outerHTML = sNewOuterHTML;
            }
            else
            {
                // FireFox,Opera,Chrome
                var sNewInnerHTML = "";
                sNewInnerHTML += "<thead><th>No</th><th>文字列</th></thead>";
                sNewInnerHTML += objDataGrid1.innerHTML;
                objDataGrid1.innerHTML = sNewInnerHTML;
            }
            $("#DataGrid1").removeAttr("style");
            $("#DataGrid1").tablesorter();
        });
    </script>
</head>
<body>
<form id="form1" runat="server">
GridView:
<asp:GridView ID="GridView1" runat="server" CssClass="tablesorter"></asp:GridView>
ListView:<br />
<asp:ListView ID="ListView1" runat="server">
    <LayoutTemplate>
        <table id="ListView1Table" class="tablesorter">
            <thead>
                <tr>
                    <th>No</th>
                    <th>文字列</th>
                </tr>
            </thead>
            <tbody>
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </tbody>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
            <tr>
                <td><%# Eval("No") %></td>
                <td><%# Eval("文字列") %></td>
            </tr>
    </ItemTemplate>
</asp:ListView>
Repeater:<br />
<asp:Repeater ID="Repeater1" runat="server">
     <HeaderTemplate>
        <table id="Repeater1Table" class="tablesorter">
            <thead>
                <tr>
                    <th>No</th>
                    <th>文字列</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
                <tr>
                    <td><%# Eval("No") %></td>
                    <td><%# Eval("文字列")%></td>
                </tr>
    </ItemTemplate>
    <FooterTemplate>
            </tbody>
        </table>
    </FooterTemplate>
</asp:Repeater>
DataList:<br />
<asp:DataList ID="DataList1" runat="server">
    <HeaderTemplate>
        <table id="DataList1Table" class="tablesorter">
            <thead>
                <tr>
                    <th>No</th>
                    <th>文字列</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
                <tr>
                    <td><%# Eval("No") %></td>
                    <td><%# Eval("文字列")%></td>
                </tr>
    </ItemTemplate>
    <FooterTemplate>
            </tbody>
        </table>
    </FooterTemplate>
</asp:DataList>
DataGrid:<br />
<asp:DataGrid ID="DataGrid1" runat="server" CssClass="tablesorter" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundColumn DataField="No" />
        <asp:BoundColumn DataField="文字列" />
    </Columns>
</asp:DataGrid>
</form>
</body>
</html>




上記ソースからASP.NETのグリッド系コントロールとTableSorterの有効な組み合わせなのは、GridView・ListView・Repeater だと考えられる。
DataList・DataGridも利用可能だがJavaScriptによるタグ操作がある為、表示後にサーバサイド処理と連携すると 何らかの問題が発生する可能性が高い。
またDataListはspan・brタグの置換が発生するため画面自由度が低減する。
他にDataListはFirefox・Chromeでコントロール上部のレイアウトが崩れることも確認している。




« サービスアプリ追加(データテキストファイルビューア) | トップページ | C#でCSV・TSVファイル作成 »

ASP.NETサンプル」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/532391/45333012

この記事へのトラックバック一覧です: ASP.NET(C#)でJQuery+TableSorterを利用:

« サービスアプリ追加(データテキストファイルビューア) | トップページ | C#でCSV・TSVファイル作成 »

Google AdSense


  • ---

Amazon ウィジェット

  • ウィジェット

@niyo_naのツイート

無料ブログはココログ

Google Analytics