bootgridについていくつか聞きたい<検索を全角半角を同じものとして判別できるにしたい(例:「ＸＹＺ(全角)」と「XYZ(半角)」) など>

Question

前提・実現したいこと

質問をいくつも同時に聞くのは。
と思う方いると思いますが、ご了承くださいませ。

bootgridについて伺いたいことがあります

まずは下記画像をご覧ください

上記の画像を元に、以下のことを聞きたいです。

①橙四角の検索を、ローマ字の全角半角での区別も対応したい
(例:「ＸＹＺ(全角)」と「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しました。

そうしたら、下記画像のようになりました。

1. 5)画像

ソースとしては以下になります

$("#grid-command-buttons").bootgrid({
	rowCount: [-1, 10, 25, 50],
	caseSensitive: false,
	templates: {
		actionDropDown: "<div class=\"{{css.dropDownMenu}}\">
					<button style=\"display: none;\" class=\"btn btn-default 
						dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\">
						<span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span> 
						<span class=\"caret\"></span>
					</button>
					<ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\">
					</ul>
				</div>",
		footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\">
				<div class=\"row\">
					<div class=\"col-sm-6\">
						<p class=\"{{css.pagination}}\"></p>
					</div>
				</div>
			</div>",
		header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\">
				<div class=\"row\">
					<div class=\"col-sm-12 actionBar\">
						<p class=\"{{css.search}}\"></p>
						<p class=\"{{css.actions}}\"></p>
					</div>
				</div>
				<div class=\"row\">
					<div class=\"col-sm-6 infoBar\">
						<p class=\"{{css.infos}}\"></p>
				</div>
			</div>
		</div>",
		headerCell: "<th data-column-id=\"{{ctx.column.id}}\" class=\"{{ctx.css}}\" style=\"{{ctx.style}}\">
				<a href=\"javascript:void(0);\" class=\"{{css.columnHeaderAnchor}} {{ctx.sortable}}\">
					<span class=\"{{css.columnHeaderText}}\">{{ctx.column.text}}</span>{{ctx.icon}}</a>
				</th>"
	},
	labels: {
		all: "全て表示",
		infos: "{{ctx.total}}件中 {{ctx.start}} ～ {{ctx.end}}件を表示しています",
		loading: "検索中...",
		noResults: "データがありません",
		search: "検索"
	},
	formatters: {
		"commands": function (column, row) {
		return "<button type=\"button\" class=\"btn btn-xl btn-default command-edit\" data-row-id=\"" + row.id + "\">
				<span>編集</span>
			</button> " 
			+
			"<button type=\"button\" class=\"btn btn-xl btn-default command-delete\" data-row-id=\"" + row.id + "\">
				<span>削除</span>
			</button>";
        }
    }
})

※templatesとformatters、改行しておりますが、実際は1行にまとめています

//jquery.boot.js

//531行目～
function renderRowCountSelection(actions)
{
	//536行目
	function getText(value)
        {
		return (value === -1) ? that.options.labels.all : value + "件表示";
	}
}

//1235,1236行
css: {
	footer: "bootgrid-footer container-fluid",
	header: "bootgrid-header container-fluid",
}

.bootgrid-header .infoBar{
	text-align: right;
}

.bootgrid-header.container-fluid {
	text-align: right;
}

何度も申し訳ありません…。

Comments

[miyakichi]

あれ？検索時 caseSensitive:true（デフォルト値) で「大文字・小文字の区別」、「全角・半角の区別」つきませんか？

[ponchoccho]

http://www.jquery-bootgrid.com/documentation 上記ページでは caseSensitive 「Defines whether the search is case sensitive or insensitive. Default value is true.」 訳すると 「検索で大文字と小文字を区別するかどうかを定義します。 デフォルト値はtrueです。」 とあり、trueだと区別するものだと思い、falseにしていました。 実際に、true(もしくは何もしていない状況)だと大文字小文字区別して検索していましたが、 falseに変更したら大文字と小文字は区別しなくなりました。

[miyakichi]

jquery.bootgrid.js は caseSensitive trueで new RegExp("入力した検索文字列","g")、false で new RegExp("入力した検索文字列","gi") として、search() メソッドでマッチしているか見ているので、大文字・小文字を区別してヒットさせる場合は、caseSensitive を true、区別しないでヒットさせる場合は、caseSensitive を false にします。全角文字は caseSensitive の値に関わらず、区別してヒットすると思いますが？例）検索対象文字列が「ＸＹＺ」（全角）で、入力した検索文字列が「XYZ」（半角）ならヒットしません。もし、全角・半角を区別せずにヒットさせたいなら、jquery.bootgrid.js に手を加えるしかないと思います。

[ponchoccho]

申し訳ありません。全くの言葉足らずでした。 例)の「全角・半角を区別せずにヒットさせたい」が言いたかったことでした。 やはりjquery.bootgrid.jsに手を加えるしかないんですね…。

Answer 1

コメント欄だとソースが見づらいので改めて新規回答で投げます。なんかスレッド汚しちゃうみたいですみません。

これは本当にわかんないですね……手元で動いてしまっているのでなおさら。
理屈としては553行目付近、

$.each(rowCountList, function (index, value)
{
    var item = $(tpl.actionDropDownItem.resolve(getParams.call(that,
        { text: getText(value), action: value })))
            ._bgSelectAria(value === that.rowCount)
            .on("click" + namespace, menuItemSelector, function (e)
            {
                e.preventDefault();

                var $this = $(this),
                    newRowCount = $this.data("action");
                if (newRowCount !== that.rowCount)
                {
                    // todo: sophisticated solution needed for calculating which page is selected
                    that.current = 1; // that.rowCount === -1 ---> All
                    that.rowCount = newRowCount;
                    $this.parents(menuItemsSelector).children().each(function ()
                    {
                        var $item = $(this),
                            currentRowCount = $item.find(menuItemSelector).data("action");
                        $item._bgSelectAria(currentRowCount === newRowCount);
                    });
                    $this.parents(menuSelector).find(menuTextSelector).text(getText(newRowCount)); // ←ココ！
                    loadData.call(that);
                }
            });
    dropDown.find(menuItemsSelector).append(item);
});

