amber

amber

FastAdmin 個人の記録 - カスタム検索のレンダリング

個別フィールドのカスタム検索のレンダリング#

selectpage 検索 例:customerID を必要に応じて置き換える

            //通常の検索の後にレンダリング
            table.on('post-common-search.bs.table', function (event, table) {
                var form = $("form", table.$commonsearch);
                $("input[name='customerID']", form).addClass("selectpage").data("source", "customer/customer/index").data("primaryKey", "id").data("field", "charname").data("orderBy", "id desc");
                Form.events.cxselect(form);
                Form.events.selectpage(form);
            });

等しいを除外する検索 例:mid を必要に応じて置き換える

            //通常の検索の後にレンダリング
            table.on('post-common-search.bs.table', function (event, table) {
                var form = $("form", table.$commonsearch);
                let html = '<!--明示的なoperate操作子-->\n' +
                    '                        <div class="input-group">\n' +
                    '                            <div class="input-group-btn">\n' +
                    '                                <select class="form-control operate" data-name="mid" style="width:60px;">\n' +
                    '                                    <option value="=" selected>等しい</option>\n' +
                    '                                    <option value="<>">除外</option>\n' +
                    '                                </select>\n' +
                    '                            </div>\n' +
                    '                            <input class="form-control" type="text" name="mid" id="mid" placeholder="" value=""/>\n' +
                    '                        </div>'
                $("input[name='mid']", form).parent().html(html);
            });

開発例 カスタム検索フォームテンプレート searchFormTemplate#

searchFormTemplate

table.bootstrapTable({
                ...省略
                searchFormVisible: true,
                searchFormTemplate: 'customformtpl',
                ...省略
})

対応するテンプレート

<script id="customformtpl" type="text/html">
    <!--フォームはform-commsearchクラスを追加する必要があります-->
    <form action="" class="form-commonsearch">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
            <h4>カスタム検索フォーム</h4>
            <hr>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">ID</label>
                        <!--明示的なoperate操作子-->
                        <div class="input-group">
                            <div class="input-group-btn">
                                <select class="form-control operate" data-name="id" style="width:60px;">
                                    <option value="=" selected>等しい</option>
                                    <option value=">">より大きい</option>
                                    <option value="<">より小さい</option>
                                </select>
                            </div>
                            <input class="form-control" type="text" name="id" placeholder="" value=""/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">タイトル</label>
                        <!--暗黙的なoperate操作子、classがoperateで非表示のテキストボックスを持っている必要があり、data-name="フィールド"で操作子の値を持っている-->
                        <input class="operate" type="hidden" data-name="title" value="="/>
                        <div>
                        <input class="form-control" type="text" name="title" placeholder="検索するタイトルを入力してください" value=""/>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="submit" class="btn btn-success btn-block" value="送信"/>
                            </div>
                            <div class="col-xs-6">
                                <input type="reset" class="btn btn-primary btn-block" value="リセット"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

テーブルのカスタム検索拡張、ドロップダウン検索操作子#

  • テーブルの field に、operate: 'number' を追加し、カスタム検索の等しい、より大きい、より小さいを設定します。
  • public/assets/js/bootstrap-table-commonsearch.js に number の判定を追加します。

具体的なリンク

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。