序文：ブロガーは、以前にknockoutjsとbootstraptableの基本的な使用法を共有しています。これらはすべて基本的なアプリケーションであり、カプセル化されていません。彼らはHTMLコントロールの価値と割り当てを避けるだけであり、MVVMの絶妙さを示すことからはほど遠いものです。最近、このプロジェクトは公式にKOを使用する予定であるため、KOとBootstraptableのパッケージを作成しており、Park Friendsによる参照のためにここで共有されています。パッケージングのアイデアについては、ブログパークマスターXiao Qinを参照してください。公園の友達がより良い方法を持っている場合は、お気軽に議論してください。
knockoutjsシリーズ記事：
BootstraptableとKnockoutjsが組み合わさって、追加、削除、変更、およびチェックの機能を実現します[1]
BootstraptableとKnockoutjsが組み合わさって、追加、削除、変更、およびチェックの機能を実現します[2]
1.最初のViewModelはクエリを処理します
デモの実装は、前回の部門管理機能を継続することです。次の拡張は、データフローによって説明されます。
1.背景はViewModelの実装をビューに返します
public ActionResult index（）{var model = new {tableparams = new {url = "/department/getDepartment"、// pagesize = 2、}、urls = new {delete = "/department/delete"、edit = "/degivipy/edit"、add = "/department/edit"、 view（model）;}コード疑問：ここに返されるモデルには、3つのオプションが含まれています
•TableParams：ページテーブルの初期化パラメーター。デフォルトのパラメーターはJSで定義されているため、ここで設定されたパラメーターはページ固有の初期化パラメーターです。
•URL：追加、削除、および変更の要求を含むURLパス。
•QueryCondition：ページのクエリ条件。
2。CSHTMLページコード
index.cshtmlページコードは次のとおりです。
@{layout = null;} <！doctype html> <html> <head> <meta name = "viewport" content = "width =" device-width "/> <title> index </link> <link href ="〜/content/bootstrap/css/boottrap.min.css href = "〜/content/bootstrap-table/bootstrap-table.min.css" rel = "styleSheet"/> <script src = "〜/scripts/jquery-1.9.1.min.js"> </script> <scrits src = "〜/content/boottrap/js src = "〜/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "〜/bootstrap-table/bootstrap-table-zh-cn.js"> </script> <script src = "〜/script/knkkout/knokkout-3.4.0.0.0.0.0.0.0.0.min.j src = "〜/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "〜/scripts/nockout/extensions/knockout.mapping-latest.js"> </scrip src = "〜/scripts/extensions/knockout.bootstraptable.js"> </script> <script type = "text/javascript"> $（function（）{var data = @html.raw（newtonsoft.json.jsonConvert.SerializeObject（Model））; document.getElementById（ "div_index"））;}）; </script> </head> <body> <div id = "div_index" style = "padding：0px; anoverflow-x：hidden;"> <div> <div> query条件</div> <div> <form id = "formsearch"> <div> <div> <div> <> <> <> <> <> <> <> <> <Div> data-bind = "value：querycondition.name"> </div> <label>部門説明</label> <div> <input type = "text" data-bind = "value：querycondition.des"> </div> <div style = "text-align：right;"> <ボタンタイプ= "button" button "button"> clearclick " type = "button" data-bind = "click：queryclick"> query </button> </div> </form> </div> </div> <div> <div> <div = "toolbar"> <button data-bind = "click：addclick" type = "button"> <span aria-hidden = "true"> </span> </button < aria-hidden = "true"> </span> modify </button> <button data-bind = "click：deleteclick" type = "button"> <span aria-hidden = "true"> </button> delete </button> </div> <table data-bind = "bootstraptable：bootstraptable"> <th datackbox = "> <th"> <th dateckbox = <tr名前</th> <th data-field = "level">部門レベル</th> <th data-field = "des">説明</th> <th data-field = "strecreatetime">作成時間</th> </tr> </tead> </table> </div> </body> </html>コードの疑い：前の記事と同様に、jQuery、bootstrap、bootstraptable、ノックアウト、その他の関連ファイルを引用する必要があります。次の2つのドキュメントは次のとおりです。
•knockout.index.js：クエリページに関連するプロパティとイベントバインディングをカプセル化します。
•knockout.bootstraptable.js：ブートストラップ可能な初期化をカプセル化し、ノックアウトバインディング方法をカスタマイズします。
上記のすべてのページのインタラクションは一般のJSにカプセル化されているため、ページに割り当て、イベントバインディングなどを取得するために、DOM要素などの多数の複製コードを記述する必要はありません。このページに書かれたJSの上記の2つの文はあります。とても簡単ではありませんか？
3。JSカプセル化
上記の2つのJSファイル、knockout.bootstable.jsとknockout.index.jsを見てみましょう。
（1）knockout.bootstraptable.js
（function（$）{// bootstraptableviewmodelメソッドをko.bootstraptableviewmodel = function（options）{var this = this; this.default = {#toolbar '、//ツールボタンのコンテナqueryparams：function（param）{limit：limit、param.mimit、param.mimit、paramパラメーター（*）ページネーション：true、//ページネーションディスプレイ（*）サイドページネーション： "サーバー"、//ページネーション方法：クライアントクライアントページネーション、サーバーページネーション（*）パジネンバー：1、//最初のページをロードするために最初のページを初期化します。選択された方法：「GET」、TRUE、//この検索はクライアント検索であり、したがって、StrictSearch：true、//すべての列がcache：false、showrefresh：true、// //選択して選択した行を有効にしますshowtoggle：true、}; this.params = $ .extend（{}、this.default、options || {}）; //選択したレコードthis.getSelections = function {that.bootstraptable（ "refresh"）;};}; // koカスタムバインディングko.bindinghandlers.bootstraptable = {init：function（element、valueaccessor、allbindingsacsess、viewmodel）{//オパラムはここに縛られたviewmodelvar oviecesser $（element）.bootstraptable（oviewmodel.params）; // viewmodel oviewmodel.bootstraptable = function（）{return $ ele.bootstraptable.apply（$ ele、arguments）;}}}、viewmodel oviewmodel.bootstraptableにブートストラップ可能な方法を追加する{}};}）（jquery）;コード疑問：上記のコードは主に2つのことを行います
1。ブートストラップ可能なカスタマイズされたViewModel。
2。
KOカスタムバインディングを追加します。
公園の友人がカスタムバインディングの使用を理解していない場合は、詳細な紹介のためにブロガーの最初の2つのブログ投稿（1つ）と（2つ）をチェックしてください。
（2）knockout.index.js
（function（$）{ko.bindingviewmodel = function（data、bindelement）{var self = this; this.querycondition = ko.mapping.fromjs（data.querycondition）; thise.defaultquerparams = {queryparams：curyparams：function（function（ param.offset; return params;}}; var tableparams = $ .extend（{}、this.defaultqueryparams、data.tableparams || {}）; this.bootstraptableviewmodel（tableparams）; bootstraptableviewmodel（tableparams）; value）{// clear if（typeof）== "function"）{this（ ''）; id = "mymodal" tabindex = "-1" role = "ダイアログ" aria-labelledby = "mymodallabel"> </div> '）; dialog.load（data.urls.edit、null、function（）{}）; $（ "body"）。ポップアップボックス（これには、バインディングのクリアと登録イベントのクリアが含まれます） （ArrrectedData.Length <= 0 || arrrectedData.length> 1）{alert（ "1ラインのみ"） ArrrectedData [0]、function（）{}）; $（ "body"）。append（dialog）; dialog.modal（）。on（ 'hidden.bs.modal'、function（）{//ポップアップボックスを閉じるときにバインディングをクリアします（これにはバインディングのクリアと登録のクリアが含まれますevent）ko.cleannode（document.getElementbyId（ "formedit"））; dialog.remove（）; self.bootstraptable.refresh（）;} （！arrrecedData || arrrectedData.length <= 0）{alert（ "少なくとも1つの行を選択してください"）; return;} $。ajax（{url：data.urls.delete、type： "post"、contenttype： 'application/json'、data：json.stringify（arrrectiondata）、suctune（datas） {alert（status）; self.bootstraptable.refresh（）;}}）;}; ko.applybindings（self、bindelement）;};}）（jquery）;コードの疑い：このJSは、主にページ要素の属性とイベントバインディング、および説明する必要があるいくつかの場所をカプセル化します
•this.queryCondition = ko.mapping.fromjs（data.QueryCondition）：この文の目的は、JSONデータから監視属性に背景から渡されたクエリ条件を変換することです。この文を実行することによってのみ、属性とページ要素を両方向に監視できます。
•self.bootstraptable.refresh（）：この文の意味は、テーブルデータを更新することです。実際には、呼び出されるのはBootstraptableの更新方法ですが、Bloggerは単純にknockout.bootstraptable.jsファイルにカプセル化します。
•dialog.load（data.urls.edit、null、function（）{}）：追加および編集するとき、jqueryのload（）メソッドが使用されます。このメソッドの機能は、このURLのページ要素を要求し、URLの対応するページのJSコードを実行することです。この方法は、JSファイルを動的に言及し、JSファイル内のコードを実行するのに非常に強力です。
最後に、バックグラウンドgetDepartment（）メソッドに対応するコードを添付します
[httpget] public jsonresult getDepartment（int lime、int offset、string name、string des）{var lstres = demporimentmodel.getdata（）; if（！string.isnullorempt（name））{lstres = lstres.where（x => x.name.contans（name））。 （！string.isnullorempty（des））{lstres = lstres.where（x => x.des.contains（des））。tolist（）;} lstres.foreach（x => {x.streatetime = x.createtime.toString（ "yyymdd hh：mm：mm：fres}; lstres.skip（offset）.take（lime）.tolist（）、total = lstres.count}; return json（ores、jsonrequestbehavior.allowget）;}この時点で、クエリページのクエリとクリア機能を実現できます。
まだ質問がありますか：Bootstraptableのイベントをカスタマイズする必要がある場合はどうなりますか？バックグラウンドでViewModelを介して送信することはできませんよね？
実際、JSイベントメソッドをバックグラウンドから渡すことはできないため、フロントエンドでイベントの処理方法をカスタマイズする必要があります。たとえば、これを行うことができます。
<script type = "text/javascript"> $（function（）{var data = @html.raw（newtonsoft.jsonconvert.serializeObject（model））; data.tableparams.onloadsuccess = function {alert（ "loadsuccess event"）; document.getElementById（ "div_index"）;}）; </script>2。2番目のViewModel編集を取得します
上記のViewModelの1つはクエリと削除機能を処理しますが、追加と編集には別のViewModelのサポートも必要です。編集のパッケージ実装を見てみましょう。
1。ActionResultの実装
上記のコードクエリを介して、ユーザーが[追加]と編集をクリックすると、別のビュービューが要求される→/部門/編集が要求されることがわかります。編集ビューの実装を見てみましょう
public ActionResult edit（部門モデル）{var oresmodel = new {editmodel = model、urls = new {submit = model.id == 0？ "/department/add"： "/department/update"}}; return view（oresmodel）;}コードの疑い：上記のコードは非常に簡単です。これは、編集されたエンティティと提出されたURLを含むビューモデルを表示ページに返すことです。このエンティティの主キーが存在するかどうかは、現在のコミットが新しいエンティティであるか編集エンティティであるかによって決定されます。
2。CSHTMLコード
edit.cshtmlコードは次のとおりです。
<form id="formEdit"><div role="document"><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 id="myModalLabel">Operation</h4></div><div><div><label for="txt_departmentname">Department name </label> <入力タイプ= "text" name = "txt_departmentname" data-bind = "value：editmodel.name" placeholder = "department"> </div> <div> <ラベルfor = "txt_departmentlevel">部門レベル</label> <input Type = "txt_departmentmentlementlevel" "data-bind" PlaceHolder = "Demidy Level"> </div> <div> <label for = "txt_des">説明</label> <入力タイプ= "text" name = "txt_des" data-bind = "value：editmodel.des" placeholder = "destripive"> </div> <div> <button type = "button aria-hidden = "true"> </span> close </button> <button type = "submit"> <span aria-hidden = "true"> </span> save </button> </div> </div> </form> <link href = "〜/content/bootstrapvalidator/css/boottrapvalidator.css src = "〜/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "〜/scripts/extensions/knockout.edit.js"> </script> <script = "text/javascript"> $（function（）{var ediTdata = @html.raw（newtonsoft.json.jsonconvert.serializeObject（model））; ko.bindingeditviewmodel（editdata、{}）; </script>コードの疑い：検証コンポーネントBootStrapValidatorを追加したため、関連するJSおよびCSSを参照する必要があります。このファイルknockout.edit.jsは、主に編集ページのプロパティとイベントバインディングをカプセル化します。このJSの実装コードを見てみましょう。
3。JSカプセル化
knockout.edit.jsコード：
（function（$）{ko.bindingiteditviewmodel = function（data、validatorfields）{var that = {}; thit.editmodel = ko.mapping.fromjs（data.editmodel）; that.default = {メッセージ： '検証が失敗しました'、{{}、{varyator：fallyator：bidmithler：（valifator） ArrrectedData = ko.tojs（that.editmodel）; $。ajax（{url：data.urls.submit、type： "post"、contentType： 'application/json'、data：json.stringify（arrrecteddata）、success：成功：機能（データ、ステータス） {alert（status）;}}）; $（ "＃mymodal"）。modal（ "hide"）;}}; document.getElementById（ "formedit"）;};}）（jquery）;コードの疑い：このJSは、主に編集モデルと提出されたイベントバインディングのプロパティをカプセル化します。 Bootstrapvalidator検証コンポーネントが使用されるため、フォームの提出が必要です。実際、上記の「Formedit」や「Mymodal」など、Page IDは公開JSに表示されないでください。これは、最適化する必要があるパラメーターとして渡すことができます。パラメーターバリターフィールドは、検証コンポーネントの検証フィールドを表します。フォームが確認を必要としない場合、空のJSONに合格するかどうかは問題ありません。上記の記事ではフィールド検証を行いませんでした。実際、一般的に言えば、基本的なテーブルには、部門名の空白の検証など、1つまたは複数の非空白のフィールドがあります。 edit.cshtmlページのコードはこれに変更されます。
<form id="formEdit"><div role="document"><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 id="myModalLabel">Operation</h4></div><div><label for="txt_departmentname">Department名前</label> <入力タイプ= "text" name = "name" data-bind = "value：editmodel.name" placeholder = "department name"> </div> <div> <label for = "txt_departmentlevel"> departmentLevel </label> <inputタイプ= "テキスト" name = "レベル"データバインド= " PlaceHolder = "DecimentLevel"> </div> <div> <label for = "txt_des">説明</label> <入力タイプ= "Text" name = "des" data-bind = "value：editmodel.des" placeholder = "des"> </div> <div> <button type = "button" data-hididn = " type = "submit"> <span aria-hidden = "true"> </span> save </button> </div> </div> </form> <link href = "〜/content/content/bootstrapvalidator/css/bootstrapvalidator.css" rel = "styleSheet"/> <スクリプトsrc = "〜/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "〜/scripts/extensions/knockout.edit.js"> </script> <script = "text/javascript"> $（function（）{var ediTdata = @html.raw（newtonsoft.json.jsonconvert.serializeObject（model））; ko.bindingeditviewmodel（editdata、{name：{notempty：{message：「名前は空になりません！ '}}}}）; </scrip>;その後、送信時に自動的に検証されます。
注：検証属性名は入力タグの名前属性に対応するため、検証を行うには、この名前属性を正しく設定する必要があります。
次のように追加、削除、変更するための背景方法を添付することが最善です。
[httppost] public jsonresult add（部門odata）{departmentmodel.add（odata）; return json（new {}、jsonrequestbehavior.allowget）;} [httppost] public jsonresult update（department odata）{departmentmodel.update（odata）; jsonrequestbehavior.allowget）;} [httppost] public jsonresult delete（list <perration> odata）{departmentmodel.delete（odata）; return json（new {}、jsonrequestbehavior.allowget）;}この時点で、ページ全体を追加、削除、変更、チェックする効果は問題ありません。効果を簡単に見てみましょう。
3。概要
上記は、単なるプライマリパッケージであるBootstraptable+KOの追加、削除、変更、および検索サービスを単純にカプセル化します。これらをプロジェクトに適用する必要がある場合は、次のような簡単な最適化測定が必要になる場合があります。
1.それが単にページのビューモデルである場合、バックグラウンドのActionResultから返すことなく、それをビューページに直接書き込む方が良いかもしれません。これを最適化する必要があります。
2。ページ要素のIDは、公開JSに表示されないでください。ページ要素は、パラメーターを介して渡すことができます。
3.イベントメソッドを追加および編集して、ポップアップボックスに多くの重複コードを使用します。このパートを行う最良の方法は、ポップアップボックスを別のコンポーネントにカプセル化して呼び出すことです。これにより、JSコードのほとんどを削減できます。
4.クエリ条件と編集されたプロパティに選択されたドロップダウンボックス要素がある場合は、DataSourceおよびドロップダウンボックスのその他の属性をカプセル化する必要がある場合があります。この部分は非常に一般的です。ブロガーがデモを整理したら、この作品を追加します。
上記は、追加、削除、変更、および検索を実現するために編集者が導入したブートストラップ可能な +ノックアウトJの解決策です（3）2つのビューモデルが追加、削除、変更、および検索を完了しました。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！