BootStrapTable の動的テーブルに関する詳細なチュートリアル [コード付き]

この記事では、ブートストラップ テーブル プラグインを使用して動的テーブルを実装する方法を紹介します。

推奨チュートリアル: Bootstrap チュートリアル

## BootStrapTable (以下、BsTable) を構築するとき、列のパラメーターテーブル列の内容として保存されるため、返されたデータに基づいて列パラメータの内容を動的に生成することが必要です。これにより、動的テーブルが生成されます。

columns パラメーターの形式: 次のような

columns: {
    {
        field: 'Id',
        title: '编号',
    },{
        field: 'name',
        title: '名称',
    },{
        field: 'sex',
        title: '性别',
        //自定义方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

要件: ボタンをクリックして Ajax リクエストを送信し、リクエストによって返されたデータに基づいて動的テーブルを構築します。

ボタン構造: クリック イベントの設定

<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
    <i class="fa fa-check"></i> SQL语句执行
</button>

クリック イベントの書き込み: dataQuery.js (注: これは部分的に分析されます。

完全版はコード)

#1. HTML ページ要素の値を取得します

# これを実装するには 2 つのパラメータが必要なので、関数: SQL ステートメント (sql) 接続情報 (connectInfo) なので、最初にページから 2 つの要素の値を取得する必要があります。クラス セレクターは、対応する値を取得する要素を選択します。

var sql = $('#sql').val();
var connectInfo = $('#connectInfo').val();

2. ページのテーブル要素を選択し、Ajax リクエストを送信し、ページ上に BSTable

テーブル要素を構築します: beetl を使用します。タグ、再利用された HTML コードをコード タグの行に置き換えます。これは使いやすく、保守も簡単です。

<#table id="DataQueryTable"/>

2.1 Ajaxリクエストパラメータの設定

##パラメータtype#urlサーバーに送信される形式受信データの形式サーバーに送信されたデータリクエストが成功したときに呼び出されますリクエストが失敗したときに呼び出されます詳細コード:

$('#DataQueryTable').bootstrapTable({
    ajax: function (request) {
        $.ajax({
            type: "GET",
            url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            json: 'callback',
            success: 见下文
            error: 见下文
    })
})

意味
リクエスト タイプ
リクエスト リンク アドレス	# #contentType
	dataType
	data
	success
	error

2.2 ajax リクエストが成功し、動的ヘッダーが構築されます返された JSON データに基づいて

## 2.2.1 カスタム動的ヘッダー配列を初期化します

 //定义动态表头字段数组
    var dynamicHeader = [];
    //向数组中填入属性
    dynamicHeader.push({
        field: "state",
        check: true
    });

2.2.2 動的ヘッダーの生成

  //针对返回的json数据，遍历json数据的key集合
   for (var i = 0; i<(Object.keys(json[0])).length; i++) {
       //获取对应索引的value值，将获取的值设置到动态表头字段中。
       var property = (Object.keys(json[0]))[i];
       dynamicHeader.push({
           "title": property,
           "field": property,
           //显示是否显示隐藏
           switchable: true,
           //是否开启排序
           sortable: true
       });
   }

このコードはブラウザーで表示できますF12 Object.keys(json[0]) の特定のコンテンツ: リクエスト/テストをシミュレートします。

2.2.3 テーブルを構築します。テーブルを構築する前にテーブルを破棄する必要があります。そうでない場合は、最後にロードされたコンテンツが保持されます。

  $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
       //得到的json数据，会根据columns参数进行对应赋值配置
       data: json,
       //Bstable工具导航条
       toolbar: '#toolbar',
       //浏览器缓存，默认为true，设置为false避免页面刷新调用浏览器缓存
       cache: false,
       //是否显示行间隔色
       striped: true,
       //分页方式：client客户端分页，server服务端分页
       sidePagination: "client",
       //排序方式
       sortOrder: "desc",
       //每页记录行数
       pageSize: 25,
       //初始化加载第一页
       pageNumber: 1,
       //可供选择的每页行数
       pageList: "[25, 50, 100, All]",
       //是否显示切换按钮
       showToggle: true,
       //是否显示所有的列
       showColumns: true,
       //是否显示导出按钮(下篇文章将会提到)
       showExport: true,
       //导出数据类型(下篇文章将会提到)
       exportDataType: "basic",
       //是否显示分页
       pagination: true,
       //是否启用全匹配搜索，否则为模糊搜索
       strictSearch: true,
       //开启搜索
       search: true,
       //自定义所生成的动态表头放入，结合上述json数据，实现表格数据内容的构建
       columns: dynamicHeader
   });
 },

2.3 Ajax リクエストの失敗、ポップアップ ウィンドウでエラー メッセージが報告される、ページがリロードされる

error: function () {
    alert("SQL查询错误，请输入正确的SQL语句！");
    location.reload();
}

完全な js コード

/**
 *  BsTable动态表格生成
 */
DataQuery.sqlExecute = function (){

    var sql = $('#sql').val();
    var connectInfo = $('#connectInfo').val();

    $('#DataQueryTable').bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: 'callback',
                success: function (json) {

                    var dynamicHeader = [];
                    dynamicHeader.push({
                        field: "state",
                        check: true
                    });

                    for (var i = 0; i<(Object.keys(json[0])).length; i++) {
                        var property = (Object.keys(json[0]))[i];
                        //console.log(property);
                        dynamicHeader.push({
                            "title": property,
                            "field": property,
                            switchable: true,
                            sortable: true
                        });
                    }

                    //console.log(Object.keys(json[0]));

                    $(&#39;#DataQueryTable&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
                        data: json,
                        toolbar: &#39;#toolbar&#39;,
                        cache: false,
                        striped: true,
                        sidePagination: "client",
                        sortOrder: "desc",
                        pageSize: 25,
                        pageNumber: 1,
                        pageList: "[25, 50, 100, All]",
                        showToggle: true,
                        showColumns: true,
                        showExport: true,
                        exportDataType: "basic",
                        pagination: true,
                        strictSearch: true,
                        search: true,
                        columns: dynamicHeader
                    });
                },
                error: function () {
                    alert("SQL查询错误，请输入正确的SQL语句！");
                    location.reload();
                }
            });
        }
    });
};

3. 動的テーブル生成結果のテスト

3.1 テストは 2 つのパートに分かれており、まずリクエストで取得した json データを取得し、シミュレーションを行います。 100 個のデータを取得するリクエスト

@RequestMapping(value = "/test")
    @ResponseBody
    public Object test(){
        return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" +
                "      ,[S_INFO_WINDCODE]\n" +
                "      ,[S_CON_WINDCODE]\n" +
                "      ,[S_CON_INDATE]\n" +
                "      ,[S_CON_OUTDATE]\n" +
                "      ,[CUR_SIGN]\n" +
                "      ,[OPDATE]\n" +
                "      ,[OPMODE]\n" +
                "  FROM [WIND].[db_datareader].[AINDEXMEMBERS]");
    }

# 3.2 リクエストによって返された json データを表示

3.3 動的テーブル生成のテスト

上記のリクエストは正常にデータを返すことができますが、ajax リクエストを通じて構築した動的 BSTable はどうなるでしょうか? リクエストは SQL ステートメント/リンク情報であり、ajax リクエストは上記のリクエストと一致する json データを返します。

動的テーブルの生成ステータスを確認してください:

ビンゴ、それでこれまでのところ、BootStrapTable 動的テーブル関数が実装されています。

以上がBootStrapTable の動的テーブルに関する詳細なチュートリアル [コード付き]の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。