ホームページ  >  記事  >  php教程  >  ブートストラップテーブルの使用状況分析

ブートストラップテーブルの使用状況分析

高洛峰
高洛峰オリジナル
2016-12-08 10:02:522174ブラウズ

Jqueryでいくつかのことを学び、それらを補ったり改善したりしてください。結局、それらは使用されない場合があります。
この方法は、現在選択されているノードのイベントのIDの値を選択するのに非常に便利です。
現在の行には大量のデータがありますが、現時点ではidの値だけが必要です。操作は非常に簡単です。

$.map(data,function(item,index){return XXX})
//使用的总结:
 //把一个数组,按照新的方式进行组装返回,和原来的数组不一样。
 //遍历data数组中的每个元素,并按照return中的计算方式 形成一个新的元素,放入返回的数组中
 var b = $.map( [55,1,2], function( item,index ) {
 return {
 "label": item,
 "value": index
 }
 });
 alert(b[0].label +" "+ b[0].value);
 //输出为 55 0

2. この期間中、ページング処理を実行するときにも多くの問題に遭遇しました
私はオフラインクエリを使用しましたが、このメソッドでは、受信セッションは次のとおりです。プロキシクラスのデータが原因で、次のメソッドで変換できませんでした。
Baidu で長い間検索したところ、最終的にこの問題が原因であることがわかりました。

バックグラウンドで返されるデータと形式は、BootStrap の形式とは若干異なります

/** * Get an executable instance of <literal>Criteria</literal>, * to actually run the query. */
 public Criteria getExecutableCriteria(Session session) {
 impl.setSession( ( SessionImplementor ) session );
 return impl;
 }

重要なことは、ここでは統一された戻りインターフェイス ActionResult を使用していることです。バックエンドを統一します

