bootstarp+table の使用方法の分析

今回は、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>

上記のページングは​​バックグラウンド ページングです。バックグラウンド ページングによって返されるデータ形式は、｛total:'your total'、rows:'your です。 data'｝ フロントエンドのページングは​​、{rows: rows}を返すだけで済みます

最後に、json形式を添付します

{

}

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

。以下のインデックス テーブルを取得します

たとえば、次の updateRow は指定された行を更新します

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

以上がbootstarp+table の使用方法の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。