###前提・実現したいこと
asp.netのGridViewを使っています。
(最終的には、GridViewにDataTablesを適用させたいと思っています。)
GridViewで、
・1列目:ID width:50px
・2列目:氏名 width:100px
・3列目:カナ氏名 width:100px
とし、
・gridview全体の幅を200pxにする。列を合計すると250になるので、横スクロールもつける
・2列目と3列目は、width指定の幅を超えるようであれば3点リーダ(…)をつける。
・ ↑ は、改行させない、幅も固定
としたいと考えました。
###できたことと、課題
横スクロールは、DataTablesを実装する部分で、
javascript
1$("#GridView1").DataTable({ 2 scrollX: true, 3 scrollY: "200px", 4 scrollCollapse: true, 5 //ページング 6 paging: true, 7 //列ごとの指定 幅:widthで指定したpx+25px 8 columnDefs: [ 9 { width: 50, targets: 0 }, 10 { width: 100, targets: 1 }, 11 { width: 100, targets: 2 }, 12 ], 13 //列固定:1列 14 fixedColumns: { 15 leftColumns: 1 16 }, 17});
とすることで実装できそうなのですが、3点リーダをつける部分がわかりません。
ボックスなどであれば、
css
1div.santen{ 2 text-overflow: ellipsis; 3 overflow: hidden; 4 white-space: nowrap; 5}
html
1<div class="santen" style="width:100px"> 2 三点三点三点三点三点三点三点三点三点三点三点三点 3</div>
で三点リーダになることは確認できました。
GridView、DataTablesの前に、まずTableのtdで試してみようと思ったのですが、
css
1table.table250{ 2 width :250px; 3 overflow:hidden; 4} 5td{ 6 overflow :hidden; 7 text-overflow:ellipsis; 8 white-space :nowrap; 9 color : rgb(255,0,0); 10}
html
1<table class="table250"> 2 <tr> 3 <td style="width:50px;">1</td> 4 <td style="width:100px;">氏名氏名氏名氏名氏名氏名</td> 5 <td style="width:100px;">カナカナカナカナカナカナカナカナ</td> 6 </tr> 7</table>
としましたが、width指定が無視され、文字がすべて表示されてしまいました。
(改行はされませんでしたが…)
もしかしたら、DataTablesやBootStrap、jQueryで指定する方法があるかもと思い、質問させていただきました。
どうかよろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
VisualStudio Community 2015(vb)
DataTables 1.10.12
Bootstrap 3.3.6
jQuery 2.2.3
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
私も同じようなことがしたく、同様の現象になりましたが、datatablesのオプションで
"autoWidth": false
としたら上手くいきました。
投稿2022/12/20 02:35
総合スコア21
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/03 09:56
編集2016/10/05 03:47退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/03 11:33
2016/10/03 13:14
2016/10/03 13:37
退会済みユーザー
2016/10/04 03:08
2016/10/04 09:00
退会済みユーザー
2016/10/04 09:32
退会済みユーザー
2016/10/05 03:09
2016/10/11 03:36
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。