検索

ホームページ >ウェブフロントエンド >jsチュートリアル >bootstarp+table の使用方法の分析

bootstarp+table の使用方法の分析

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-24 13:45:032006ブラウズ

今回は、bootstarp+table の使用方法の分析をお届けします。bootstarp+table を使用する際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。

プロジェクト開発では、ネイティブの php + html5 の前後分離テクノロジーを使用しました。 PHP インターフェースは RESTful のように設計されています。RESTful についてわからない場合は、Baidu に問い合わせてください。返されるデータはすべて JSON です。

ページングに関しては、フロントエンド ページは互換性の問題のためにブートスタープを使用するため、データ ページングにはブートスタープ テーブル プラグインを引き続き試します。

ブートスタープには 2 つの構成方法があります。その記述とアプリケーションは古い UI と似ています。 easyui などのフレームワークがありますが、easyui は本当に使いやすいと思います。easyui の非同期ツリーは非常に強力です。もちろん、会社のフロントエンドが不足しているため、パートタイムでページを作成します。 PHP、ご存知の通り。

以下はブートスタープ設定を紹介します: js 設定




<script>
$(&#39;#std-list&#39;).bootstrapTable({
                    url: &#39;controller/standard.php?op=query&#39;,
                    method: "post",  //使用post发送数据的时候 需要设置contenType不然后台无法接受数据
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    toolbar: &#39;#toolbar1&#39;, // 对应你table里面的工具栏
                    pagination: true, //打开分页
                    pageSize: 10,//一页放多少个数据
                    showRefresh: true,//现实刷新按钮
                    showToggle: true,
                    pageList: [10, 20],//设置可以每页现实的数据量
                    strictSearch: true,
                    singleSelect: false,//单选多选
                    search: false,//搜索框（当前端分页时候，搜索框可以自己过滤数据，后端分页无意义）
                    onCheck: function(row, $element) {},
                    queryParams: function(params) { //向后台发送的参数都可以写这里
                        var temp = {
                            pageSize: params.limit, //页面大小
                            pageNumber: params.offset, //页码
                            op: s,
                            conds: data
                        };
                        return temp;
                    },
                    rowStyle: function(row, index) { //改变行样式。也可以使用cellStyle改变单元格样式
                        console.log(1);
                    },
                    sidePagination: &#39;server&#39;,
                    columns: [{
                            checkbox: true
                        }, {
                            field: &#39;StandardNumber&#39;,
                            title: &#39;标准编号&#39;
                        }, {
                            field: &#39;StandardName&#39;,
                            title: &#39;标准名称&#39;
                        },
                        {
                            field: &#39;StandardLevel&#39;,
                            title: &#39;标准类别&#39;
                        },
                        {
                            field: &#39;QyStandardNumber&#39;,
                            title: &#39;企标编号&#39;
                        },
                        {
                            field: &#39;ReferStandardNumber&#39;,
                            title: &#39;引用标准&#39;
                        },
                        {
                            field: &#39;FileName&#39;,
                            title: &#39;查看全文&#39;,
                            formatter: function(value, row, index) { //格式化你想要的数据
                                if(value) {
                                    var list = [];
                                    list.push(value);
                                    for(var i = 0; i < list.length; i++) {
                                        //console.log(list[i]);
                                        if(list[i] != null) {
                                            var str = list[i];
                                            var conds = str.indexOf(&#39;.&#39;);
                                            var type = str.substr(conds, str.length)
                                            if(type == ".pdf") {
                                                return &#39;<img  src="img/pdf.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="bootstarp+table の使用方法の分析" >&#39; + &#39;&#39;;
                                            } else if(type == ".txt") {
                                                return &#39;<img  src="img/txt.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="bootstarp+table の使用方法の分析" >&#39; + &#39;&#39;;
                                            } else if(type == ".docx" || type == ".doc") {
                                                return &#39;<img  src="img/doc.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="bootstarp+table の使用方法の分析" >&#39; + &#39;&#39;;
                                            } else if(type == ".png" || type == ".jpg") {
                                                return &#39;<img  src="img/img.png" onClick="lookText(\&#39;&#39; + index + &#39;\&#39;)" alt="bootstarp+table の使用方法の分析" >&#39; + &#39;&#39;;
                                            }
                                        }
                                    }
                                } else {
                                    return &#39;&#39;;
                                }
                            }
                        },
                        {
                            field: &#39;IsCancel&#39;,
                            title: &#39;是否作废&#39;
                        }
                    ],
                    rowStyle: function(value, row, index) {
                        if(value) {
                            var list = [];
                            list.push(value);
                            for(var i = 0; i < list.length; i++) {
                                console.log(list[i].IsCancel);
                                if(list[i].IsCancel == &#39;是&#39;) {
                                    console.log(1);
                                    var style = {};
                                    style = {
                                        css: {
                                            &#39;color&#39;: &#39;red&#39;
                                        }
                                    };
                                    return style;
                                } else {
                                    var style = {};
                                    style = {
                                        css: {
                                            &#39;color&#39;: &#39;&#39;
                                        }
                                    };
                                    return style;
                                }
                            }
                        }
                    }
                });
