ブートストラップ テーブルでの親子テーブルの使用法と行と列の順序についての簡単な説明

この記事では、親子テーブルの使用法とブートストラップ テーブルの行と列の順序を組み合わせてから、その少し高度な使用法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[関連する推奨事項: "bootstrap チュートリアル》]

1. エフェクト表示

今日は少しやり方を変えて見てみましょう効果を先に説明しますので、コードの実装や注意点は後ほど紹介します。さあ、レンダリングは次のとおりです:

1. 父と息子のテーブルのレンダリング

2. 行の並べ替え

並べ替え前

行の並べ替え順序を次の場所にドラッグします最初の行

3. 列の順序

注文の前に

列タイトルをドラッグして並べ替えます

並べ替え後

2 つ、詳細な説明親子テーブルのコード

前章ではbootstrapテーブルの基本的な使い方を紹介しましたが、テーブルを初期化する際に「detailview」という属性があるのでtrueに設定します。 、そして各行の目の前に「 」の形をしたアイコンが表示されます。このアイコンをクリックすると、サブテーブルをロードするイベントがトリガーされます。これが一般原則です。コードを見てみましょう。実際は非常に簡単です。

1. テーブルを初期化し、行拡張イベントを登録します

　　　 　　　　$("#tb_powerset").bootstraptable({
                url: '/api/menuapi/getparentmenu',
                method: 'get',
                detailview: true,//父子表
                //sidepagination: "server",
                pagesize: 10,
                pagelist: [10, 25],
                columns: [{
                    field: 'menu_name',
                    title: '菜单名称'
                }, {
                    field: 'menu_url',
                    title: '菜单url'
                }, {
                    field: 'parent_id',
                    title: '父级菜单'
                }, {
                    field: 'menu_level',
                    title: '菜单级别'
                }, ],                //注册加载子表的事件。注意下这里的三个参数！
                onexpandrow: function (index, row, $detail) {
                    oinit.initsubtable(index, row, $detail);
                }
            });

サブテーブル読み込みイベント onexpandrow に対応するメソッド関数 (index、row) を見てみましょう。 、 $detail )、

index: 親テーブルの現在の行の行インデックス。

row: 親テーブルの現在の行の json データ オブジェクト。

$detail: 現在の行の下に作成された新しい行の td オブジェクト。

生成されたサブテーブル テーブルは $detail オブジェクトにロードされるため、3 番目のパラメータは特に重要です。ブートストラップ テーブルによって $detail オブジェクトが生成されるので、必要なテーブルをそれに埋めるだけで済みます。

2. oinit.initsubtable() メソッドを見てみましょう

    //初始化子表格(无线循环)
    oinit.initsubtable = function (index, row, $detail) {        var parentid = row.menu_id;        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstraptable({
            url: '/api/menuapi/getchildrenmenu',
            method: 'get',
            queryparams: { strparentid: parentid },
            ajaxoptions: { strparentid: parentid },
            clicktoselect: true,
            detailview: true,//父子表
            uniqueid: "menu_id",
            pagesize: 10,
            pagelist: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: 'menu_name',
                title: '菜单名称'
            }, {
                field: 'menu_url',
                title: '菜单url'
            }, {
                field: 'parent_id',
                title: '父级菜单'
            }, {
                field: 'menu_level',
                title: '菜单级别'
            }, ],            //无线循环取子表，直到子表里面没有记录
            onexpandrow: function (index, row, $subdetail) {
                oinit.initsubtable(index, row, $subdetail);
            }
        });
    };

サブテーブルを生成する原理は、テーブルを作成することであることがわかります。オブジェクト cur_table を作成し、このオブジェクトのテーブル初期化を登録します。とても簡単ですね~~

3. 行シーケンス コードの詳細説明

行シーケンス コードはさらに単純です。見てみましょう。 。

1. 2 つの追加の js ファイルを参照する必要があります

<script src="~/content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
<script src="~/content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

2. cshtml ページでテーブルを定義するときに、2 つの属性を追加します

<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>

これにより、js テーブルの初期化時に変更を加える必要がなく、ロードされたテーブルで行順序付け機能を実現できます。

4. 列の順序付けコードの詳細な説明

行の順序付けと似ています。列の順序付けの使用方法は次のとおりです:

1. いくつかの追加の js と css を参照します

<script src="~/content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

2. テーブルを定義する場合cshtml ページ、属性を追加します

<table id="tb_departments" data-reorderable-columns="true"></table>

他の場所を変更する必要はありません。ロードされたテーブルは列ごとにソートできます。とてもシンプルですか？

5. フィルタリングの制御

この記事を終えようとしていたのですが、前章に検索機能があったことを突然思い出しました。サーバーがページングしているときは利用できません。使ってみて、cs で各列をフィルタリングするような機能を以前に実行したことを思い出しました。ブロガーは再び興味を持ちました。ブートストラップ テーブルにもテーブルの各列をフィルタリングするこの機能はありますか?とのことで資料を確認してみました。結果は期待に応えます、本当にうまくいきます~~見てみましょう。

1. レンダリング表示

2. コード例

(1) 追加の js を導入する

<script src="~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>

(2) テーブル属性とヘッダー属性を定義する p>

 　　<table id="tb_roles" data-filter-control="true">
        <thead>
            <tr>
                <th data-field="role_name" data-filter-control="select">角色名称</th>
                <th data-field="description" data-filter-control="input">角色描述</th>
                <th data-field="role_defaulturl" data-filter-control="input">角色默认页面</th>
            </tr>
        </thead>
    </table>

ここでヘッダー属性が定義されているため、js の初期化時にカラムを定義する必要はありません。

(3) js の初期化

 $('#tb_roles').bootstrapTable({
        url: '/Role/GetRole',
        method: 'get',
        toolbar: '#toolbar',
        striped: true,
        cache: false,
        striped: true,
        pagination: true,
        sortable: true,
        queryParams: function (param) {            return param;
        },
        queryParamsType: "limit",
        detailView: false,//父子表
        sidePagination: "server",
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        
    });

最初、ブロガーは次のように考えました。検索はクライアント側のページングでしかできないのですが、デバッグしてみるとそうではなく、検索条件をjson経由でサーバーに渡すことができることが分かりました。デバッグ プロセスを見てみましょう

バックグラウンドでパラメータを受信し、それらを逆シリアル化します

このようにして、クエリ条件をバックグラウンドに渡すことができます。とても良くて力強い。これにより、テーブル検索機能を拡張する手間が省けます~~

6. まとめ

上記は、ブートストラップ テーブルの拡張アプリケーションの一部です。包括的ではない可能性があり、行と列の結合、行の凍結など、一部の高度な使用法は紹介されていません。しかし、ブロガーは文書さえあれば使用することに問題はないと考えている。ソースコードはまだ整理する必要があるため、整理されてからアップロードされる予定です。庭仲間の皆さん、まずは見てみましょう！ ！

プログラミング関連の知識について詳しくは、はじめにをご覧ください。プログラミングへ！ ！