ブートストラップ・テーブルの簡単な使用

bttableパワフル！サポートと、プログラムで使用する断言する方法！Wenzhixinは、オープンソースのグリッドコントロールの開発をリードしています！

続きを読むためのコードの多くではないかもしれない。このように、jqueyをドキュメントを詳細に、しかし初心者はすでに基本的な内容のjsに精通している必要があり！

これは、本明細書にブートストラップ・テーブルバージョン1.15.5、ブートストラップ・バージョン4.3.1、jqueryのバージョン3.4.1と呼ば

関連するCSSの導入には、少しJS！この記事を簡潔には、2つの方法について説明します。

まず、宣言型

宣言型のラベルを開始するためにテーブル領域内のすべてのさまざまなオプションを設定することで特徴づけ、これらのオプションは、最も基本的な機能を満たしています。

：オプションを参照することができhttps://bootstrap-table.com/docs/api/table-options/

< divのクラス= "クエリコンテンツ" > 
                < テーブルのid = "テーブル" 
                    データ・トグル= "テーブル"                                  
                    データ・ページネーション=真の
                     データ側-ページネーション= "サーバー" 
                    データ・ページ・サイズ= 8つの
                     データ・クエリのparams = "queryParam" 
                    データ-URL = "$ {pageContext.request.contextPath} / ETL / dsconfig / GETPAGE"  
                 > 
                    < THEAD > 
                        < TR > 
                            <番目のデータ・フィールド=「DSNAME」>数据源名称</ 番目> 
                            < 番目のデータフィールド= "dbtypename" >类型</ 番目> 
                            < 番目のデータフィールド= "バージョン" >版本号</ 番目> 
                            < 番目のデータフィールド= "サーバー名" >服务器< / 番目> 
                            < 番目のデータフィールド=「dbportは」データ幅=「60」データ幅単位=「ピクセル」 >端口</ 番目> 
                            <番目のデータ・フィールド=「SchemaNameは」>模式（库）</ 番目> 
                            < 番目のデータフィールド= "DBUSER" >用户</ 番目> 
                            < 番目のデータフィールド= "DBPASSWORD" >密码</ 番目> 
                            < 番目のデータフィールド= "jdbcclassname" > JDBC类名</ 番目> 
                            < 番目データに出願= "コメント" >备注</ 番目> 
                            < 番目のデータフィールド= "でaddTime" >添加时间</ 目> 
                            < 番目データフィールド=「lastoptime」>最近修改时间</ 番目> 
                            < 番目のデータフィールド=「DSNAME」  データ幅=「180」データ幅単位=「ピクセル」データフォーマッタ=「formatOperation」>操作< / 目> 
                        </ TR > 
                    </ thead要素> 
                 </ テーブル> 
             </ DIV >

データフォーマッタによって定義された列フォーマット関与DSNAME方法は、フォーマットの方法は、対応するために本明細書に記載formatOperation次のように、特定コード：

関数formatOperation（値、行インデックス）{ 
        statusTxtを聞かせ "" = 。
        もし（値== "系统数据库" ）{ 
            statusTxt = "無効= TRUE" ; 
        } 
        VAR RES = 
        「<ボタン名= "btn_update"クラス= "BTN BTNプライマリBTN-SM" '+ statusTxt +'のonclick = "fnUpdateClick（\ '' + row.dsname + '\'）">修改</ボタン> 「+                 
        '<ボタン名= "btn_delete"クラス= "BTN BTN-警告BTN-SM" '+ statusTxt +'のonclick = "fnDelClick（\ '' + row.dsname + '\'）">删除</ button>の' + 
        「< ボタン名= "btn_test"クラス= "BTN BTN-成功BTN-SM" onclickの= "fnTestClick（\ '' + row.dsname + '\'）">测试</ボタン>」 ;
        リターン解像度; 
    }

次のようにクエリパラメータは次のとおりです。

関数queryParam（paramsは）{        
         VAR PARAM = { 
            オフセット：params.offset、
            限界：params.limit、
            ソート：params.sort、
            順序：params.order、
            ページ：（params.offset / params.limit）+ 1 、
            行： params.limit、
             "dbtypename"：$（ "＃のid_dbtypename" ）.val（）、
             "DSNAME"：$（ "＃のid_dsname" ）.val（）
        }; 
    
        リターンPARAM。
    }

注：上記のようbttable中のこのバージョン、のparam引数は、より複雑で、実際に完全なパラメータ（この部分のみに対処する必要があり、このようなプログラミング）の一部です。追跡することにより、あなたはのparamsの全体像を理解することができます！

宣言型：

Bootsrapテーブルは、宣言型の自然のJSが自動的に解析され断言関連して、究極の目標を達成するために、プログラミングのアプローチを実行した後。

　　　長所：シンプル、迅速な開発スピード、コード魅力。

　　　欠点：onloadイベントのドキュメントに自動的にトリガされます（ストップへの道があるかもしれないが、彼らは何をすべきかを知りませんでした）、時には、ページのロード時の問い合わせを実行したくない場合があります！

