序文：ブートストラップ可能なコンポーネントを以前に導入したとき、そのインライン編集機能について言及しましたが、関数を表示する目的で、これを引き継いで罪だと言いました！最近、私はまだプロジェクトでインライン編集を使用する予定なので、Xeditableコンポーネントを再度勉強しました。私はいくつかの落とし穴に遭遇したので、ここでピットを録音しましょう！ Bootstraptableについて知りたい友人は、JSコンポーネントシリーズ - テーブルコンポーネントアーティファクト：ブートストラップテーブルに移動できます。
1。X編集可能なコンポーネントの紹介
X-Editableコンポーネントは、編集可能なポップアップボックスを作成するためのプラグインです。ブートストラップ、jQuery UI、jQueryの3つのスタイルをサポートしています。一般的な効果は次のとおりです。
ブロガーの通常のスタイルによると、最初のスタイルはここで選択する必要があります。まず、オープンソースアドレスを指定します。
X-Editableオープンソースアドレス：https：//github.com/vitalets/x-edable
X-Editableドキュメントアドレス：http：//vitalets.github.io/x-editable/docs.html
X-Editableオンラインデモ：http：//vitalets.github.io/x-editable/demo-bs3.html
1。X-Editableの最初の経験
最初に、ブートストラップに基づいてソースコードをローカルエリアにダウンロードします。関連ファイルへの参照。
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap3-editable/css/bootstrap-editable.cs" rel = "styleSheet"/> <スクリプトsrc = "/scripts/jquery-1.9.1.min.js"> </scrip> <scrip src = "/content/bootstrap/js/bootstrap.min.js"> </script> <scrip> <scrc = "〜/content/content/bootstrap3-editable/js/boottrap-editable.js"> </script>
ページ要素
コードを次のようにコピーします。
JS初期化
$（function（）{$（ '＃username'）。editable（）;}）;エフェクトディスプレイ
上記は、HTMLデータ属性を介してX編集可能なパラメーターを設定することです。もちろん、初期化中にパラメーターを設定することもできます。たとえば、空のタグを与えます：<a href = "＃" id = "username"> username </a>
JS初期化
$（function（）{$（ '＃username'）。editable（{type： "text"、//サポートテキスト|テキスト| select | select | select | checklistおよびその他のタイトル：「ユーザー名」、//編集ボックスのタイトルは無効になりました：false、// doess edit emptextext： "emphed" "ポップアップモード、デフォルトはポップアップ検証（値）{// $。トリム（value）{return 'can be veed'}）;効果を表示します
少し複雑なものを持ってみましょう
<a href = "＃" id = "department"> select department </a>
$（function（）{$（ '＃department'）。editable（{type： "select"、//編集ボックスのタイプ| textarea | select | select | date | checklist and checklist and otter sources：[{value：1、 "development department"}、{value：2、text： "Sales Department"}、タイトル：「部門の選択」、//編集ボックスのタイトルは無効になっています：//空のテキストの編集：//空の値のデフォルトのテキストモード：//編集ボックス：ポップアップとインラインモードをサポートします。 }）;効果を表示します
上記の記事では、一般的に使用されるフィールドのみを示しています。もちろん、X編集可能なコンポーネントには、他の多くの機能パラメーターがあります。興味がある場合は、ドキュメントを確認できます。公式ドキュメントには、各パラメーターの詳細な説明があります。
2。インラインを編集するためのブートストラップ可能な初期計画
長い間話した後、上記は単なる前奏曲です。最終的には、Bootstraptableでインライン編集を実装することを望んでいます。上記のルールによると、X-Editableを使用してインライン編集を実装する場合は、テーブルのセルにAタグがある必要があり、Aタグが初期化されます。このアイデアを使用して、最初にこの方法を試してみましょう。
関連するファイルを引用します
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "styleSheet"/> <link href = "/content/content/content/content/boottrap-table" rel = "styleSheet"/> <script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/js/bootstrap.min.js"> </script> <script src = "〜/content/boottrap3-editable/js/js/js/uttrap- src = "〜/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-cn.js"> </script>
Bootstraptableの関連初期化
<script type = "text/javascript"> var currow = {}; $（function（）（ "＃tb_user"）。bootstraptable（{toolbar "、" #toolbar "、idfield：" id "、pagination：true、showrefresh：true、clicktoselect：true、queryparams：function（param）{return {}; {field： "username"、title： "username"、formatter：function（value、row、index）{return "<a href =/" name =/"username/" data-type =/"text/" data-pk =/" + row.id +"/"data-title =/" username/" +" "age"、}、{field： "Birthday"、title： "Birthday"、formatter：function（value、row、index）{var date（ 'new' + eval（value）.Source）return.format（ "yyyyy mm month ddd day"）}}、{deptname "; onclickrow：function（row、$ element）{currow = row;} function（aa、bb、cc）{"＃tb_user a"）。 「編集可能/編集」：「JSON」：function（data、jqxhr）、エラー：{areart（ "）;バックエンドメソッド
バックグラウンドテスト方法
public jsonresult getusers（）{var lstres = new list <user>（）; lstres.add（new user（）{id = "1"、username = "zhang san"、age = 22、誕生日= convert.todatetime（ "1994-12-21"）、deptid = "1"、deptname = "r＆d divertion"}）; lstres.add（new user（）{id = "2"、username = "li si"、age = 28、batiration = convert.todatetime（ "1988-09-09"）、deptid = "2"、deptname = "sales department"}）; lstres.add（new user（）{id = "3"、username = "wrestle coat uncle"、age = 40、birthd = convert.todatetime（ "1976-09-01"）、deptid = "2"、deptname = "sales department"}）; lstres.add（new user（）{id = "4"、username = "lightning prawn"、age = 37、birthday = convert.todatetime（ "1979-03-12"）、deptid = "4"、deptname = "Creative Department"}）; lstres.add（new user（）{id = "5"、username = "han meimei"、age = 29、birthd = convert.todatetime（ "1987-05-01"）、deptid = "5"、deptname = "Business Department"}）; return json（lstres、jsonrequestbehavior.allowget）; } public jsonResult edit（user user）{//脱serialization json（new {}、jsonrequestbehavior.allowget）の後に返品を更新します。 }これは実際に望ましい効果を達成することができ、行内で編集することもできますが、行内で編集を必要とする列がなく、列が多数ある場合、各列が同じ方法でフォーマットするのにかかりますか？そして、この種の執筆は明らかに厳格であり、ブロガーが受け入れるのは本当に難しいです。そこで、私は例を探して、JS Bootstrap-Table-Editable.jsがBootstraptableの拡張に存在することを発見しました。
3。ブートストラップ可能な編集最終計画
ブロガーは、これが問題を解決するための一般的なアイデアであると考えているため、上記がまだ前奏曲であることを認めているので、これらのプレリュードの長さは少し大きすぎるかもしれません。まず、bootstrap-table-editable.jsファイルを見てみましょう。
/** * @author zhixin wen <[email protected]> *拡張機能：https：//github.com/vitalets/x-editable */！function（$）{'sustict'; $ .extend（$。fn.bootstraptable.defaults、{editable：true、oneditableInit：function（）{return false;}、oneditablesave：function（field、row、oldvalue、$ el）{return false;}、oneditableshown：oneditablesown：function（field、el、edailthulity）{return fals; false;}）; $ .Extend（$ var bootstraptable = $ .fn.bootstraptable.constructor、_inittable = bootstraptable.prototype.inittable、_initbody = bootstraptable.prototype.initbody; bootstraptable.prototype.inittable = function（）{var that = this; _inittable.apply（this、array.prototype.slice.apply（arguments））; if（！this.options.edable）{return; } $ .each（this.columns、function（i、column）{if（！column.editable）{return;} var _formatter.formatter; column.formatter = function（value、row、index）{var result = _formatter？ '"'、 'data-pk ="' + row [that.options.idfield] + '"' '、' data-value =" ' + result +' "'、'> '</a>'] .jein（ ''）;};}）; }; bootstraptable.prototype.initbody = function（）{var that = this; _initbody.apply（this、array.prototype.slice.apply（arguments））; if（！this.options.edable）{return; } $ .each（this.columns、function（i、column）{if（！column.editable）{return;} that。$ body.find（ 'a [data-name = "' + column.field + '"]'）。 $（ 'tr [data-index]'）、row = data = row [column.field]; '"]）。editable（column.editable）.off（' happed '）。 $ body.find（ 'a [data-name = "' + column.field.field + '"]'） column.field、$（this）、理由）; this.trigger（ 'editable-init'）; };}（jquery）;
このJSは、実際にX編集可能なシンプルなカプセル化を行い、列の編集可能な属性を追加し、いくつかのイベントを編集および保存します。これを基礎として、業界で編集したコードはこのようになりました。
参照する必要があるファイルは次のとおりです。
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/> <link href = "〜/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "styleSheet"/> <link href = "/content/content/content/content/boottrap-table" rel = "styleSheet"/> <script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/js/bootstrap.min.js"> </script> <script src = "〜/content/boottrap3-editable/js/js/js/uttrap- src = "〜/content/bootstrap-table/bootstrap-table.js"> </scrip> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <script src = "/content/boottrap-table/ src = "〜/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"> </script>
1。テキストボックス
$（function（）（ "＃tb_user"）。bootstraptable（{toolbar "、" #toolbar "、idfield：" id "、pagination：true、showrefresh：true、clicktoselect：true、queryparams：function（param）{return {}; {field： "username"、title： "username"、editable：{type： 'text'、title： 'username'、vartate（v）{if（！v）return 'username nable ve veem}}} eval（ 'new' + eval（value）.source）return date.format（ "yyyy-mm-dd"）、{field： "deptname"、{field： "hobby"、 "hobby"}]、oneditables：oneditable：oneditable（field、low、$ el：aijax（$ el：aijax） 「/編集/編集」、row、dataType： 'json'、function（data、status）{alert（ 'succunt of data'）背景の対応する更新方法
public jsonresult edit（user user）{//エンティティを更新するjson（new {}、jsonrequestbehavior.allowget）; }テスト後、ユーザー名列を自由に編集できます。同様に、年齢列をこれに変更することもできます
{field： "age"、title： "age"、editable：{type： 'text'、title： 'age'、validate：function（v）{if（isnan（v））return 'age boo be it' must '。 var age = parseint（v）; if（age <= 0）return 'ageは正の整数でなければなりません」; }}}残りには変更は必要ありません。
コード説明：編集可能なパラメーターは、上記の初期列属性で構成されています。ここで各列の編集可能な属性に対応するJSONオブジェクトは、X-Edableの初期化されたJSONオブジェクトであることに注意してください。つまり、x-edableを初期化するときにどの属性を構成できるか、同じものを列の編集可能な属性で構成できるため、使用する方がはるかに楽しくなります。編集された提出方法は、均一に処理するためにoneDiTablesaveイベントに均一に配置されます。
2。時間選択ボックス
上記の知識を基礎として、誕生日の列を初期化しましょう。
{field： "Birthday"、title： "Birthday"、formatter：function（value、row、index）{var date = eval（ 'new' + eval（value）.source）return date.format（ "yyyy-mm-dd"）; }、編集可能：{type： 'date'、title： 'batirnd'}}}効果を得るために他の場所で変更は必要ありません。
これは、X-Edableのデフォルトスタイルです。あなたが幸せを感じないなら、あなたはそれを自分で構成することができます。 X-Edableは、次のように、日付ボックスを構成するための多くのパラメーターを提供します。
もちろん、時間が正確である場合は、時間、数分、秒で、DateTimeタイプの編集ボックスを使用できます。以下は、公式の時間枠の編集効果であり、かなり見栄えが良いです。
3。ボックスを引き下げます
フォーム編集には別の重要なタグがあります。これは選択です。上記のように、X-Edableはドロップダウンボックス編集モードを提供することを知っています。たとえば、私たちの部門のこのコラムの編集は次のように書くことができます。
{field： "deptid"、title： "department"、editable：{type： 'select'、title： 'department'、source：[{value： "1"、text： "r＆d deartion"}、{value： "2"、 "sales department"}、{value： "3"、text： "行政部門"}}}}}効果を得てください
もちろん、多くの場合、ドロップダウンボックスのオプションがデータベースからリモートで取得されるため、地元でデータソースを設定するこの方法は私たちのニーズを満たすことができません。もちろん、X-Edableも私たちにとって考慮されています。たとえば、これを書くことができます。
{field： "deptid"、title： "department"、editable：{type： 'select'、title： 'department'、source：function（）{var result = []; $ .ajax（{url： '/editable/getDepartments'、async：false、type： "get"、data：{}、success：function（data、status）{$ .each（data、function（key、value）{{value：value.id、text：value.name}）;}）;}}）;返品結果; }}}}バックグラウンドでメソッドを構成します
public jsonresult getDepartments（）{var lstres = new list <shepertion>（）; lstres.add（new Department（）{id = "1"、name = "R＆D Department"}）; lstres.add（new Department（）{id = "2"、name = "Sales Department"}）; lstres.add（new Department（）{id = "3"、name = "管理部門"}）; lstres.add（new Department（）{id = "4"、name = "Creative Department"}）; lstres.add（new Department（）{id = "5"、name = "Business Unit"}）; return json（lstres、jsonrequestbehavior.allowget）; }また、私たちが望む結果を達成することができます。
コード質問：説明する必要があることが1つあります。慎重な庭師は、私たちのフィールドがここで「deptid」であることを発見したかもしれません。データソースの値値に対応する必要があるため、非常に簡単です。
4。チェックボックス
上記の一般的な編集ボックスに加えて、X-Edableはチェックボックスグループの編集も提供します。例えば：
{field： "hobby"、title： "host"、editable：{type： "checklist"、separator： ""、 "、"、source：[{value： 'bsb'、 'basketball'}、{value： 'ftb'、{value： 'ftb'、 'football'}、{value： 'wsm'、 'whiため効果を得る：
もちろん、リモートデータがある場合は、上記と同様の方法を使用して取得することもできます。
5.「ゴーストはフェードしない」select2
上記のチェックボックスについて言えば、ブロガーはMultiSelectのようなことを考えずにはいられなかったため、X-Editableドキュメントを検索し、MultiSelectをサポートしていないが、Select2をサポートしていることを発見しました。これが良いニュースかどうかはわかりません。ブロガー自身の使用経験とテクニカルコミュニケーショングループでのチャットエクスペリエンスに基づいて、多くの人がSelect2を使用するときにさまざまなスタイルの問題に遭遇していることがわかりました。
X-EditableはSelect2をサポートしているため、試してみましょう。とにかく、公式のデモはかなり良いです。公式デモを使用する例は次のとおりです。
緊張した気分で、ブロガーは自分でそれを試しました。
参照select2ファイル
<link href = "〜/content/select2-bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/select2-master/dist/css/select2.min.css" rel = "styleSheet"/> <スクリプトsrc = "〜/content/select2.dist2.ful.min.
コードを試してください
{フィールド：「趣味」、タイトル：「趣味」、編集：{type： 'select2'、title： 'bobby'、name： 'bobby'、fackement： 'top'、success：function（respons、newvalue）{debugger; }、エラー：function（response、newValue）{debugger; }、url：function（params）{debugger; }、source：[{id： 'bsb'、text： 'basketball'}、{id： 'ftb'、text： 'football：' football '}、{id：' wsm '、text：' swirm '}]、inputclass：' input-large '、select2：{aowclear：true、multer、}}}}}結果を取得します：
選択されたselect2の選択された値を正常に背景に渡すことはできないことがわかります。とにかく、ブロガーはさまざまなパラメーターを試し、公式のデモによると、それらはすべて失敗に終わりました。公式デモがどのように成功したかはわかりません。この質問は最初に捨てられます。それを使用する庭師がいる場合は、修正して答えてください。ブロガーが将来この問題を解決した場合、ここでも更新されます。
4。概要
別の問題は、編集と提出が完了した後、ブロガーがプロジェクトで問題に遭遇したことです。送信後にテキストコンテンツが多すぎると、テーブルの頭の幅とTBODYのTDの幅は正しくありません。しかし、デモを書くとき、私はこの問題に遭遇しませんでした。これが解決策です。
1つの文でトラブルを解決してください！
この記事では、インライン編集を実装するためにX-Edableと組み合わせたブートストラップ可能なブートストラップ可能な使用を紹介します。記事の質問の多くは、ブロガーの使用経験に基づいて説明されています。使用する場合は、試すこともできます。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するすべてです。 JSテーブルコンポーネントアーティファクトブートストラップテーブルをよりよく学ぶのに役立つことを願っています。