return (PageBean) getHibernateTemplate().executeWithNativeSession(new HibernateCallback() {
 public Object doInHibernate(Session session) throws HibernateException {
 Criteria criteria = detachedCriteria.getExecutableCriteria(session);
 ............................
 }

フロントエンドの効果を見てみましょう


フロントエンドページ

{
 "success": true,
 "message": null,
 "data": {
 "pageSize": 15,
 "rows": [
 
 {
 "userName": "333",
 "userType": 333,
 "password": "333",
 "id": 11,
 "indexcode": "333"
 },
 {
 "userName": "3",
 "userType": 333,
 "password": "333",
 "id": 5,
 "indexcode": "33333"
 }
 .......
 ],
 "total": 17,
 "totalPage": 2,
 "page": 0,
 "hasPreviousPage": true,
 "hasNextPage": true,
 "lastPage": false,
 "firstPage": false
 }
}
ブートストラップテーブルの使用状況分析

S code

**
 * Created by JetWang on 2016/10/1.
 */
public class ActionResult {
 
 private boolean success;
 
 private String message;
 
 private Object data;
 
 
 public ActionResult(){
 }
 
 public ActionResult(boolean success){
 this(success, null, null);
 }
 
 ............
 
}

以下 設定ファイルといくつかのイベントの書き換えについては、ドキュメントを確認するか、自分でソースコードを見てください

ここで書き換えることができます~~、extended は再カバーしますそれ!

<%@ include file="./common/common.jsp"%> //什么公用的bootstrapt ,JQuery啊之类的引用放进去处理了
<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.js" type="text/javascript"></script>
<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table-locale-all.js" type="text/javascript"> </script>
<link rel="stylesheet" href="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.css" type="text/css">
//这里就是容器中放置table的
<div class="container">
 <table id="table" data-url="/cms/UserInfo/userInfoPage">//使用的路径,后台请求的URL
 </table>
</div>


上記を見て、基本的に書き方が分かりました!実はこれまではこういう演奏をする勇気がなかったのですが、前回のインターンシップで先生に教えていただいたので、思い切って弾けるようになったと思います!

jQuery(document).ready(function() {
 //这里你可以使用各种法师,也可以使用seajs前端模块化工具
 下面放置我们的js代码就好了
});

上記の footerFormatter と formatter は、現在の列の表示を処理するイベントです。 ドキュメントは次のとおりです。

formatter:

コンテキスト (this) は列オブジェクトであり、3 つのパラメーターを受け取ります。 : value: フィールドの値 row: 行レコードのデータ

footerFormatter :

コンテキスト (this) は 1 つのパラメーターを受け取ります:

data: すべてのデータ行の配列関数は、フッター セルに表示するテキストを含む文字列を返す必要があります

すべてが処理され、現在の列に表示されます

次は、セルに 2 つのボタンを追加する方法です



ここにあります イベント処理を追加するだけです

BootstrapTable.DEFAULTS = {
 classes: &#39;table table-hover&#39;,
 locale: undefined,
 height: undefined,
 undefinedText: &#39;-&#39;,
 sortName: undefined,
 sortOrder: &#39;asc&#39;,
 sortStable: false,
 striped: false,
 columns: [[]],
 data: [],
 dataField: &#39;rows&#39;,
 method: &#39;get&#39;,
 url: undefined,
 ajax: undefined,
 cache: true,
 contentType: &#39;application/json;charset=UTF-8&#39;,//这里我就加了个utf-8
 dataType: &#39;json&#39;,
 ajaxOptions: {},
 queryParams: function (params) {//这个是设置查询时候的参数,我直接在源码中修改过,不喜欢offetset 我后台用的 是pageNo. 这样处理就比较的满足我的要求,其实也可以在后台改,麻烦!
 return params;
 },
 queryParamsType: &#39;limit&#39;, // undefined (这里是根据不同的参数,选择不同的查询的条件)
 responseHandler: function (res) {//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理,返回什么部分的数据,比如我的就需要进行整改的!
 return res;
 },
 pagination: false,
 onlyInfoPagination: false,
 sidePagination: &#39;client&#39;, // client or server
 totalRows: 0, // server side need to set
 pageNumber: 1,
 pageSize: 10,
 pageList: [10, 25, 50, 100],
 paginationHAlign: &#39;right&#39;, //right, left
 paginationVAlign: &#39;bottom&#39;, //bottom, top, both
 paginationDetailHAlign: &#39;left&#39;, //right, left
 paginationPreText: &#39;‹&#39;,
 paginationNextText: &#39;›&#39;,
 search: false,
 searchOnEnterKey: false,
 strictSearch: false,
 searchAlign: &#39;right&#39;,
 selectItemName: &#39;btSelectItem&#39;,
 showHeader: true,
 showFooter: false,
 showColumns: false,
 showPaginationSwitch: false,//展示页数的选择?
 showRefresh: false,
 showToggle: false,
 buttonsAlign: &#39;right&#39;,
 smartDisplay: true,
 escape: false,
 minimumCountColumns: 1,
 idField: undefined,
 uniqueId: undefined,
 cardView: false,
 detailView: false,
 detailFormatter: function (index, row) {
 return &#39;&#39;;
 },
 trimOnSearch: true,
 clickToSelect: false,
 singleSelect: false,
 toolbar: undefined,
 toolbarAlign: &#39;left&#39;,
 checkboxHeader: true,
 sortable: true,
 silentSort: true,
 maintainSelected: false,
 searchTimeOut: 500,
 searchText: &#39;&#39;,
 iconSize: undefined,
 buttonsClass: &#39;default&#39;,
 iconsPrefix: &#39;glyphicon&#39;, // glyphicon of fa (font awesome)
 icons: {
 paginationSwitchDown: &#39;glyphicon-collapse-down icon-chevron-down&#39;,
 paginationSwitchUp: &#39;glyphicon-collapse-up icon-chevron-up&#39;,
 refresh: &#39;glyphicon-refresh icon-refresh&#39;,
 toggle: &#39;glyphicon-list-alt icon-list-alt&#39;,
 columns: &#39;glyphicon-th icon-th&#39;,
 detailOpen: &#39;glyphicon-plus icon-plus&#39;,
 detailClose: &#39;glyphicon-minus icon-minus&#39;
 },
 
 customSearch: $.noop,
 
 customSort: $.noop,
 
 rowStyle: function (row, index) {
 return {};
 },
 
 rowAttributes: function (row, index) {
 return {};
 },
 
 footerStyle: function (row, index) {
 return {};
 },
 
 onAll: function (name, args) {
 return false;
 },
 onClickCell: function (field, value, row, $element) {
 return false;
 },
 onDblClickCell: function (field, value, row, $element) {
 return false;
 },
 onClickRow: function (item, $element) {
 return false;
 },
 onDblClickRow: function (item, $element) {
 return false;
 },
 onSort: function (name, order) {
 return false;
 },
 onCheck: function (row) {
 return false;
 },
 onUncheck: function (row) {
 return false;
 },
 onCheckAll: function (rows) {
 return false;
 },
 onUncheckAll: function (rows) {
 return false;
 },
 onCheckSome: function (rows) {
 return false;
 },
 onUncheckSome: function (rows) {
 return false;
 },
 onLoadSuccess: function (data) {
 return false;
 },
 onLoadError: function (status) {
 return false;
 },
 onColumnSwitch: function (field, checked) {
 return false;
 },
 onPageChange: function (number, size) {
 return false;
 },
 onSearch: function (text) {
 return false;
 },
 onToggle: function (cardView) {
 return false;
 },
 onPreBody: function (data) {
 return false;
 },
 onPostBody: function () {
 return false;
 },
 onPostHeader: function () {
 return false;
 },
 onExpandRow: function (index, row, $detail) {
 return false;
 },
 onCollapseRow: function (index, row) {
 return false;
 },
 onRefreshOptions: function (options) {
 return false;
 },
 onRefresh: function (params) {
 return false;
 },
 onResetView: function () {
 return false;
 }
 };

公式ドキュメントには、イベントの処理は次のように処理できると記載されています

フォーマッタ関数を使用する場合、セルイベントリスナーは4つのパラメータを取ります: イベント: jQueryイベント: row: 行レコードのデータ。index: 行のインデックス。

function initTable() {
$table.bootstrapTable({
striped: true, //表格显示条纹
pagination: true, //启动分页
pageSize: 15, //每页显示的记录数
pageNumber:1, //当前第几页
pageList: [10, 15, 20, 25], //记录数可选列表
search: false, //是否启用查询
showColumns: true, //显示下拉框勾选要显示的列
showRefresh: true, //显示刷新按钮
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
//设置为limit可以获取limit, offset, search, sort, order
responseHandler:function(res){
//远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理
//在ajax后我们可以在这里进行一些事件的处理
return res.data;
},
queryParamsType : "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
//这里是在ajax发送请求的时候设置一些参数 params有什么东西,自己看看源码就知道了
pageNo: params.pageNumber,
pageSize: params.pageSize
};
return param;
},
onLoadSuccess: function(data){ //加载成功时执行
alert("加载成功"+data);
},
onLoadError: function(){ //加载失败时执行
layer.msg("加载数据失败", {time : 1500, icon : 2});
},
height: getHeight(),
columns: [
{
field: &#39;state&#39;,
checkbox: true,
align: &#39;center&#39;,
valign: &#39;middle&#39;
}, {
title: &#39;ID&#39;,
field: &#39;id&#39;,
align: &#39;center&#39;,
valign: &#39;middle&#39;
},
{
field: &#39;userName&#39;,
title: &#39;UserName&#39;,
sortable: true,
footerFormatter: totalNameFormatter,
align: &#39;center&#39;
}, {
field: &#39;userType&#39;,
title: &#39;UserType&#39;,
sortable: true,
align: &#39;center&#39;
},
{
field: &#39;password&#39;,
title: &#39;UserPass&#39;,
sortable: true,
align: &#39;center&#39;
},{
field: &#39;indexcode&#39;,
title: &#39;Indexcode&#39;,
sortable: true,
align: &#39;center&#39;
},{
field: &#39;operate&#39;,
title: &#39;Item Operate&#39;,
align: &#39;center&#39;,
events: operateEvents,
formatter: operateFormatter
}
]
});

はシステム内に存在するイベントの処理を処理します。現在選択されている行数、すべて選択などのいくつかのメソッド。

function operateFormatter(value, row, index) {
return [ &#39;<a class="like" href="javascript:void(0)" title="Like">&#39;, &#39;<i class="glyphicon glyphicon-heart"></i>&#39;, &#39;</a> &#39;, &#39;<a class="remove" href="javascript:void(0)" title="Remove">&#39;, &#39;<i class="glyphicon glyphicon-remove"></i>&#39;, &#39;</a>&#39; ].join(&#39;&#39;);
}


....たくさんのこと!

選択したすべてのイベントを削除するための削除ボタン!すごいじゃないですか!

りー

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。