第二に、プログラム的

あなたが直接プログラミングを使用することができる書き込みコードしたい場合、プログラム主作業を含む：テーブル定義（定義されたヘッダ、様々なオプション）。

詳細な手順は、公式ウェブサイトを参照、または単に（DEFAULTS上で、詳細はsrc /定数/ index.jsに記述）コードの開発バージョンを見ることができます。

ここでは2つのコードは以下のとおりです。初期設定、カスタムAJAXクエリ

1.初期化

$（ '＃のテーブル' ）.bootstrapTable（{ 
        URL： 'データ/ scores.json'、         // テーブル出典 
        方法： 'GET' 、
        ページネーション：trueに、
        ページ番号： 1は、                       // 初期化デフォルトの最初のページをロードします1、および、レコード 
        のpageSize :. 5 、
        ユニークID： "ID" 、
        列：[ 
            { 
                フィールド： 'ID' 、
                目に見える：falseに  //が表示されません             
            }、
            { 
                フィールド： '名前' 、
                タイトル： '名前' 
            }、{ 
                フィールド,: 'セックス' 、
                タイトル： 'セックス' 
            }、{ 
                フィールド,: '誕生日' 、
                タイトル： '生年月日' 
            }、{ 
                フィールド,: 'サブジェクト名' 、
                タイトル： 'アカウント名' 
            } 、{ 
                フィールド： 'scoredate' 、
                タイトル： '試験日'  
            }、{ 
                フィールド： 'スコア' 、
                タイトル：「パフォーマンス」、
                フォーマッタ：関数（値、行インデックス）{ 
                    にconsole.log（値）。
                    VaRの RES = "" ;
                    もし（値> 50 ）{ 
                        RES = '<Pスタイル= "色：緑">' +値+ '</ P>' ; 
                    } 
                    他{ 
                        RES = '<Pスタイル= "色：赤">' +値+ '</ P>' ; 
                    } 
                    
                    戻りRES。
                }             
            } 
            、{ 
                フィールド： 'ID' 、、
                フォーマッタ：関数（値、行インデックス）{
                     VARの RES = 'の<input type =ボタン値= "删除"のonclick = "fnDel（ '+ row.id +'）>' + 
                           'の<input type =ボタン値="修改"のonclick =" fnUpdate（ '+ row.id +'）>」。
                    console.log（RES）。
                    リターンのres; 
                }             
            } 
        ] 
    }）。

上記は、比較的単純な初期化です。

2.（必要性を述べたと「カスタムAJAX要求データ-Ajaxが一緒に使用」）

関数ajaxRequestPage（paramsは）{ 
        $アヤックス（{ 
                URL： "$ {pageContext.request.contextPath} / ETL / dsconfig / GETPAGE" 、
                種類： "POST" 、
                データ型： "JSON" 、
                非同期：真、
                データ：{

                     "ページ":( params.data.offset / params.data.limit）+ 1 、
                     "行" ：params.data.limit、
                     "dbtypename"：$（" ＃のid_dbtypename」）（.val）、
                     "DSNAME"：$ （ "#id_dsname" ）.val（）
                }、
                成功：機能（RS、ステータス、XHR）{        
                     IF（rs.flag == 1。）{ 
                        params.success（
                            { // パラメータがparamsは返さなければならない、という注意 
                                "合計" ：rs.data.total、                            
                                 "行" ：rs.data.rowsを
                            }、
                            「OK」は、// これは一時的に使用しないように思わ
                            XHR    ない、常にエラーを返す場合、// 1.15.5バージョンでは、これが鍵です！ 
                        ）; 
                    }                                                 
                    他{ 
                        アラート（rs.msg）。 
                    } 
                }、
                エラー：関数（jqXHR、textStatus、errorThrown）{                     
                    $ .alert（{ 
                        タイトル： '警告' 、
                        内容： "クエリは、データソース情報を失敗し、ネットワークエラー：" + textStatus、
                        AUTOCLOSE： 'OK | 500' 
                    }）; 
                    のparams。成功（
                            { // パラメータがparamsは返さなければならない、という注意 
                                "合計"：0 、                            
                                 "行" :. 8 
                            }、
                            「OK」、// これは一時的に使用しないように思わ
                            jqXHRは// 1.15.5バージョンでは、これは常にエラーを返さない場合は、鍵です！
                        ）; 
                } 
        }）; 
    }

プログラマ：

　　　メリット：内のコントロールの下ですべてのもの！

　　　欠点：もう少しコードの量はほとんどなので、エレガントないないようでした！

第三に、学習のポイント

1.まず、基本はjsの基礎を持って、理解クラス、変数の定義、イベントなど

jQueryとAJAX、特に基本的なプロパティとメソッドAJAXオブジェクトに精通して2。

個別に検証テーブルオプションおよび列オプション3.読む公文書！

ブートストラップ・テーブルの簡単な使用

おすすめ