のところでそのドロップダウンを組み立てているはずなんですよ。
newRowCountが-1ならば全て表示、そうでなければvalue+"件表示"を戻すようにしてやれば動くはずなんですよね……🤔

ごめんなさいソース見落としてました。button内のdisplay:noneは解除してください。
364行目の

renderColumnSelection.call(this, actions);

をコメントアウトすると右のアレだけ消えると思います。
角丸とかの調整は別途必要になりますが……。

たぶん「16件中1〜16件を表示しています」を右に移したいという意味だと推測しますが、1365行目付近のinfoBarがあるdiv（ソース内検索で見つかると思います）にpull-rightを入れてみてください。

(略)<div class=\"col-sm-6 infoBar pull-right text-right\">(略)

※text-rightはtext-align:rightなので記載済みだと思います。

Comments

[ponchoccho]

申し訳ございません。
キャッシュしていたつもりだったのが、上手くキャッシュできておりませんでした…。

キャッシュしたら、文字化けはしていましたが表示されました、ありがとうございます！
（aspxはUTF-8にしています）

残りのも無事やりたいように出来ました！
本当にありがとうございました！！

[perpouh]

よかった！お疲れ様です！:thumbs_up:

Answer 2

全角半角については「入力時は必ず半角とする」「検索時は入力された文字を強制的に半角に変換する」のふたつで表面上同じような挙動が実装できるのでは？と思います。データありきであれば使えない手段ですが。
https://qiita.com/yamikoo@github/items/5dbcc77b267a549bdbae

3, 4, 5についてはCSSでなんとかなると思うんでCSSでなんとかしましょう。
3)display:noneなど
4)padding-leftなど
5)はちょっとDOM見ないとわかりません

2について。
「すべて表示」は

$("#grid").bootgrid({
    labels: {
        all: "すべて"
    }
});

でいけるっぽいですが、ほかのn件の分はパラメータだとできないのかもしれません。
ただ、ソースに手を入れるのもべつに難しい話ではなくて、jquery.bootgrid.jsの536行目のあたりを

function getText(value)
{
    return (value === -1) ? that.options.labels.all : value+"件表示";
}

ってしたらたぶんご期待に沿う動きになるんじゃないかなあと思います。

Comments

[ponchoccho]

回答ありがとうございます。

1) データありきで使用しているのでその手段は出来ないですね…。
2) jquery.bootgrid.jsの536行目に「+"件表示"」を追加しても表示しませんでした（キャッシュは変えてます）
3) 桃四角まで消えてしまいました…。
今回、
```JavaScript
templates: {
actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>",
actionDropDown: "<div class=\"{{css.dropDownMenu}}\"><button class=\"btn btn-default dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\"><span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span> <span class=\"caret\"></span></button><ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"></ul></div>",
actionDropDownItem: "<li><a data-action=\"{{ctx.action}}\" class=\"{{css.dropDownItem}} {{css.dropDownItemButton}}\">{{ctx.text}}</a></li>",
actionDropDownCheckboxItem: "<li><label class=\"{{css.dropDownItem}}\"><input name=\"{{ctx.name}}\" type=\"checkbox\" value=\"1\" class=\"{{css.dropDownItemCheckbox}}\" {{ctx.checked}} /> {{ctx.label}}</label></li>",
actions: "<div class=\"{{css.actions}}\"></div>"
},]
```
の部分を修正しているのですが、
「actions」 のdiv内に入れるとどちらも消えます。
「actionDropDownCheckboxItem」 の<li>内に入れると、赤丸部分は残り、ドロップダウンの部分が消えてしまいます。
4) padding-leftでいけました、ありがとうございます。
5) 申し訳ございません、DOMはどこまでお見せすれば大丈夫なのでしょうか…？
　　DOMというものが、調べてみてもどういうものかがよく分かりませんでした。（https://eng-entrance.com/what-is-dom）

[perpouh]

1)そうですか……見た感じこれスペースでの検索語分割すら無いっぽいのでかなり改造しないと無理かもしれませんね。
2)あれ、手元だとそれで動いたのですけど。3が反映されてるってことはjs読み込まれてるってことですよね？エラーも出てませんか？
3)消したいのはactionDropdown内の<button>だと思います。
5)あ、DOMは確認しました。大丈夫です。1365行目を以下のように書き換えてください。右揃えとかはCSSでtext-align指定すれば大丈夫です
```
header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\"><div class=\"col-sm-12 actionBar\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div></div><div class=\"row\"><div class=\"col-sm-6\"><p class=\"{{css.pagination}}\"></p></div><div class=\"col-sm-6 infoBar\"><p class=\"{{css.infos}}\"></p></div></div></div>",
headerCell: "<th data-column-id=\"{{ctx.column.id}}\" class=\"{{ctx.css}}\" style=\"{{ctx.style}}\"><a href=\"javascript:void(0);\" class=\"{{css.columnHeaderAnchor}} {{ctx.sortable}}\"><span class=\"{{css.columnHeaderText}}\">{{ctx.column.text}}</span>{{ctx.icon}}</a></th>",
```

[ponchoccho]

試してみたのですが、まだ不明なところがありましたので、
質問内容の部分にソースと画像を追記させていただきました。
申し訳ございませんが、再度見ていただけますと幸いです。