</script>
bootstarp+table の使用方法の分析 上記のページングは​​バックグラウンド ページングです。バックグラウンド ページングによって返されるデータ形式は、｛total:'your total'、rows:'your です。 data'｝ フロントエンドのページングは​​、{rows: rows}を返すだけで済みます
最後に、json形式を添付します
{


"total": "2",
"rows": [{
    "Id": "6",
    "StandardName": "1994",
    "StandardNumber": "GB-100-1994",
    "StandardLevel": "",
    "QyStandardNumber": "",
    "ReferStandardNumber": "",
    "ReferLevel": "",
    "ClassNumber": "",
    "DraftUnit": "",
    "PublishDate": "",
    "ImplementDate": "",
    "InputDatabaseDate": "",
    "IsCancel": "否",
    "CancelDate": "",
    "StructureID": "",
    "OldStandardNumber": "",
    "OldStandardName": "",
    "StandardMemo": "",
    "UseDepartment": "",
    "FileName": null,
    "FileContent": null
}, {
    "Id": "4",
    "StandardName": "4",
    "StandardNumber": "4",
    "StandardLevel": "",
    "QyStandardNumber": "1",
    "ReferStandardNumber": "",
    "ReferLevel": "",
    "ClassNumber": "",
    "DraftUnit": "",
    "PublishDate": "",
    "ImplementDate": "",
    "InputDatabaseDate": "",
    "IsCancel": "是",
    "CancelDate": "",
    "StructureID": "",
    "OldStandardNumber": "",
    "OldStandardName": "",
    "StandardMemo": "",
    "UseDepartment": "",
    "FileName": "变电设备在线监测I2接口网络通信规-范.pdf",
    "FileContent": "{\"database\":\"m2018.php\",\"key\":\"4\"}"
}]


}
ここでは、HTMLから直接テーブルを生成する方法は紹介しません。詳細については、ドキュメントまたは Baidu を確認してください。bootstarp テーブルを使用する場合、ページ上のデータを更新したり、データを削除したりする操作が含まれることがあります。削除および更新されるのは、指定された行です
。以下のインデックス テーブルを取得します
たとえば、次の updateRow は指定された行を更新します 


$('#std-list').bootstrapTable('updateRow', {
                            index: getRowIndex('#std-list', row[current]),
                            row: {
                                StandardName: StandardName,
                                StandardLevel: StandardLevel,
                                QyStandardNumber: QyStandardNumber,
                                ReferStandardNumber: ReferStandardNumber,
                                UseDepartment: UseDepartment,
                                ReferLevel: ReferLevel,
                                ClassNumber: ClassNumber,
                                StructureId: StructureId,
                                DraftUnit: DraftUnit,
                                PublishDate: PublishDate,
                                InputDatabaseDate: InputDatabaseDate,
                                OldStandardNumber: OldStandardNumber,
                                OldStandardName: OldStandardName,
                                StandardMemo: StandardMemo,
                                CancelDate: CancelDate,
                                OldStandardNumber: OldStandardNumber,
                                OldStandardName: OldStandardName,
                                StandardMemo: StandardMemo,
                                IsCancel: cancellation
                            }
                        });



インデックス (添え字) を取得するには、このメソッドを使用することをお勧めします


    function getRowIndex(sel, row) {
        var data = $(sel).bootstrapTable('getData');
        for(var i = 0; i <strong></strong> フロントエンドのページング アーティファクトは使用する価値があります。 <p style="text-align: left;"><strong>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 </strong></p>推奨書籍: <p style="text-align: left;"></p><p style="text-align: left;">PromiseA+ の実装手順の詳細な説明</p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-398044.html" target="_blank"></a> Pixeler プロジェクト開発における EasyCanvas 描画ライブラリの使用方法の実践的な概要</p><p style="text-align: left;"></p>
以上がbootstarp+table の使用方法の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JS での JSON と Math のユースケース分析次の記事：JS での JSON と Math のユースケース分析
関連記事
続きを見る