質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.24%

テーブルのセル内で改行をせずに、三点リーダーにしたい(asp.net、Datatables)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,485

AKICO

score 7

前提・実現したいこと

asp.netのGridViewを使っています。
(最終的には、GridViewにDataTablesを適用させたいと思っています。)
GridViewで、
・1列目:ID width:50px
・2列目:氏名 width:100px
・3列目:カナ氏名 width:100px
とし、
・gridview全体の幅を200pxにする。列を合計すると250になるので、横スクロールもつける
・2列目と3列目は、width指定の幅を超えるようであれば3点リーダ(…)をつける。
・ ↑ は、改行させない、幅も固定
としたいと考えました。

できたことと、課題

横スクロールは、DataTablesを実装する部分で、

$("#GridView1").DataTable({
    scrollX: true,
    scrollY: "200px",
    scrollCollapse: true,
    //ページング
    paging: true,
    //列ごとの指定 幅:widthで指定したpx+25px
    columnDefs: [
        { width:  50, targets: 0 },
        { width: 100, targets: 1 },
        { width: 100, targets: 2 },
    ],
    //列固定:1列
    fixedColumns: {
        leftColumns: 1
    },
});


とすることで実装できそうなのですが、3点リーダをつける部分がわかりません。
ボックスなどであれば、

div.santen{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div class="santen" style="width:100px">
    三点三点三点三点三点三点三点三点三点三点三点三点
</div>


で三点リーダになることは確認できました。
GridView、DataTablesの前に、まずTableのtdで試してみようと思ったのですが、

table.table250{
    width   :250px;
    overflow:hidden;
}
td{
    overflow     :hidden;
    text-overflow:ellipsis;
    white-space  :nowrap;
    color        : rgb(255,0,0);
}
<table class="table250">
    <tr>
        <td style="width:50px;">1</td>
        <td style="width:100px;">氏名氏名氏名氏名氏名氏名</td>
        <td style="width:100px;">カナカナカナカナカナカナカナカナ</td>
    </tr>
</table>


としましたが、width指定が無視され、文字がすべて表示されてしまいました。
(改行はされませんでしたが…)

もしかしたら、DataTablesやBootStrap、jQueryで指定する方法があるかもと思い、質問させていただきました。

どうかよろしくお願いいたします。

補足情報(言語/FW/ツール等のバージョンなど)

VisualStudio Community 2015(vb)
DataTables 1.10.12
Bootstrap 3.3.6
jQuery 2.2.3

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

質問の内容が理解できていませんが「三点リーダーにしたい」ということは、以下の記事の最後の方に書いてある「2015/11/12 追記」のような表示にしたいということですか?

GridView に overflow 適用
http://surferonwww.info/BlogEngine/post/2015/11/10/apply-overflow-to-a-column-of-gridview.aspx

【2016/10/4 12:45 追記】

私の 2016/10/04 12:08 のコメントでも書きましたが、td 要素に overflow: hidden;、white-space: nowrap;、text-overflow: ellipsis; というスタイルを適用して期待通り三点リーダーが表示されたのは、親の table 要素に table-layout: fixed; というスタイルが適用されていたからでした。

DataTables にはもともと「三点リーダー」にするようなスタイルは適用されていないようですが、そうであれば親の table 要素に table-layout: fixed; というスタイルを、子の th, td 要素に overflow: hidden;、white-space: nowrap;、text-overflow: ellipsis; というスタイルを適用したらいかがでしょう?

コメントに「あとで、回答欄に GridView ではどのようにできるかという例を書いておきます」と書きましたが、検証に使ったサンプルコードを以下に書いておきます。Web サイトプロジェクトならそのままコピペして、Web アプリケーションプロジェクトなら .aspx と .aspx.cs に分ければ試すことができますので、興味があればやってみてください。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // データソース用の DataTable を作成
    protected DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Type", typeof(string)));
        dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Amount", typeof(Int32)));
        dt.Columns.Add(new DataColumn("CategoryID", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Note", typeof(string)));
        dt.Columns.Add(new DataColumn("Discontinued", typeof(bool)));
        dt.Columns.Add(new DataColumn("DateTime", typeof(DateTime)));

        for (int i = 0; i < 20; i++)
        {
            dr = dt.NewRow();
            dr["ID"] = i;
            dr["Name"] = "Product Name_" + i.ToString();
            dr["Type"] = "Product Type " + (100 - i).ToString();
            dr["Price"] = 123000 * (i + 1);
            dr["Qty"] = (i + 1) * 20;
            dr["Amount"] = 123000 * (i + 1) * (i + 1);
            dr["CategoryID"] = 100 - i;
            dr["Note"] = "Note_" + i.ToString();
            dr["Discontinued"] = (i % 2 == 0) ? true : false;
            dr["DateTime"] = DateTime.Now.AddDays(i);
            dt.Rows.Add(dr);
        }
        return dt;
    }

    // GridView に上記メソッドで作った DataTable をバインド
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateDataTable();
            GridView1.DataBind();
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        table {
            width: 100%;
            table-layout: fixed;
        }

        table th, td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" EnableViewState="False">
        </asp:GridView>
    </form>
</body>
</html>

上のコードの実行結果は以下の画像のようになります。(ブラウザは Chrome)

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f9%2fgridviewtextoverflow.jpg

ただし、やはりブラウザ依存のようで(text-overflow:ellipsis はもともと IE の独自拡張)、自分が試した限りでは IE9, Firefox 49.0.1, Chrome 49.0.2623.112 m, Safari 5.1.7 (7534.57.2) では OK だったものの、Opera 12.18 では三点リーダーが表示されませんでした。

【2016/10/5 12:48 追記】 

私の 2016/10/05 12:09 のコメントで、

「やり方の問題」とか書いておいて、そうではなかったりすると何なので、後で検証して結果を回答欄に追記しておきます。

と書きましたように、上の【2016/10/4 12:45 追記】 のサンプルに DataTables を適用して検証してみました。

結果は以下の画像のとおりで、「三点リーダー」は表示されます。

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f9%2fgridviewanddatatables.jpg

質問者さんが試してダメだったのは、多分横方向のスクロール scrollX: true を設定したからだと思います。

scrollX: true があると columnDefs: [ ... ] で幅を設定しても無視され、文字列分の幅が確保されるので結果「三点リーダー」は表示されないということになるようです。(理由は不明。実際に試してそうなりました)

上の画像のコードは以下の通りです。コメントアウトした scrollX: true, を有効にして試すと上で私が言ったことが分かると思います。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // データソース用の DataTable を作成
    protected DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Type", typeof(string)));
        dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Amount", typeof(Int32)));
        dt.Columns.Add(new DataColumn("CategoryID", typeof(Int32)));
        dt.Columns.Add(new DataColumn("Note", typeof(string)));
        dt.Columns.Add(new DataColumn("Discontinued", typeof(bool)));
        dt.Columns.Add(new DataColumn("DateTime", typeof(DateTime)));

        for (int i = 0; i < 20; i++)
        {
            dr = dt.NewRow();
            dr["ID"] = i;
            dr["Name"] = (i % 2 == 0) ? 
                "Name_" + i.ToString() : "Long Long Name_" + i.ToString();
            dr["Type"] = (i % 2 == 0) ? 
                "Long Long Product Type " + (100 - i).ToString() : "Type " + (100 - i).ToString();
            dr["Price"] = 123000 * (i + 1);
            dr["Qty"] = (i + 1) * 20;
            dr["Amount"] = 123000 * (i + 1) * (i + 1);
            dr["CategoryID"] = 100 - i;
            dr["Note"] = "Note_" + i.ToString();
            dr["Discontinued"] = (i % 2 == 0) ? true : false;
            dr["DateTime"] = DateTime.Now.AddDays(i);
            dt.Rows.Add(dr);
        }
        return dt;
    }

    // GridView に上記メソッドで作った DataTable をバインド
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = CreateDataTable();
            GridView1.DataBind();
        }
    }

    // GridView に thead, tbody, tfoot 要素を追加
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            e.Row.TableSection =
              System.Web.UI.WebControls.TableRowSection.TableHeader;
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.TableSection =
              System.Web.UI.WebControls.TableRowSection.TableBody;
        }
        else if (e.Row.RowType == DataControlRowType.Footer)
        {
            e.Row.TableSection =
              System.Web.UI.WebControls.TableRowSection.TableFooter;
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="/datatables-1.10.12/js/jquery.dataTables.js" type="text/javascript"></script>
    <link href="/datatables-1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            $("#<%=GridView1.ClientID%>").DataTable({
//                scrollX: true,
//                scrollY: 200,
                columnDefs: [
                    { targets: 0, width: 50 },
                    { targets: 1, width: 100 },
                    { targets: 2, width: 100 }
                ]
            });
        });
    //]]>
    </script>

    <style type="text/css">
        table {
            width: 100%;
            table-layout: fixed;
        }

        table th, td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>

