前提・実現したいこと
質問をいくつも同時に聞くのは。
と思う方いると思いますが、ご了承くださいませ。
bootgridについて伺いたいことがあります
上記の画像を元に、以下のことを聞きたいです。
①橙四角の検索を、ローマ字の全角半角での区別も対応したい
(例:「XYZ(全角)」と「XYZ(半角)」、「アイウ(全角)」と「アイウ(半角)」
を同じものとして判別できるようにしたい)
→caseSensitiveをfalseにして、アルファベットの大文字小文字は分けられるようになりましたが、全角半角ができません。
②桃四角の表示を数字以外の文字も打ちたい
→現状、All,10,25,50で設定をしております。
選択する際に、上記のまま出てくるのですが、
「全て表示」「10件表示」「25件表示」のように表示の仕方を変更したいです。
③赤丸を非表示にしたい
→このボタン自体を非表示にしたいと考えております。
④青縦線少しスペースを空けたい
→コードにあるソートの「^」と名称の文言が近いので、スペースをあけたいです。
ただ、編集をすることがあるので、スペースを使用すると編集の際スペースが反映された状態で編集してしまいます。
⑤緑四角の位置を変えたい
この緑四角の位置を、検索の部分の真下もしくは横に移動したいです。
試したこと
調べてみましたが、出てきません。
補足情報(FW/ツールのバージョンなど)
jQueryはタイトルどおり、bootgridを使用しております
visual studio 2017使用
javascriptとaspxを主に使用しております。
※丸投げと思われる方多いかと思いますが、
bootgridのページ(http://www.jquery-bootgrid.com/)を見ても、
調べてみてもよく分かりませんでした。
申し訳ありませんが、助けていただければと思います。
追記(10/23)
自身で作成しているjsの中に
rowCount: [-1, 10, 25, 50],
と打ち、
jquery.boot.jsの536行目に教えていただいた部分を追加しました。
他jquery.boot.jsはいじっておりません。
jsは読み込まれております。
(下記のdisplay:none;は入れる前の作業です)
見た目としては
上記のようになっております。
actionDropDown
言われたとおり
button内に「style="display: none;"」入れてみましたが、
下記画像のようになりました。
「○件中○~○件を表示しています」無事に上に出ました、ありがとうございます。
ただ、
pagination
はfooterに置いておいたままが良いので、footerに移動させていただきました。
cssも、下記.aspx内にtext-alignしました。
そうしたら、下記画像のようになりました。
- 5)画像
ソースとしては以下になります
javascript
1$("#grid-command-buttons").bootgrid({ 2 rowCount: [-1, 10, 25, 50], 3 caseSensitive: false, 4 templates: { 5 actionDropDown: "<div class=\"{{css.dropDownMenu}}\"> 6 <button style=\"display: none;\" class=\"btn btn-default 7 dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\"> 8 <span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span> 9 <span class=\"caret\"></span> 10 </button> 11 <ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"> 12 </ul> 13 </div>", 14 footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"> 15 <div class=\"row\"> 16 <div class=\"col-sm-6\"> 17 <p class=\"{{css.pagination}}\"></p> 18 </div> 19 </div> 20 </div>", 21 header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"> 22 <div class=\"row\"> 23 <div class=\"col-sm-12 actionBar\"> 24 <p class=\"{{css.search}}\"></p> 25 <p class=\"{{css.actions}}\"></p> 26 </div> 27 </div> 28 <div class=\"row\"> 29 <div class=\"col-sm-6 infoBar\"> 30 <p class=\"{{css.infos}}\"></p> 31 </div> 32 </div> 33 </div>", 34 headerCell: "<th data-column-id=\"{{ctx.column.id}}\" class=\"{{ctx.css}}\" style=\"{{ctx.style}}\"> 35 <a href=\"javascript:void(0);\" class=\"{{css.columnHeaderAnchor}} {{ctx.sortable}}\"> 36 <span class=\"{{css.columnHeaderText}}\">{{ctx.column.text}}</span>{{ctx.icon}}</a> 37 </th>" 38 }, 39 labels: { 40 all: "全て表示", 41 infos: "{{ctx.total}}件中 {{ctx.start}} ~ {{ctx.end}}件を表示しています", 42 loading: "検索中...", 43 noResults: "データがありません", 44 search: "検索" 45 }, 46 formatters: { 47 "commands": function (column, row) { 48 return "<button type=\"button\" class=\"btn btn-xl btn-default command-edit\" data-row-id=\"" + row.id + "\"> 49 <span>編集</span> 50 </button> " 51 + 52 "<button type=\"button\" class=\"btn btn-xl btn-default command-delete\" data-row-id=\"" + row.id + "\"> 53 <span>削除</span> 54 </button>"; 55 } 56 } 57})
※templatesとformatters、改行しておりますが、実際は1行にまとめています
javascript
1//jquery.boot.js 2 3//531行目~ 4function renderRowCountSelection(actions) 5{ 6 //536行目 7 function getText(value) 8 { 9 return (value === -1) ? that.options.labels.all : value + "件表示"; 10 } 11} 12 13//1235,1236行 14css: { 15 footer: "bootgrid-footer container-fluid", 16 header: "bootgrid-header container-fluid", 17}
aspx
1 2.bootgrid-header .infoBar{ 3 text-align: right; 4} 5 6.bootgrid-header.container-fluid { 7 text-align: right; 8}
何度も申し訳ありません…。
回答2件
あなたの回答
tips
プレビュー