まず、ブートストラップテーブルの効果を見てみましょう。
このテーブルは、データベースにデータを表示するために使用されます。データは、Ajaxを介してサーバーからロードされます。同時に、ページング機能は、クライアントのページングと、大量のデータの負荷が不十分なことによって引き起こされるユーザーエクスペリエンスを回避するためにサーバーによって実装されます。また、データをクエリの開始時間と終了時間を特定の時間範囲のデータに照会することもできます。オンライン編集関数は、ブートストラップテーブルを拡張し、X-Edableを使用して実装されます。
ブートストラップテーブルを使用するには2つの方法があります。
1.通常のテーブルのデータ属性を設定します。
2. JavaScriptを介してBootstrapテーブルプラグインを有効にします。
最初の方法は非常に便利ですが、JSとHTMLを分離できる2番目の方法を好み、JSコードを再利用できます。
Bootstrapテーブルのドキュメントは比較的詳細ですが、サンプルコードなどで見つける必要がある特定のコンテンツがいくつかあります。
最初にフロントとバックエンドの実装コードを投稿し、詳細に紹介します。
フロントで必要なリソースファイルには、主にBootstrap3関連のスタイル、JS、Bootstrapテーブル関連のCSS、JS、X編集可能なBootstrap3ベースのスタイルとJSが含まれます。
<link rel = "styleSheet" href = "../ assets/bootstrap/css/bootstrap.min.css"> <link rel = "href =" ../ assets/bootstrap-table/src/bootstrap-table.css "> <link rel =" styleSeet "" styleSheet " href = "// rawgit.com/vitalets/x-editable/master/dist/boottrap3-editable/css/bootstrap-editabuter.css"> <script src =" ../ assets/jquery.min.js "> </script> <スクリプトsrc = "../ assets/bootstrap/js/bootstrap.min.js"> </script> <script src = "../ assets/bootstrap-table/src/bootstrap-table.js"> </script> <スクリプトsrc = "../ assets/bootstrap-table/src/extensions/editable/bootstrap-table.js"> </script> <script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-edable/js/bottrap-editable.js"> </script>
HTMLコードのみが必要です
<表ID = "QueryList"> </table>
JSコード、タイムクエリ関連コード、クエリ時間が正しく設定された後、データはBootstrapテーブルメソッドを介して更新されます。
$（ '＃submitgetData'）。 } date.parse（endtime _） - date.parse（begintime_）<'Query時間設定エラー} {'＃msg '）。 $（ '＃querylist'）。テーブル関連JS：
$（ '＃querylist'）。bootstraptable（{columns：[{field： 'metermeasurehistoryid'、title： 'id'、sortable：true}、{field： 'value'、title： 'value'、editable：{type： 'text'、valtate：function（value）{if）= '' ' }、{field： 'timestamp'、title： 'time'、editable： 'text'、vartate（value）{if（$。trim（value）== ''） Formatter：var s = '<a class = "javascript：void（0）" <' <a class = "href =" javascript：void（0） "> delete </a> '; 'Metermeasurehistoryid'、sortorord： 'desc'、pagination：true、sidepagination： 'server'、pageNumber：1、pageNumber：5、pagelist：[5、10、20]、queryparams：function（params）{return {meterid：$（ '＃meterid'）。 begintime：$（ '＃begintime'）。val（）、endtime：$（ '＃endtime'）。val（）}}}}}}）; window.operateevents = {'click .save'：function（e、value、row、index、index {$ .ajax（ur：op： "" post "" "post" "post" "post" "post" "post" "post" post "post" post "post" post "post" post "post" post "post" post "post" op '/Analyze/EditermeasureHistoryData'、成功：function（data）{alert（ 'Modifiedfuly'）}）; }、 'Click .Remove'：function（e、value、row、index）{$ .ajax（{type： "post"、data：row、url： '/areze/deletemetermeasurehistorydata'、function：function（data）{alert（ 'delete cusecly'）; $（ '＃querylist'）。値：[row.meterer historyid]}}）; }};列パラメーターは、テーブルのすべての列と各列のパラメーターを設定します。フィールドは、JSONによって返されたデータのキー値と、ブートストラップテーブルの列パラメーターに対応します。タイトルに従って表示される列名。ソート可能な設定は、現在の列に従ってソートされます。フォーマッタは、列内の各セルの形式を設定します。編集可能な設定は、現在の列セルの編集方法であり、検証検証方法も設定できます。
したがって、実際のテーブルは4つの列に設定され、最初の列に従ってソートされ、列2と3を編集でき、タイプはテキストに設定され、他のタイプは必要に応じて使用できます。 2番目の列検証データは空にすることはできず、3番目の列検証入力値は時間です。列1、2、および3の内容は、サーバーによって返されたJSONデータからのものです。 4番目の列は、現在の行のデータ操作であり、リスニングイベントが操作され、ウィンドウにバインドされています。
ソート名は列1のフィールド値に設定されています。
sortorderは順序を逆に設定します。
ページネーションはページネーションに当てはまります。
サイドパジネーションはサーバーのページネーションを表します。
PageNumberは、デフォルトの開始ページを示します。
Pagesizeは、ページごとに表示されるデータの数を表します。
Pagelistは、ページごとに表示されるデータのオプションの数を表します。
QueryParamsとは、サーバーに送信される各パラメーターを必要なパラメーターに追加できることを意味します。
URLはデータの要求アドレスです。
bootstrap-table.jsを確認すると、デフォルトのパラメーターが表示されます。
bootstraptable.prototype.initserver = function（silent、query）{var this = this、data = {}、params = {pagesize：this.options.pagesize === this.options.formatallrows（）？ this.options.totalrows：this.options.pagesize、pagenumber：this.options.pageNumber、searchText：this.searchText、sortName：this.options.sortname、sortorord：this.options.sortorder}; if（！this.options.url）{return; } if（this.options.queryparamstype === 'limit'）{params = {search：params.searchtext、sort：params.sortname、order：params.sortorder}; if（this.options.pagination）{params.limit = this.options.pagesize === this.options.formatallrows（）？ this.options.totalrows：this.options.pagesize; params.offset = this.options.pagesize === this.options.formatallrows（）？：this.options.pagesize *（this.options.pageNumber -1）; }}サーバーのバックグラウンドは、3つの機能を実装します。1つはデータに基づいてロードし、データを変更および削除することです。
public ActionResult getJsonHistoryDatas（）{var displaystart = int.parse（request ["offset"]）; var displaylength = int.parse（request ["pagesize"]）; var meterid = int.parse（request ["meterid"]）; var order = request ["SORTORDER"]; var historydatas = db.metermeasurehistories。 WHERE（p => p.metermeasure.meterID == meterID）。 OrderByDescending（p => p.timestamp）。スキップ（displaystart）。 （displaylength）.tolist（）; //最新のdisplaylengthデータを表示if（ "asc" == order）{historydatas = db.metermeasurehistories。 WHERE（p => p.metermeasure.meterID == meterID）。 Orderby（p => p.timestamp）。スキップ（displaystart）。 （displaylength）.tolist（）; //最も早いdisplaylengthデータを表示} int historydatatal = db.metermeasurehistoriesを取得します。 where（p => p.metermeasure.meterid == meterid）.count（）; //データの総数//時間フィルタリングif（！string.isnullorempty（request ["begintime"]））{datetime begintime = datetime.parse（request ["begintime"]）; DateTime EndTime = DateTime.Parse（request ["endtime"]）; historydatas = db.metermeasurehistories。 WHERE（p => p.metermeasure.meterID == meterID）。ここで（p => p.timestamp> begintime && p.timestamp <endtime）。 OrderByDescending（p => p.timestamp）。スキップ（displaystart）。 （displaylength）.tolist（）; //最新のdisplaylength strip Dataを表示if（ "asc" == order）{historydatas = db.metermeasurehistories。 WHERE（p => p.metermeasure.meterID == meterID）。ここで（p => p.timestamp> begintime && p.timestamp <endtime）。 Orderby（p => p.timestamp）。スキップ（displaystart）。 （displaylength）.tolist（）; //最も早いdisplaylength data} historydatatal = db.metermeasherhistoriesを取得します。 WHERE（p => p.metermeasure.meterID == meterID）。ここで（p => p.timestamp> begintime && p.timestamp <endtime）.count（）; //データの総数} list <metermeasurehistorydataviewmodels> listmetermeasehistories = new list <metereasurehistorydataviewmodels>（）; foreach（historydatasのvar item）{listmetermeasurehistories.add（new metermeasurehistorydataviewmodels {metermeasurehistoryid = item.metermeasurehistoryid、value = item.value、timestamp = item.timestamp.tostring（）}）; } string jsondatatable = jsonconvert.serializeObject（new {total = historydatotal、rows = listmetermeasurehistories}）;コンテンツを返す（jsondatatable）;}ページネーションとデータクエリを実装し、JSONデータを返します。返されたJSONデータには、合計と行の2つのオブジェクトが含まれています。合計はデータの総数を表し、行は表示されるデータを表します。 MeterEaseHistoryDateViewは次のとおりで、テーブルのフィールド値に対応しています。
Public Class MeterermeasureHistoryDataViewModels {public int metermeasurehistoryid {get;セット; } public double value {get;セット; } public string timestamp {get;セット; }}データの変更関数：
[httppost] public jsonresult editmetermeasurehistorydata（）{var meterestehistoryid = int.parse（request ["metereasehistoryid"]）; var meterestehistoryvalue = double.parse（request ["value"]）; var meterestehistorytime = datetime.parse（request ["timestamp"]）; var meterestehistoryIndb = db.MetererMeasureHistory.find（meterestehistoryid）; meteresteasurehistoryindb.value = meteresteasurehistoryvalue; meteresteasurehistoryindb.timestamp = meteresteasehistorytime; db.savechanges（）; var chanderdata = new MeterermeasureHistoryDataViewModels {MeterErageHistoryId = MeteresteasureHistoryIndb.MeterermeasureHistoryid、value = meteresteasurehistoryindb.value、timestamp = meteresteasehistoryindb.timestamp.tostring（）}; jsonresult js = new jsonresult（）; js.data = json（chanderdata）; JSを返します;}データ削除関数：
[httppost] public jsonresult deletemetermeasurehistorydata（）{var meterestehistoryid = int.parse（request ["metermeasurehistoryid"]）; db.meterermeasurehistory.remove（db.metermeasurehistory.find（meterestehistoryid））; db.savechanges（）; var deletedData = new MetermeasureHistoryDataViewModels {MeterErageHistoryId = MeteresteasureHistoryId、value = 0、Timestamp = null}; jsonresult js = new jsonresult（）; js.data = deletedData; JSを返します;}サーバーが削除された後、フォアグラウンドは、ブートストラップテーブルメソッドを介して指定されたデータの行を削除します。
私は現在これらのものを使用しています。学習プロセスを要約するために、公式ドキュメント、例を調べ、ソースコードを参照し、Chrome開発者ツールを使用してソースとネットワークを表示することを学びます。
上記は、編集者が紹介したブートストラップテーブルサーバーのページネーションとオンライン編集アプリケーションの概要です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！