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: 'table table-hover', locale: undefined, height: undefined, undefinedText: '-', sortName: undefined, sortOrder: 'asc', sortStable: false, striped: false, columns: [[]], data: [], dataField: 'rows', method: 'get', url: undefined, ajax: undefined, cache: true, contentType: 'application/json;charset=UTF-8',//这里我就加了个utf-8 dataType: 'json', ajaxOptions: {}, queryParams: function (params) {//这个是设置查询时候的参数,我直接在源码中修改过,不喜欢offetset 我后台用的 是pageNo. 这样处理就比较的满足我的要求,其实也可以在后台改,麻烦! return params; }, queryParamsType: 'limit', // undefined (这里是根据不同的参数,选择不同的查询的条件) responseHandler: function (res) {//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理,返回什么部分的数据,比如我的就需要进行整改的! return res; }, pagination: false, onlyInfoPagination: false, sidePagination: 'client', // client or server totalRows: 0, // server side need to set pageNumber: 1, pageSize: 10, pageList: [10, 25, 50, 100], paginationHAlign: 'right', //right, left paginationVAlign: 'bottom', //bottom, top, both paginationDetailHAlign: 'left', //right, left paginationPreText: '‹', paginationNextText: '›', search: false, searchOnEnterKey: false, strictSearch: false, searchAlign: 'right', selectItemName: 'btSelectItem', showHeader: true, showFooter: false, showColumns: false, showPaginationSwitch: false,//展示页数的选择? showRefresh: false, showToggle: false, buttonsAlign: 'right', smartDisplay: true, escape: false, minimumCountColumns: 1, idField: undefined, uniqueId: undefined, cardView: false, detailView: false, detailFormatter: function (index, row) { return ''; }, trimOnSearch: true, clickToSelect: false, singleSelect: false, toolbar: undefined, toolbarAlign: 'left', checkboxHeader: true, sortable: true, silentSort: true, maintainSelected: false, searchTimeOut: 500, searchText: '', iconSize: undefined, buttonsClass: 'default', iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome) icons: { paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th', detailOpen: 'glyphicon-plus icon-plus', detailClose: 'glyphicon-minus icon-minus' }, 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: 'state', checkbox: true, align: 'center', valign: 'middle' }, { title: 'ID', field: 'id', align: 'center', valign: 'middle' }, { field: 'userName', title: 'UserName', sortable: true, footerFormatter: totalNameFormatter, align: 'center' }, { field: 'userType', title: 'UserType', sortable: true, align: 'center' }, { field: 'password', title: 'UserPass', sortable: true, align: 'center' },{ field: 'indexcode', title: 'Indexcode', sortable: true, align: 'center' },{ field: 'operate', title: 'Item Operate', align: 'center', events: operateEvents, formatter: operateFormatter } ] });
function operateFormatter(value, row, index) { return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="glyphicon glyphicon-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join(''); }
....たくさんのこと!
選択したすべてのイベントを削除するための削除ボタン!すごいじゃないですか!りー