في المقالة السابقة ، ملخص الخبرة لإطار التطوير القائم على معالجة ترقيم قائمة Bootstrap Metronic [II] واستخدام المكونات الإضافية JStree ، تم تقديم معالجة ترقيم البيانات ، وتم استخدام المكون الإضافي للـ Bootstrap Paginator ، وتم استخدام قائمة الأشجار ، وتم استخدام المكون الإضافي Jstree. تستمر هذه المقالة في تقديم Control Select2 شائع الاستخدام في صفحة التحرير. يمكن أن يثري عنصر التحكم هذا تحكم القائمة المنسدلة التقليدية ، مما يوفر المزيد من الوظائف وتجربة مستخدم أفضل.
1. مقدمة إلى Select2 Control
هذا المكون الإضافي هو مكون إضافي تمديد استنادًا إلى Select ، والذي يمكن أن يوفر وظائف أكثر ثراءً وتجربة المستخدم. عنوان موقع GitHub الرسمي هو: https://select2.github.io/. لحالات الاستخدام المحددة ، يرجى الرجوع إلى العنوان: https://select2.github.io/examples.html.
في الإطار بأكمله ، استخدمنا العديد من عناصر التحكم Select2 للتعامل مع عرض المحتوى ، بما في ذلك قائمة منسدلة واحدة (بما في ذلك مربع اختيار متتالي) ، وقائمة منسدلة محددة ، وقائمة منسدلة الأشجار ، وما إلى ذلك.
1) تأثير واجهة متتالية للمقاطعات والمدن والمناطق الإدارية تحت واجهة التحرير . إذا اخترت مقاطعة ، فسيتم تحميل المدينة تحت المقاطعة المقابلة. إذا اخترت مدينة ، فستستمر المناطق الإدارية تحت المدينة في التحميل ، وبالتالي تحقيق تأثير القائمة المنسدلة للارتباط متعدد المستويات.
2) القائمة المنسدلة تحديد متعددة ضمن واجهة التحرير
ولكن عندما نختار المحتوى ، سيعرض النظام تلقائيًا بيانات القائمة دون تحديد ، وهو أمر بديهي وودود للغاية ، كما هو موضح أدناه.
3) القائمة المنسدلة لقائمة الأشجار
في بعض الأحيان ، قد يكون لبعض بياناتنا علاقات هرمية ، مثل المنظمة ، وقائمة المستوى العلوي ، إلخ.
2. تحليل رمز الاستخدام الفعلي للتحكم في Select2
1) رمز الواجهة الأساسي والتشغيل
استخدم عنصر التحكم Select2 ، عادةً على التحكم في تحديد العادية ، فقط قم بتعيينه (اضبط فئته على SELECT2).
<viv> <viv> <label> المستوى الهام </label> <viv> <select id = "missiseance" name = "missuesance" placeholder = "perfectance ..."> </select> </viv> </viv> </viv> <viv> <viv> <blabel> التعرف </label> <div>
إذا كانت قائمة ثابتة ، فسيتم تعيين محتوى الخيار الخاص به فقط ، كما هو موضح أدناه.
<viv> <viv> <blabe> Smoking </billy> <viv> <SELECT ID = "Smoking" name = "Smoking" type = "text" extred = "smoking ..."
رمز تهيئة التحكم SELECT2 SELECT2 كما يلي.
$ (document) .Ready (function () {$ (".بشكل عام ، إذا تم السماح بتحديد عناصر متعددة ، فقم بتعيين MOUNDAY = "متعدد" كما هو موضح في الكود التالي.
<SELECT ID = "REPRESEDEMAND" name = "dreenceDeMand" MONITION = "MONITION"> </rection>
2) عملية ربط البيانات غير المتزامنة
بشكل عام ، يتم تحميل بيانات تحكم SELECT الخاص بنا ديناميكيًا من قاعدة البيانات ، بحيث يتم الحصول على البيانات وعادة ما يتم الحصول عليها من خلال AJAX.
بناءً على النظر في قابلية إعادة استخدام الكود ، نكتب وظيفة JS مشتركة لتقليل رمز عمليات الربط وتحسين قابلية إعادة استخدام الكود.
// ربط محتوى القاموس إلى وظيفة Control Control المحددة BINDSELECT (ctrlname ، url) {var control = $ ('#' + ctrlname) ؛ // SET SELECT2's Processing Control.Select2 ({allowclear: true ، formatresult: formatresult ، formateSelection: formateSelection ، EscapeMarkup: function (m) {return m ؛}}) ؛ // ربط محتوى Ajax $ .getjson (url ، الدالة (البيانات) {control.empty () ؛ // مسح المربع المنسدلة $ .each (البيانات ، الدالة (i ، العنصر) {control.append ( }) ؛وبهذه الطريقة ، يمكن تغليف البيانات المرتبطة بوحدة القاموس العام ومعالجتها على النحو التالي.
// ربط محتوى القاموس بوظيفة التحكم المحددة BINDDICTITEM (CTRLNAME ، DICTTYPENAME) {var url = '/dictdata/getDictjson؟ dicttypename =' + encodeuri (dicttypename) ؛ bindselect (ctrlname ، url) ؛}وبهذه الطريقة ، نقوم بتهيئة عنصر تحكم Select2 وربط قيمة القاموس المقابلة أو بيانات أخرى بشكل ديناميكي. يمكن تحقيق ذلك من خلال رمز التهيئة التالي. من بينها ، BINDDICTITEM هي العملية التي تربط محتوى القاموس بشكل مباشر ، وهي العملية هي العملية التي تحصل على البيانات وربطها بناءً على عنوان URL ، و $ ("#Province"). على ("التغيير" ، الدالة (E) {}) ؛ هو تشغيل معالجة الوظائف مثل $ ("#Province"). على ("التغيير" ، الوظيفة (e) {}) ؛ يعالج عملية الربط التي تتعامل مع التغييرات في المحتوى المحدد.
// تهيئة معلومات القاموس (القائمة المنسدلة) الدالة initDictItem () {// المرجعية الثانية التعيين bindDictitem ("المنطقة" ، "قسم السوق") ؛ BindDictitem ("الصناعة" ، "صناعة العملاء") ؛ BindDictitem ("Grade" ، "Level Customer") ؛ BindDictitem ("CustomerType" ، "نوع العميل") ؛ BindDictitem ("المصدر" ، "مصدر العميل") ؛ BindDictitem ("CreditStatus" ، "تصنيف الائتمان") ؛ BindDictitem ("المرحلة" ، "مرحلة العميل") ؛ BindDictitem ("الحالة" ، "حالة العميل") ؛ BindDictitem ("الأهمية" ، "مستوى الأهمية") ؛ // BIND المقاطعة والمدينة والمنطقة الإدارية (معالجة الارتباط) BINDSELECT ("المقاطعة" ، "/المقاطعة/getAllProvincenamedictjson") ؛ $ ("#province"). on ("change" ، function (e) {var provincename = $ ( $ ("#city"). on ("change" ، function (e) {var cityName = $ ("#city"). val () ؛ bindselect ("district" ، "/getDistrictByCityNamedictjson؟ cityName ="+ CityName) ؛}) ؛ }أما بالنسبة للبيانات التي يتم إرجاعها بواسطة وحدة تحكم MVC ، فإننا نعيد قائمة بيانات JSON إلى الصفحة الأمامية ، وتنسيق بياناتها كما يلي.
"
وبهذه الطريقة ، عندما تربط الصفحة الأمامية عنصر تحكم SELECT2 ، يتم استخدام خصائص كائن JSON.
// ربط محتوى Ajax $ .getjson (url ، الدالة (البيانات) {control.empty () ؛ // مسح المربع المنسدلة $ .each (البيانات ، الدالة (i ، العنصر) {control.append (رمز تنفيذ وحدة التحكم على النحو التالي:
/// <summary> /// احصل على بيانات القاموس المقابلة وفقًا لنوع القاموس لتسهيل ربط عناصر التحكم في واجهة المستخدم /// </summary> /// قائمة <ClistItem> () ؛ clistitem pnode = new clistitem ("" ، "") ؛ treelist.insert (0 ، pnode) ؛ القاموس <string ، string> dict = bllfactory <dictdata> .instance.getDictByDictType (dicttypename) ؛ foreach (مفتاح السلسلة في dict.keys) {treelist.add (clistitem new (key ، dict [key])) ؛ } إرجاع tojsoncontent (treelist) ؛ }3) عملية ربط قائمة الأشجار
بالنسبة لقوائم السمات ، مثل البيانات الهرمية للشركات التابعة لها والإدارات والمؤسسات ، فإن عمليات الربط الخاصة بها متشابهة أيضًا ، كما هو موضح في الكود التالي.
// bindselect ("company_id" ، "/user/getMyCompanyDictjson؟ userId ="+@session ["Userid"]) ؛ $ ("#company_id"). on ("change" ، function (e) {var companyid = $ ("#company_id"). val () ؛ bindselect ("dept_id" ، "/user/getDeptDictjson؟ parentId ="+ companyId) ؛}) ؛ $ ("#dept_id"). on ("change" ، function (e) {var deptid = $ ("#dept_id"). val () ؛ bindselect ("pid" ،/user/getUserDictjson؟ deptid = "+ deptid) ؛}) ؛إنها فقط البيانات التي يرجعون إليها ، نستخدمها فقط كمحتوى عرض بادئة.
"
أو كما هو موضح أدناه
[{"Text": "Guangzhou Branch" ، "Value": "3"} ، {"text": "Office General Manager's Office" ، "value": "6"} ، {"text": "النص": "تطوير مجموعة" ، "قيمة": "14"} ، {"text": "تطوير مجموعة 2" ، "القيمة": "15"} ، {"text": "Test Group 2" ، "value": 1 "،" value ":" 23 "} ، {" text ":" Market Department 2 "،" Value ":" 24 "} ، {" text ":" شامل قسم "،" قيمة ":" 11 "} ، {" نص ":" قسم الإنتاج "،" القيمة ":" 12 "،لتلخيص الجزأين أعلاه ، يمكننا أن نرى أن محتوى نصهم هو زيادة المساحات وفقًا للعلاقة الهرمية ، وبالتالي إدراك عرض العلاقة الهرمية.
ومع ذلك ، فيما يتعلق بتأثير الواجهة ، فإن هذه المعالجة ليست جيدة في الواقع مثل عرض شجرة القائمة المنسدلة في Easyui. ربما يمكن استخدام المكون الإضافي الأفضل bootstrap لعرض هذا المحتوى على شكل شجرة.
4) معالجة المهمة من التحكم Select2
الأساليب التي تم تقديمها أعلاه هي كل شيء حول تهيئة البيانات ذات الصلة والربط SELECT2. لذلك إذا ربطنا قيمة واجهة التحرير بعد تهيئة الواجهة ، نحتاج إلى تعيين القيمة إلى عنصر التحكم للسماح لها بعرض العناصر التي تحتاج حقًا إلى عرضها.
طريقة مسح التحكم على النحو التالي.
// قم بمسح قيمة Control2 Control $ ("#pid"). select2 ("val" ، "") ؛ $ ("#company_id"). select2 ("val" ، "") ؛ $ ("#dept_id"). select2 ("val" ، "") ؛إذا كانت هناك حاجة إلى مسح عناصر تحكم متعددة ، فيمكنك استخدام المجموعة لمعالجتها
var select2ctrl = ["AREM" ، "Industry" ، "Grade" ، "CustomerType" ، "Source" ، "CreditStatus" ، "Stage" ، "status" ، "argensance"] ؛ $ .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" ، inf.ispublic) ؛إذا كنت بحاجة إلى عرضه بطريقة متتالية ، فأضف معالجة وظيفة OnChange ، على النحو التالي لمعالجة التعيين لرمز متتالي التالي.
$ ("#Province"). select2 ("val" ، info.province) .Trigger ('Change') ؛ // link $ ( $ ("#company_id1"). select2 ("val" ، info.company_id) .trigger ('Change') ؛ $ ("#dept_id1"). select2 ("val" ، info.dept_id) .trigger ('change') ؛ $ ("#pid1"). select2 ("val" ، info.pid) ؛أخيرًا ، هناك تأثيران متكاملان للمرجع.
ما سبق هو ملخص تجربة إطار تطوير Metronic Bootstrap استنادًا إلى القائمة المنسدلة [الثلاثة] للمحتوى ذي الصلة لاستخدام المكون الإضافي Select2. آمل أن يكون ذلك مفيدًا للجميع. إذا كنت تريد معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com!