المقدمة: عندما قدمت المكون القابل للتمهيد من قبل ، ذكرت وظيفة التحرير داخل الخط ، ولكن لغرض عرض الوظيفة ، أخذت هذا الأمر وقلت إنها خطيئة! في الآونة الأخيرة ، ما زلت أخطط لاستخدام التحرير في الخط في المشروع ، لذلك درست المكون القابل للتكرار مرة أخرى. لقد واجهت بعض المزالق ، لذلك دعونا نسجل الحفر هنا! يمكن للأصدقاء الذين يرغبون في معرفة BootStraptable الانتقال إلى سلسلة مكون JS - قطعة قطعة مكون الجدول: جدول bootstrap.
1.
يعد المكون القابل للتطبيق X مكونًا إضافيًا لإنشاء صناديق منبثقة قابلة للتحرير. وهو يدعم ثلاثة أنماط: Bootstrap و JQuery UI و JQuery. التأثير العام على النحو التالي:
وفقًا للنمط المعتاد للمدون ، يجب اختيار أول واحد هنا. أولاً ، أعط عنوان المصدر المفتوح.
عنوان المصدر المفتوح X-Editable: https://github.com/vitalets/x-edable
عنوان المستند X-Editable: http://vitalets.github.io/x-editable/docs.html
X-Editable Online Demo: http://vitalets.github.io/x-editable/demo-bs3.html
1. التجربة الأولى لـ X-DEDITAL
قم أولاً بتنزيل رمز المصدر بناءً على bootstrap إلى المنطقة المحلية. إشارات إلى الملفات ذات الصلة.
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "STYLESHEET"/> <link href = "~/content/bootstrap3-reable/css/bootstrap-edable.css src = "/scripts/jquery -1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-eferable/js/bootstrap-read.js
عناصر الصفحة
انسخ الرمز كما يلي: <a href = "#" id = "username" type = "text" data-title = "username"> اسم المستخدم </a>
تهيئة JS
$ (function () {$ ('#username'). editable () ؛}) ؛عرض تأثير
ما ورد أعلاه هو تعيين المعلمات X-EDILITAL من خلال سمة بيانات HTML. بالطبع ، يمكنني أيضًا تعيين المعلمات أثناء التهيئة. على سبيل المثال ، أنا فقط أعطي علامة فارغة: <a href = "#" id = "username"> اسم المستخدم </a>
تهيئة JS
$ (function () {$ ('#username'). قابلة للتحرير ({type: "text" ، // نوع مربع التحرير. نص الدعم | textarea | حدد | Date | قائمة مرجعية وعناوين أخرى: "اسم المستخدم" ، // تم تعطيل عنوان Box the ediit: المنبثقة والوضع الافتراضي هو popup التحقق من صحة: الدالة (القيمة) {// حقل التحقق إذا (! $.عرض التأثير
دعنا نكون أكثر تعقيدًا قليلاً
<a href = "#" id = "department"> حدد قسم </a>
$ (function () {$ ('#department'). editable ({type: "select" ، // نوع مربع التحرير. نص الدعم | textarea | حدد | تاريخ | قائمة مراجعة ومصادر أخرى: [{value: 1 ، text: "حدد قسم" ، // عنوان مربع التحرير معطل: // لا تعطيل التحرير الفارغ: "النص الفارغ" ، // وضع النص الافتراضي للقيمة الفارغة: "popup" ، // وضع مربع التحرير: يدعم المنبثقة والوضع المضمّن ، }) ؛عرض التأثير
المقالة أعلاه تعطي فقط بعض الحقول شائعة الاستخدام. بالطبع ، يحتوي المكون القابل للتطبيق على العديد من المعلمات الوظيفية الأخرى. إذا كنت مهتمًا ، يمكنك التحقق من الوثائق. الوثائق الرسمية لها أوصاف مفصلة لكل معلمة.
2. الخطة الأولية القابلة للتمهيد للتحرير في الخط
بعد التحدث لفترة طويلة ، ما سبق هو مجرد مقدمة. نأمل في النهاية تنفيذ التحرير داخل الخط في bootstraptable. وفقًا للقواعد المذكورة أعلاه ، إذا أردنا استخدام X-simitable لتنفيذ التحرير داخل الخط ، فيجب أن يكون هناك علامة في خلية الجدول ، ثم تتم تهيئة العلامة A. مع هذه الفكرة ، دعنا نحاول هذه الطريقة أولاً.
اقتباس الملفات ذات الصلة
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-css/css/bootstrap-ableable.css Rel = "STYLESSHEET"/> <script src = "/scripts/jQuery -1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js src = "~/content/bootstrap3-edable/js/bootstrap-edable.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-dable.js"> </script> <script src =/bootstrap-table/bootstrap-table-table-table-cn
التهيئة ذات الصلة من bootstraptable
<script type = "text/javaScript"> var currow = {} ؛ $ (function () {$ ("#tb_user"). bootstraptable ({شريط الأدوات: "#toolbar" ، idfield: "id" ، pagination: true ، showRefresh: true ، search: true ، clicktelect: true ، queryparams: function (param) {{} ؛ {الحقل: "username" ، العنوان: "اسم المستخدم" ، التنسيق: الدالة (القيمة ، الصف ، الفهرس) {return "<a href =/"#/"name =/" username/"data-type =/" text/"data-pk =/" + row.id + "/ "العمر" ،} ، {الحقل: "عيد ميلاد" ، العنوان: "عيد ميلاد" ، فظيعة (القيمة ، الصف ، الفهرس) {var date = eval ('new' OnClickRow: Function (row ، $ element) {currow = row ؛ /تحرير/تحرير "، البيانات ،" JSON ".طريقة الخلفية
طريقة اختبار الخلفية
Public JsonResult getUsers () {var lstres = new list <Serve> () ؛ lstres.add (مستخدم جديد () {id = "1" ، username = "Zhang San" ، Age = 22 ، عيد ميلاد = convert.todateTime ("1994-12-21") ، deptid = "1" ، deptname = "r & d department"}) ؛ lstres.add (مستخدم جديد () {id = "2" ، username = "li si" ، age = 28 ، عيد ميلاد = convert.todateTime ("1988-09-09") ، deptid = "2" ، deptname = "department sales"}) ؛ lstres.add (مستخدم جديد () {id = "3" ، username = "Wrestle Coat Uncle" ، Age = 40 ، Birthday = Convert.TodateTime ("1976-09-01") ، deptid = "2" ، deptname = "sales department"}) ؛ lstres.add (مستخدم جديد () {id = "4" ، username = "Lightning Prawn" ، Age = 37 ، Birthday = Convert.TodateTime ("1979-03-12") ، deptid = "4" ، deptname = "Creative Department"}) ؛ lstres.add (مستخدم جديد () {id = "5" ، username = "han meimei" ، Age = 29 ، عيد ميلاد = convert.todateTime ("1987-05-01") ، deptid = "5" ، deptname = "قسم الأعمال"}) ؛ Return JSON (LSTRES ، JSONREQUESTBEHAVIOR.allowget) ؛ } jsonresult public edit (user user) {// تحديث الإرجاع بعد deserialization json (جديد {} ، jsonrequestbehavior.allowget) ؛ }يمكن أن يحقق هذا بالفعل التأثير المطلوب ، ويبدو أنه يمكن أيضًا تحريره داخل الصف ، ولكن إذا لم تكن هناك أعمدة تتطلب التحرير داخل الصف وهناك العديد من الأعمدة ، فهل يستغرق كل عمود تنسيقه بنفس الطريقة؟ وهذا النوع من الكتابة جامد بشكل واضح ، وهو أمر يصعب على المدونين قبوله. لذلك بحثت عن مثال ووجدت أن JS Bootstrap-table-table.js موجود في تمديد bootstraptable.
3.
حسنًا ، يعترف المدون بأن ما سبق لا يزال مقدمة ، لأن المدون يعتقد أن هذا قد يكون فكرة عامة لحل المشكلة ، وبالتالي فإن طول هذه الأطراف قد يكون كثيرًا جدًا. أولاً ، دعونا نلقي نظرة على ملف table.js table.js:
/** * Author Zhixin wen <[email protected]> * الامتدادات: https://github.com/vitalets/x-editable */! function ($) {'use Strict' ؛ $ .extend ($. fn.bootstraptable.defaults ، {editable: true ، onedableInit: function () {return false ؛} ، OneDitablesave: function (field ، row ، oldvalue ، $ el) {return false ؛ {return false ؛ دولار. var bootstraptable = $ .fn.bootstraptable.constructor ، _inittable = bootstraptable.prototype. bootstraptable.prototype.inittable = function () {var that = this ؛ _inittable.apply (هذا ، Array.prototype.slice.apply (الحجج)) ؛ if (! this.options.editable) {return ؛ } دولار. "" "، 'data-pk ="' + row [that.options.idfield] + '' '،' data-value = "' + result +' '،' '،>' </a> ']. } ؛ bootstraptable.prototype.initbody = function () {var that = this ؛ _initbody.apply (هذا ، Array.prototype.slice.apply (الحجج)) ؛ if (! this.options.editable) {return ؛ } دولار. $ (هذا). ""] '). قابلة للتحرير (column.edable) .off (' الموضحة '). on (' showned '، function (e ، explitable) {var data = that.getData () ، index = $ (this) .Parents (' tr [data-index] '). data (' index ') ، row = data] هذا. $ body.find ('a [data-name = "' + column.field + '"]'] '). قابلة للتحرير (column.edable) .off (' Hidden '). on (' Hidden '، function (e ، reaud) {var data = that.getData () ، index = $ (this) .parents (' tr [data-index] '). that.trigger ('editable-hidden' ، column.field ، $ (this) ، expans) ؛ this.trigger ('ediable-init') ؛ } ؛} (jQuery) ؛
يجعل هذا JS في الواقع تغليفًا بسيطًا لـ X-DELITION ، مما يضيف سمات قابلة للتحرير للأعمدة وتحرير وتوفير بعض الأحداث. مع هذا كأساس ، أصبح الكود الذي حررناه في الصناعة هكذا.
الملفات التي يجب الرجوع إليها هي كما يلي:
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-css/css/bootstrap-ableable.css Rel = "STYLESSHEET"/> <script src = "/scripts/jQuery -1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js src = "~/content/bootstrap3-edable/js/bootstrap-edable.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-dable.js"> </script> <script src = "/bootstrap-table-table/bootstrap-dable-tabl src = "/content/bootstrap-table/src =" ~/content/bootstrap table/extensions/exemble/bootstrap-table-eDable.js "> </script>
1. مربع النص
$ (function () {$ ("#tb_user"). bootstraptable ({شريط الأدوات: "#toolbar" ، idfield: "id" ، pagination: true ، showRefresh: true ، search: true ، clicktelect: true ، queryparams: function (param) {{} ؛ {Field: "username" ، العنوان: "اسم المستخدم" ، قابل للتحرير: {text "، العنوان:" اسم المستخدم "، التحقق من صحة (V) {if (! v) إرجاع" اسم المستخدم لا يمكن أن يكون فارغًا "، eval ('new' + eval (value) .Source) date.format ("yyyy-mm-dd") ؛ /reditable/edit "، date ، dataType: 'Json'طريقة التحديث المقابلة للخلفية
public jsonresult edit (user user) {// update icke report json (new {} ، jsonrequestbehavior.allowget) ؛ }بعد الاختبار ، يمكن تحرير عمود اسم المستخدم بحرية. وبالمثل ، يمكن أيضًا تغيير العمود العمري إلى هذا
{الحقل: "العمر" ، العنوان: "العمر" ، قابلة للتحرير: {type: 'text' ، title: 'Age' ، Vality: function (v) {if (isnan (v)) return "يجب أن يكون العمر رقمًا" ؛ var age = parseint (v) ؛ إذا (العمر <= 0) ، يجب أن يكون العمر عددًا صحيحًا إيجابيًا "؛ }}}لا يلزم تعديل للباقي.
شرح الرمز: يتم تكوين المعلمات القابلة للتحرير في سمة الأعمدة الأولية أعلاه. لاحظ أن كائن JSON الذي يتوافق مع السمة القابلة للتحرير لكل عمود هنا هو كائن JSON المتهيج في X-edable. وهذا يعني ، ما هي السمات التي يمكن تكوينها عند تهيئة X-tible ، ويمكن تكوين الشيء نفسه في السمة القابلة للتحرير للعمود ، لذلك سيكون أكثر متعة للاستخدام. يتم وضع طريقة التقديم المعدلة بشكل موحد في حدث OneDitablesave للتعامل معه بشكل موحد.
2. مربع اختيار الوقت
مع المعرفة أعلاه كأساس ، دعونا نهيئة عمود عيد الميلاد:
{الحقل: "عيد ميلاد" ، العنوان: "عيد ميلاد" ، فورث: الوظيفة (القيمة ، الصف ، الفهرس) {var date = eval ('new' + eval (قيمة). } ، قابلة للتحرير: {type: 'date' ، العنوان: 'عيد ميلاد'}}لا توجد أي تعديلات مطلوبة في مكان آخر للحصول على التأثير:
هذا هو النمط الافتراضي لـ X-edable. إذا كنت لا تشعر بالسعادة ، فيمكنك تكوينه بنفسك. يوفر X-Edable العديد من المعلمات لتكوين مربعات التاريخ ، على النحو التالي:
بالطبع ، إذا كان الوقت دقيقًا للوقت والدقائق والثواني ، فيمكنك استخدام مربع تحرير من نوع DateTime. فيما يلي تأثير تحرير الإطار الزمني الرسمي ، والذي يبدو جيدًا.
3. سحب الصندوق لأسفل
هناك علامة أخرى مهمة في تحرير النماذج ، والتي تم اختيارها. كما ذكر أعلاه ، نعلم أن X-Editable يوفر لنا وضع تحرير مربع منسد ، على سبيل المثال ، يمكن كتابة تحرير هذا العمود في قسمنا على النحو التالي:
{الحقل: "Deptid" ، العنوان: "Department" ، reditable: {type: 'select' ، title: 'department' ، المصدر: [{value: "1" ، text: "r & d department"} ، {value: "2" ، text:احصل على التأثير
بالطبع ، لا يمكن أن تلبي طريقة تعيين مصادر البيانات محليًا احتياجاتنا ، لأنه في كثير من الحالات يتم الحصول على الخيارات في المربع المنسدلة عن بعد من قاعدة البيانات. بالطبع ، تم اعتبار X-edable أيضًا بالنسبة لنا ، على سبيل المثال ، يمكننا كتابة هذا:
{الحقل: "DeptId" ، العنوان: "Department" ، قابلة للتحرير: {type: 'select' ، title: 'department' ، source: function () {var result = [] ؛ $ .ajax ({url: '/editable/getDepartments' ، async: false ، اكتب: "get" ، البيانات: {} ، النجاح: الوظيفة (البيانات ، الحالة) {$ .each (البيانات ، الدالة (المفتاح ، القيمة) نتيجة العودة }}}}نقوم بتكوين طريقة في الخلفية
public jsonresult getDepartments () {var lstres = new list <Separtment> () ؛ lstres.add (قسم جديد () {id = "1" ، name = "R & D Department"}) ؛ lstres.add (Department () {id = "2" ، name = "Department"}) ؛ lstres.add (قسم جديد () {id = "3" ، name = "Department experience"}) ؛ lstres.add (قسم جديد () {id = "4" ، name = "Department"}) ؛ lstres.add (قسم جديد () {id = "5" ، name = "وحدة الأعمال"}) ؛ Return JSON (LSTRES ، JSONREQUESTBEHAVIOR.allowget) ؛ }يمكن أن يحقق أيضًا النتائج التي نريدها.
سؤال الرمز: إليك شيء واحد يجب شرحه. ربما اكتشف البستانيون الحذرون أن مجالنا: "قسم" هنا ، لماذا يجب أن نكون تكوين قسم بدلاً من Deptname؟ الأمر بسيط للغاية ، لأننا بحاجة إلى أن نتوافق مع قيمة القيمة في مصدر البيانات.
4. خانة الاختيار
بالإضافة إلى صناديق التحرير المشتركة المذكورة أعلاه ، توفر لنا X-edable أيضًا تحرير مجموعات مربعات الاختيار. على سبيل المثال:
{Field: "Hobby" ، title: "Host" ، editable: {type: "lock list" ، lextipator: "،" ، المصدر: [{value: 'bsb' ، النص: "كرة السلة '} ، {value:' ftb '، النص:' كرة القدم '، {value:احصل على التأثير:
بالطبع ، إذا كان لديك بيانات عن بُعد ، فيمكنك أيضًا استخدام طريقة مشابهة لما ورد أعلاه لاستردادها.
5. "الأشباح أبدا تتلاشى" Select2
عند الحديث عن مربع الاختيار أعلاه ، لم يستطع المدون إلا أن يفكر في أشياء مثل MultiSelect ، لذلك بحث عن وثيقة X-Edilitable ، ووجد أنها لا تدعم متعددة المراحل ، ولكنها تدعم Select2 ، ولا أعرف ما إذا كانت هذه أخبارًا جيدة. استنادًا إلى تجربة الاستخدام الخاصة بالمدون وتجربة الدردشة في مجموعة الاتصالات التقنية ، وجدت أن العديد من الأشخاص واجهوا مشاكل في الأناقة المختلفة عند استخدام Select2 ، وليس من السهل حلها.
نظرًا لأن X-edable يدعم Select2 ، فلنجربه. على أي حال ، العرض الرسمي جيد جدا. فيما يلي مثال على استخدام العرض التوضيحي الرسمي:
مع مزاج عصبي ، جرب المدون ذلك بنفسه.
مرجع تحديد ملف
<link href = "~/content/select2-bootstrap.css" rel = "stylesheet"/> <link href = "~/content/select2-master/dist/css/select2.min.css" rel = "stylesheet"/> <script src = "~/content2-master/dist/js
كود حاول
{الحقل: "Hobby" ، العنوان: "Hobby" ، قابلة للتحرير: {type: 'select2' ، title: 'hobby' ، name: 'hobby' ، placement: 'top' ، success: function (newValue) {debugger ؛ } ، خطأ: الدالة (استجابة ، newValue) {debugger ؛ } ، url: function (params) {debugger ؛ } ، المصدر: [{id: 'bsb' ، النص: 'كرة السلة'} ، {id: 'ftb' ، النص: 'Football'} ، {id: 'wsm' ، النص:احصل على النتيجة:
اتضح أنه لا يمكن نقل القيمة المحددة لـ SELECT2 إلى الخلفية بشكل طبيعي. على أي حال ، جرب المدون العديد من المعلمات ووفقًا للتوضيح الرسمي ، وانتهى جميعهم بالفشل. لا أعرف كيف كان العرض التوضيحي الرسمي ناجحًا. تم طرح هذا السؤال لأول مرة. إذا كان هناك أي بستانيين يستخدمونها ، فيرجى تصحيحها والإجابة عليها. إذا حل المدون هذه المشكلة في المستقبل ، فسيتم أيضًا تحديثه هنا.
4. ملخص
مشكلة أخرى هي أنه بعد اكتمال التحرير والتقديم ، واجه المدون مشكلة في المشروع: إذا كان هناك الكثير من محتوى النص بعد التقديم ، فإن عرض TH في رأس الجدول وعرض TD في tbody ليس صحيحًا ، وهو أمر مثير للاشمئزاز. لكنني لم أواجه هذه المشكلة عند كتابة العروض التوضيحية. ها هو الحل.
حل مشاكلك في جملة واحدة فقط!
تقدم هذه المقالة استخدام bootstraptable مع X-edable لتنفيذ التحرير داخل الخط. يتم شرح العديد من الأسئلة الواردة في المقالة بناءً على تجربة المدون لاستخدامه. إذا كنت تخطط لاستخدامه ، فيمكنك أيضًا تجربته.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال. آمل أن يساعدك في تعلم أفضل جدول Bootstrap Artstrap Component Table.