前の記事では、ブートストラップメトロニック開発フレームワークのエクスペリエンス概要を要約します[i]フレームワークの概要とメニューモジュール処理、全体的なインターフェース効果、レイアウト、メニューなどを含むブートストラップ開発フレームワークの基本的な概要、この記事はこのトピックを継続し、ブートラップのコンテストのページページを紹介します。
データインターフェイスディスプレイでは、表形式データの表示とページングは非常に一般的な処理操作です。 BootstrapのスタイルレイアウトとjQueryのAjaxデータ処理を使用して、ダイナミックディスプレイとデータのページングを適切に実現できます。
1.表示ディスプレイとページング処理のリスト1）データの表示表示
多くのページで、通常、データベースレコードをリストしてページングする必要があります。
左側のツリーリストの次のセクションは、右側の一般的なデータクエリディスプレイ領域です。クエリコンテンツとデータリストの2つの部分に分割されています。クエリコンテンツは通常、処理のためにフォームに配置されます。ユーザーがクエリをトリガーすると、イベントを処理し、MVCバックグラウンドのコントローラーから対応するデータをリクエストして、ページのフロントエンドに戻し、データを表示してパジネートします。
メニューページのクエリコードに示されているように、以下が示されています。
<form id = "ffsearch"> <div> <div> <label>ディスプレイ名</label> <div> <input name = "whc_name" type = "text"> </div> </div> </div> <div> <div> <ablead> function id </label> <div> <input name = "whc_funtionid" typen <label> Web接続アドレス</label> <div> <input name = "whc_url" type = "text"> </div> </div> </div> <div> <div> <div> <able> webメニューアイコン</label> <div> <入力名= "
ページのJSコードでは、次のスクリプトに示すように、ページが初期化された後にデータの処理を処理します。
// Page initialization $（function（）; //初期化tree bindevent（）; //バインディングイベント処理検索（currentPage）; //最初のページデータinitdictitem（）; //初期化ディクショナリ情報}）;
データを表示するためのHTMLコードを以下に示します。テーブルヘッダーの主なコンテンツが表示され、テーブルGrid_bodyの主なコンテンツが動的に構築され、スクリプトによって表示されます。
<表ID = "grid" cellpadding = "0" cellpacing = "0"> <thead id = "grid_head"> <tr> <th thepunt type = "チェックボックス" onclick = "selectall（this）"> </th> <thメニューアイコン</th> <th>システム番号</th> <th>操作</th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </table> <div> <ul id = 'grid_paging'> </ul> </div>
データ表示は、ページの準備ができた後、検索スクリプト関数を介して処理されます。処理するときは、最初にシリアル番号フォームの条件とページング条件情報をMVCコントローラーに渡して対応するリストデータを取得し、インターフェイスで動的にバインドして処理プロセス全体を完了します。特定のコードスクリーンショットを以下に示します。
および内部のコード
tr += getActionHtml（item.id）;
次に、いくつかの操作ボタンがスクリプトを介して生成され、インターフェイスは次のとおりです。
2）データページング処理
私たちのページに表示されるデータは通常、固定レコードではないため、パジネーションも必要な処理であり、パフォーマンスを改善し、ユーザーフレンドリーなエクスペリエンスを向上させることができます。データページネーションは、Bootstrapのプラグインブートストラップページネーターを使用して処理されます。このコントロールは非常に使用されており、非常に強力なページングプラグインです。
Bootstrap PaginatorそのGitHubコードアドレスはhttps：//github.com/lyonlai/bootstrap-paginatorです
その使用例を紹介できます。http：//lyonlai.github.io/bootstrap-paginator/を参照してください。
このコントロールを使用する場合、jQueryおよびブートストラップのスタイルとクラスライブラリを導入した後、次のコード行を介して追加および使用できます。
<スクリプトsrc = "/js/bootstrap-paginator.min.js"> </script>
このコントロールページングは、ページクリックされたページ変更イベントを処理することで実装できます。
ページにコンテンツを表示するために、HTMLコードにDIVを追加し、ID grid_pagingを使用してUL要素を宣言します。コードは次のとおりです。
<div> <ul id = 'grid_paging'> </ul> </div>
次に、特定のJS処理コードが次のとおりです。
MVCの背景では、これらのパラメーターに基づいて対応するデータを取得してクライアントに戻すことができるように、フロントエンドページでユーザーが渡すページング条件を取得し、フォームデータ条件を形成する必要があります。
これらの処理は非常に一般的であるため、処理のためにベースクラスのコントローラーに入れることができます。特別な処理が必要な場合は、サブクラスコントローラーのページネーション関数FindWithPagerを書き直します。
/// <summary> ///条件に応じてデータベースをクエリし、オブジェクトコレクションを返します（ページネーションデータディスプレイ）文字列where = getPagERCONDITION（）; pagerinfo pagerinfo = getPagerInfo（）;リスト<t> list = basebll.findwithpager（ここで、pagerinfo）; // JSONフォーマット要件{合計：22、行：{}} // jsonの形式を構築してvar result = new {total = pagerinfo.recordcount、rows = list}; tojsoncontentdate（result）を返します。 }その中で、GetPagerInfoは、ユーザーが渡すページネーションパラメーターを取得することです。以下に示すように、上記のフロントエンドページで処理されたURLパラメーターをまだ覚えていますか。
url = "/menu/findwithpager？page =" + page + "＆rows =" + rows;
特定のMVCコントローラーgetPagerInfo関数の実装コードは次のとおりです。
/// <summary> ///リクエストパラメーターに従ってページネーションオブジェクトデータを取得する/// </summary> /// 1：int.parse（request ["page"]）; int pagesize = request ["rows"] == null？ 10：int.parse（request ["rows"]）; pagerinfo pagerinfo = new pagerinfo（）; pagerinfo.currenetPageIndex = pageIndex; pagerinfo.pagesize = pagesize; pagerinfoを返します。 }
その後、フォーム条件とページング条件を取得した後、フレームワークに渡されたビジネスロジッククラスで十分です。これはすでにフレームワークの下部にあるサポートカテゴリであり、拡大し続けません。
リスト<t> list = basebll.findwithpager（ここで、pagerinfo）;
最終的なインターフェイス効果は次のとおりです
2。プラグインJSTREE
前のセクションでは、ツリーリストの表示も改善されています。一般に、データが階層的である場合、ツリーリストの表示はその構造を直感的に表示できます。したがって、多くの場合、ツリーリストはデータの分類表示に役立ちます。
たとえば、ユーザーデータの場合、ユーザーの組織構造または役割を分類することができ、ツリーリストを介して視覚的に表示できるため、さまざまな種類のユーザーリストを探すと簡単に見つけることができます。
または、辞書データまたは州および都市のデータの場合、ツリーリストを介して表示することもできます。
JSTREEコントロールの公式住所はhttps://www.jstree.com/です
ウェブサイトは、JSTREEコントロールの指示とケースの説明についてすでに明確にしています。一般的に言えば、例を直接参照することでそれらを使用できます。
単純なJSTREE使用コードは次のとおりです
$（function（）{$（ '＃jstree_demo_div'）。jstree（）;}）;JSTREEのイベントの場合、通常、次のコードを介してイベントをバインドできます。
$（ '＃jstree_demo_div'）。
JSTREEの場合、通常、JSONデータを使用して動的にバインドします。このJSONのデータ形式定義は次のとおりです。
{id： "string" // required parent： "string" //必須テキスト： "string" // nodeテキストアイコン： "string" // custom state：{opened：boolean // node open disabled：boolean // selected：boolean // node selected}、li_attr：{{{{{{{{{{{{{{{{{{{{{} abatttr a_tribute a_tributeのnode //生成されたノードの属性}一般的に言えば、次のスクリプトを使用して、データをクリアおよびバインドします。
$（ '＃jstree_demo_div'） }）。bind（ 'loaded.jstree'、loadedFunction）;}）;
ユーザーにチェックボックスを提供し、JSTREEの選択したステータスを設定する必要がある場合、インターフェイス効果は次のとおりです。
次のコードに示すように、一般的な初期化関数を変更する必要があります
//チェックボックスを使用したJSTREEの初期化コード（url、function（data）{control.jstree（{'プラグイン'：["チェックボックス"]、//選択ボックス 'チェックボックス'：{cascade： ""、3_state：false}、// // }）。この2つを組み合わせることで、JSTREEコントロールの初期化結合をJSパブリック機能BindJStreeにさらに改良することができます。
//指定されたJSONデータでJSTREEコントロールを初期化しますischeck = arguments [2] ||間違い; //チェックボックスのデフォルト値をfalse if（ischeck）{//チェックボックスツリー$ .getJson（url、function（data）{control.jstree（{'プラグイン'：["チェックボックス"]、//選択ボックスが「チェックボックス」：{cascade： ""、three_state：balse}、balse '：{cascaded "ont" corcaded' ont "data" 「レスポンシブ」：false}}}）。 } else {//通常のツリーリストの初期化$ .getjson（url、function（data）{control.jstree（{'core'： 'data'：{'data'： "temes"：{"responsive"：false}}}）。 }}したがって、ページがJSTREEに結合すると、コードを簡素化できます
//組織リストの初期化function initdepttreeview（）{var treeurl = '/user/getmydeptjstreejson？userid =@session ["userid"]'; bindjstree（ "jstree_div"、treeurl）; //ツリーコントロールのイベント処理$（ '＃jstree_div'）。 }チェックボックスのリストの場合、初期化コードは次のとおりです。
//すべてのユーザーのすべての関数セットを初期化するvar treeurl = '/function/getrolefunctionjstreebyuser？userid =@session ["userid"]'; bindjstree（ "tree_function"、treeurl、true）; //ロールデータの権限、すべての部門を初期化しますfirst Treeurl = '/user/getMyDeptJStreejson？userId =@session ["userid"]'; bindjstree（ "tree_roledata"、treeurl、true）;
チェックボックスの場合、通常、データを初期化し、必要に応じてツリーリストの選択したステータスを設定します。これには、パフォーマンスと応答のエクスペリエンスを効果的に改善できるツリーの初期化を頻繁にする必要はありません。
ツリーリストを初期化した後、選択項目をクリアしてから、必要な選択項目を設定する必要があります。特定のコードは次のとおりです。UNCHECK_ALLおよびCHECK_NODEイベントの処理に注意してください。
//ロールデータの許可セット（組織）関数initroledata（id）{if（id！= ""）{var treemenu = "tree_roledata"; $（ '＃' + Treemenu）.jstree（ "Uncheck_all"）; //すべての選択を解除する//指定されたコンテンツをチェックします$ .getJson（ "/roledata/getroledatalist？r =" + math.random（） + "＆roleid =" + id、function（json）{$ .each（json、benction、（i、 ' +' +） treemenu）.jstree（ 'check_node'、item）; // select node}）; }}データを保存するとき、JSTREEノード選択リストを取得してからデータを保存します。特定のコードは次のとおりです。
//ロールデータ許可機能saveroledata（rofid）{var oulist = $（ '＃tree_roledata'）。jstree（ 'get_selected'）; var url = '/roledata/updatedata？r =' + math.random（）; var postdata = {roleid：roleid、oulist：oulist.join（ '、'）}; $ .post（url、postdata、function（json）{initroledata（roled）;}）。 }さて、結局のところ、私は通常のデータディスプレイとデータページングを導入しました。 JSTREEバインディング、イベント処理、データストレージ、その他の操作。私はあなたの継続的なサポートを得たいと思っています。学習をより具体的かつ実用的にするために、ブートストラップ開発とさまざまなプラグインの使用に伴う重要なポイントを紹介し続け、リアル価格開発プロジェクトへの有用な参照を提供できます。
上記のコンテンツは、ブートストラップ[2]のリストページネーション処理とプラグインJSTREEの使用に基づいたBootstrapメトロニック開発フレームワークの経験の要約です。私はそれがすべての人に役立つことを願っています。 wulin.comのウェブサイトへのご支援に感謝します。私たちはもっとうまくいくと思います！