</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" 
            runat="server" 
            EnableViewState="False" 
            OnRowCreated="GridView1_RowCreated" 
            ShowFooter="True">
        </asp:GridView>
    </form>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/04 18:32

    DataTables というのは自分は全く知らないのですが、もともと「三点リーダー」にするようなスタイルは設定されてないのですよね? であれば質問者さんが自力でスタイルを設定しなければならないはずですが、どのようにしたのでしょう?

    結果をディベロッパーツールで見て「三点リーダー」にするスタイルが設定されることを確認しましたか?

    あとライブラリによっては table 要素をを全く別物に変えてしまうものもあります。たとえば、Grid.js(詳しくは以下の URL の記事参照)。これは table 要素を div 要素に変えてしまうので、table 要素に適用するスタイルを書いても何ともなりません。

    http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx

    キャンセル

  • 2016/10/05 12:09

    DataTables のサイトに行ってサンプルを見てみましたが、上のコメントに書いたような「table 要素を全く別物に変えてしまう」と言うことはなくて、table 要素のままでした。

    「三点リーダー」にするようなスタイルは設定されていません。なので、追加で上の回答欄に書いたようなスタイルを設定すればいいはずです。

    質問者さんが試してうまく行かないのはやり方の問題かと思います。

    DataTables のサイトの Installation のページでは table 内に thead, tbody 要素が書いてありましたが対応しましたか? GridView では何もしなけれれば thead, tbody 要素は出てきませんが?

    #「やり方の問題」とか書いておいて、そうではなかったりすると何なので、後で検証して結果を回答欄に追記しておきます。

    キャンセル

  • 2016/10/11 12:36

    SurferOnWww様、ご回答本当にありがとうございました!
    そしてこちらの回答が大変遅くなってしまい、大変申し訳ございませんでした。

    「三点リーダ」につきまして、 おっしゃる通り、scrollX: true が設定されているとダメで、これをコメントアウトすると、三点リーダが表示されました。

    とても横長の表になるため、何とか三点リーダと横スクロールの同時設定ができないか、と、DataTablesのプラグイン(「FixedColumns」「Scroller」)も調査してみましたが、scrollX: trueだとどうしても三点リーダーが無効になってしまいました。
    仕様の見直しも含めて再検討したいと思います。

    三点リーダーの設定につきましては、SurferOnWww様のご回答で解決いたしましたので、ベストアンサーとさせていただきたいと思います。

    本当に、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.24%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる