前の記事では、ブートストラップメトロニック[II]リストページネーション処理とプラグインJSTREEの使用に基づく開発フレームワークの経験の概要で、データページネーション処理が導入され、ブートストラップページネータープラグインが使用され、ツリーリストが使用され、JStreeプラグインが使用されました。この記事では、編集ページに一般的に使用されるControl Select2を引き続き紹介しています。このコントロールは、従来の選択のドロップダウンリストコントロールを濃縮し、より多くの機能とより良いユーザーエクスペリエンスを提供することができます。
1。select2コントロールの紹介
このプラグインは、選択に基づいた拡張プラグインであり、より豊かな機能とユーザーエクスペリエンスを提供できます。その公式GithubのWebサイトアドレスは次のとおりです。https：//select2.github.io/。特定のユースケースについては、住所を参照してください：https：//select2.github.io/examples.html。
フレームワーク全体では、シングル選択ドロップダウンリスト（カスケード選択ボックスを含む）、選択したドロップダウンリスト、ツリードロップダウンリストなどを含むコンテンツの表示を処理するために、多くのselect2コントロールを使用しました。インターフェイス効果は次のとおりです。
1）編集インターフェイスの下での州、都市、および管理地域のカスケードインターフェイス効果。州を選択すると、対応する州の下の都市が装填されます。都市を選択すると、市内の管理地域は引き続き積み込み、それによりマルチレベル相関のドロップダウンリスト効果が達成されます。
2）編集インターフェイスの下の複数の選択ドロップダウンリスト
ただし、コンテンツを選択すると、システムは選択せずにリストデータを自動的に表示します。これは、以下に示すように非常に直感的でフレンドリーです。
3）ツリーリストのドロップダウンリスト
一部のデータには、組織、上位レベルのリストなど、階層的な関係がある場合があります。
2。select2コントロールの実際の使用法コードの分析
1）基本的なインターフェイスコードと操作
通常、通常の選択コントロールでselect2コントロールを使用して、設定するだけです（クラスをselect2に設定します）。
<div> <div> <ableable>重要レベル</label> <div> <select id = "compation" name = "compation =" placeholder = "compation ..."> </select> </div> </div> </div> <div> div> <ableadition>
これが固定リストの場合、以下に示すように、オプションコンテンツを設定するだけです。
<div> <div> <label>喫煙</label> <div> <select id = "喫煙" name = "smoking" type = "text" placeholder = "smoking ..."> <options
単純なselect2制御初期化コードは次のとおりです。
$（document）.ready（function（）{$（ "。js-example-basic-single"）。select2（）;}）;一般的に言えば、複数のアイテムを選択することが許可されている場合は、次のコードに示すように複数= "倍数"を設定します。
<select id = "ressionedemand" name = "ressuredemand"倍数= "倍数"> </select>
2）非同期データ結合操作
一般的に言えば、Selectコントロールのデータはデータベースから動的にロードされるため、通常、データはAjaxを介して取得され、バインドされます。
コードの再利用性の考慮に基づいて、拘束力のある操作のコードを削減し、コードの再利用性を改善するために、共通のJS関数を書きます。
//指定された[dictionaryコンテンツは、指定された[ctrlname]（ctrlname、url）{var control = $（ '＃' + ctrlname）; // select2の処理control.select2（{low clear：true、formatResult：formatResult、formatselection：formatselection、exapemarkup：function（m）{return m;}}）; // ajax $ .getjsonのコンテンツ（url、function（data）{control.empty（）; //ドロップダウンボックス$ .each（data、item（i、item）{control.append（ "<option value = '" + item.value + "'>" + item.text + "</option>";}）;}）; }）;このようにして、パブリック辞書モジュールに結合したデータは、次のようにさらにカプセル化および処理できます。
//辞書コンテンツを指定された制御関数BindDictitem（ctrlname、dicttypename）{var url = '/dictdata/getDictjson？dicttypename =' + encodeuri（dicttypename）; bindselect（ctrlname、url）;}このようにして、select2コントロールを初期化し、対応する辞書値またはその他のデータを動的に結合します。これは、次の初期化コードを通じて実現できます。その中で、BindDictitemは辞書コンテンツを直接バインドする操作であり、BindSelectはURLに基づいてデータを取得および結合する操作です。 $（ "＃province"）などの関数処理の操作です。選択したコンテンツの変更を処理するリンケージ操作を処理します。
//辞書情報を初期化（ドロップダウンリスト）関数initdictitem（）{// 2番目の割り当て参照binddictitem（ "area"、 "market partition"）; bindDictitem（ "Industry"、 "Customer Industry"）; bindDictitem（ "grade"、 "customer level"）; bindDictitem（ "CustomerType"、 "Customer Type"）; bindDictitem（ "source"、 "customer source"）; bindDictitem（ "CreditStatus"、 "Credit Rating"）; binddictitem（ "stage"、 "customer stage"）; bindDictitem（ "status"、 "customer status"）; bindDictitem（ "cuptition"、 "caltument level"）; //州、都市、および行政地域（リンク処理）BindSelect（ "州"、 "/州/getallprovincenamedictjson"）; $（ "＃stavince"）。on（ "change"、function（e）{var provincename = $（ "＃butions"）。val（ "city"、 "/city/city/getcitysbyprovincenamedictjson？provincename ="+ provincename）;}）; $（ "＃city"）。on（ "change"、function（e）{var cityName = $（ "＃city"）。val（ "district"、 "/district/getdistrictbycitynamedictjson？cityName ="+ cityName）;}）; }MVCコントローラーによって返されるデータについては、JSONデータリストをフロントエンドページに返し、データ形式は次のとおりです。
[{"text"： "" "、" value "：" ""}、{"Text"： "Academic Conference"、 "Value"： "Academic Conference"}、{"Text"： "Friend Introduction"、 "Value"： "Text"： "Advertising Media"、 "Value"： "Advertising Media"}]このようにして、フロントエンドページがSelect2コントロールにバインドすると、JSONオブジェクトのプロパティが使用されます。
// ajax $ .getjsonのコンテンツ（url、function（data）{control.empty（）; //ドロップダウンボックス$ .each（data、item（i、item）{control.append（ "<option value = '" + item.value + "'>" + item.text + "</option>";}）;}）;コントローラーの実装コードは次のとおりです。
/// <summary> /// UIコントロールのバインディングを容易にするために辞書タイプに従って対応する辞書データを取得します/// </summary> /// list <clistitem>（）; clistitem pnode = new Clistitem（ "" "、" "）; treeList.insert（0、pnode）; dictionary <string、string> dict = bllfactory <dictdata> .instance.getDictbyDictType（dictTypename）; foreach（dict.keysの文字列キー）{treeList.add（new clistitem（key、dict [key]））; } tojsoncontent（treeList）を返します。 }3）ツリーリストのバインディング操作
関連会社、部門、機関の階層データなどの属性リストについては、次のコードに示すように、拘束力のある操作も同様です。
// bindSelect（ "company_id"、 "/user/getmycompanydictjson？userid ="+@session ["userid"]）; $（ "＃company_id"） $（ "＃dept_id"）
それは彼らが返すデータだけで、インデントの表示コンテンツとして使用するだけです。
[{"Text"： "iqidi Group"、 "value"： "1"}、{"text"： "guangzhou branch"、 "value"： "3"}、{"text"： "shanghai branch"、 "value"： "4"}、{"text"： "beijing branch"、 "5"}]または以下に示すように
[ { "Text": "Guangzhou Branch", "Value": "3" }, { "Text": "General Manager's Office", "Value": "6" }, { "Text": "Financial Department", "Value": "7" }, { "Text": "Engineering Department", "Value": "8" }, { "Text": "Product R&D Department", "Value": "9" }, { "Text"： "Develop a Group"、 "value"： "14"}、{"Text"： "Group 2"、 "value"： "15"}、{"Text"： "Test Group 2"、 "Value"： "15"}、{"Test Group 2"、 "value"： "16"}、{text "：" "Market"： "" 10 ""： "" text "：" "text"： "" text "：" "text" 1 "、" value "：" 23 "}、{" text "：" Market Department 2 "、" value "：" 24 "}、{" Text "：" comprehing Department "、" value "：" 11 "}、{" Text "：" Production Department "、" Value "}、{12"}、{"Text"： "Human Resource"、 "13"}]上記の2つの部分をまとめるために、彼らのテキストの内容は、階層的な関係に応じて空間を増やし、それによって階層的な関係の表示を実現することであることがわかります。
ただし、インターフェイス効果の観点から、この処理は、EasyUIのドロップダウンリストツリーの表示ほど良くありません。おそらく、より良いブートストラッププラグインを使用して、この木型のコンテンツを表示できるでしょう。
4）select2コントロールの割り当て処理
上記で紹介した方法は、select2コントロールと結合関連データの初期化に関するものです。したがって、インターフェイスを初期化した後に編集インターフェイスの値をバインドする場合、実際に表示する必要があるアイテムを表示するために、コントロールに値を割り当てる必要があります。
コントロールをクリアする方法は次のとおりです。
// select2コントロール$（ "＃pid"）の値をクリアします。SELECT2（ "val"、 ""）; $（ "＃company_id"）。select2（ "val"、 ""）; $（ "＃dept_id"）。select2（ "val"、 ""）;
複数のコントロールをクリアする必要がある場合は、コレクションを使用して処理できます
var select2ctrl = ["area"、 "Industry"、 "grade"、 "customertype"、 "source"、 "creditStatus"、 "stage"、 "status"、 "compation"]; $ .each（select2ctrl、function（i、item）{var ctrl = $（ "＃" + item）; ctrl.select2（ "val"、 ""）;}）;select2コントロールに値を割り当てて、対応する値コンテンツを持つアイテムを表示すると、操作は上記に似ています。
$（ "＃customertype"）。select2（ "val"、info.customertype）; $（ "＃grade"）。select2（ "val"、info.grade）; $（ "＃creditStatus"）。select2（ "val"、info.creditstatus）; $（ "＃重要"）。select2（ "val"、info.ispublic）;
次のように、次のカスケードコードの割り当て処理のように、カスケード方法で表示する必要がある場合は、オンチェンジ関数処理を追加します。
$（ "＃uponce"）。select2（ "val"、info.province）.trigger（ 'change'）; // link $（ "＃city"）。select2（ "val"、info.city）.trigger（ 'change'）; // link $（ "＃district"）。 $（ "＃company_id1"）。select2（ "val"、info.company_id）.trigger（ 'change'）; $（ "＃dept_id1"）。select2（ "val"、info.dept_id）.trigger（ 'change'）; $（ "＃pid1"）。select2（ "val"、info.pid）;
最後に、参照用の2つの統合インターフェイス効果があります。
上記は、select2プラグインの使用の関連するコンテンツの[3]ドロップダウンリストに基づいたブートストラップメトロニック開発フレームワークの経験の要約です。私はそれが誰にでも役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください！