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

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

ただいまの
回答率

89.69%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,136

ponchoccho

score 7

 前提・実現したいこと

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

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)

2)
自身で作成しているjsの中に

rowCount: [-1, 10, 25, 50],

と打ち、
jquery.boot.jsの536行目に教えていただいた部分を追加しました。
他jquery.boot.jsはいじっておりません。
jsは読み込まれております。
(下記のdisplay:none;は入れる前の作業です)
見た目としては
イメージ説明
上記のようになっております。

3)
actionDropDown
言われたとおり
button内に「style=\"display: none;\"」入れてみましたが、
下記画像のようになりました。

5)
「○件中○~○件を表示しています」無事に上に出ました、ありがとうございます。
ただ、
pagination
はfooterに置いておいたままが良いので、footerに移動させていただきました。
cssも、下記.aspx内にtext-alignしました。

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

3) 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;
}

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • miyakichi

    2018/10/06 13:24

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

    キャンセル

  • ponchoccho

    2018/10/06 19:20

    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

    2018/10/07 14:19

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

    キャンセル

  • ponchoccho

    2018/10/09 08:39

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

    キャンセル

回答 2

checkベストアンサー

0

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

2)
これは本当にわかんないですね……手元で動いてしまっているのでなおさら。
理屈としては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+"件表示"を戻すようにしてやれば動くはずなんですよね……:thinking_face:

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

renderColumnSelection.call(this, actions);


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

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

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


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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/23 12:16

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

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

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

    キャンセル

  • 2018/10/23 12:19

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

    キャンセル

0

全角半角については「入力時は必ず半角とする」「検索時は入力された文字を強制的に半角に変換する」のふたつで表面上同じような挙動が実装できるのでは?と思います。データありきであれば使えない手段ですが。
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+"件表示";
}


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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/22 17:49

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

    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

    キャンセル

  • 2018/10/22 18:53

    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>",
    ```

    キャンセル

  • 2018/10/23 10:16

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

    キャンセル

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

  • ただいまの回答率 89.69%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • jQueryに関する質問
  • bootgridについていくつか聞きたい<検索を全角半角を同じものとして判別できるにしたい(例:「XYZ(全角)」と「XYZ(半角)」) など>