صفحات خادم جدول Bootstrap وملخص تطبيق التحرير عبر الإنترنت

دعونا نلقي نظرة أولاً على تأثيرات جدول bootstrap:

يتم استخدام الجدول لعرض البيانات في قاعدة البيانات. يتم تحميل البيانات من الخادم من خلال AJAX. في الوقت نفسه ، يتم تنفيذ وظيفة الترحيل بواسطة خادم لتجنب ترحيل العميل وتجربة المستخدم الناتجة عن سوء تحميل كميات كبيرة من البيانات. يمكنك أيضًا تعيين وقت البدء والنهاية للاستعلام عن البيانات للاستعلام عن البيانات لنطاق زمني معين. يتم تنفيذ وظيفة التحرير عبر الإنترنت عن طريق توسيع جدول bootstrap واستخدام X-edable.

هناك طريقتان لاستخدام جدول bootstrap:

1. تعيين سمات البيانات للجداول العادية ؛

2. تمكين المكون الإضافي لجدول bootstrap من خلال JavaScript.

الطريقة الأولى مريحة للغاية ، لكني أفضل الطريقة الثانية ، والتي يمكنها فصل JS و HTML ، ويمكن إعادة استخدام رمز JS.

توثيق جدول bootstrap مفصل نسبيًا ، ولكن هناك بعض المحتويات المحددة التي يجب العثور عليها في رمز العينة ، إلخ.

قم أولاً بالنشر رمز التنفيذ للواجهة الأمامية والخلفية ، ثم أقدمه بالتفصيل.

تتضمن ملفات الموارد التي يتطلبها مكتب الاستقبال بشكل أساسي أنماط Bootstrap3 و JS و CSS المتعلقة بجدول BootStrap و JS و X-Distome المستندة إلى bootstrap3 و JS:

 <link rel = "stylesheet" href = "../ alcests/bootstrap/css/bootstrap.min.css"> <link rel = "stylesheet" href = "../ arcestets/bootstrap-table/src/bootstrap-table href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> <script src =" ../ alctets/jquery.min.js "> </script> <Stript src = "../ assets/bootstrap/js/bootstrap.min.js"> </script> <script src = "../ assets/bootstrap-table/src/bootstrap-table.js"> </script> <script src = "../ assets/bootstrap-table/src/extensions/editable/bootstrap-table.js"> </script> <script src = "// rawgit.com/vitalets/x-editable/dist/dist/bootstrap3-editable/js/bootstrap-editable

كود HTML يحتاج فقط

 <table id = "querylist"> </table>

رمز JS ، الكود المتعلق بالاستعلام الزمني ، بعد تعيين وقت الاستعلام بشكل صحيح ، يتم تحديث البيانات من خلال طريقة جدول bootstrap:

 $ ('#submitgetData'). انقر فوق (function () {$ ('#msg'). html ('') ؛ var begintime_ = $ ('#begintime'). val () ؛ var endtime_ = $ ('#endtime'). val () ؛ var err = '' if (date.parse (endtime _)-parse (begintime_) {err = 'Query Time Error' ؛ $ (#QueryList ').

الجدول المتعلق JS:

 $ ('#querylist'). bootstraptable ({الأعمدة: [{الحقل: 'meterMeasureHistoryId' ، العنوان: 'id' ، fortable: true} ، {field: 'value' ، title: 'value' ، exedable: {type: 'text' ، validate: function (value) {$. } ، {Field: 'timestamp' ، title: 'time' ، {type: 'text' ، values: function) {if ($. value (value) Formatter: value ، row ، index) {var s = '<a class = "save" href = "javaScript: "metermeasurehistoryid" ، sortorder: 'desc' ، apination: true ، sidepagination: 'server' ، pagenumber: 1 ، pagesize: 5 ، pagelist: [5 ، 10 ، 20] begintime: $ ('#begintime'). val () ، endtime: $ ('#endtime'). val ()}} ، url: '/analyze/getjsonhistorydatas' )) ؛ window.operatevents = {' click .save ' "/تحليل/editmeterMeasurehistorydata ، النجاح: الوظيفة (البيانات) {Alert ('modified bargetive') ؛ } ، "انقر فوق .remove ': function (e ، value ، row ، index) {$ .ajax ({type:" post "، data: row ، url:'/deleze/deletemeSereAsterHistoryData '، success: function (data) {alert (' delete bantival ') ؛ $ ('#querylist. [row.meterMeasureHistoryId]}) ؛ }} ؛

تقوم معلمة الأعمدة بتعيين جميع أعمدة الجدول ومعلمات كل عمود. يتوافق الحقل مع القيمة الرئيسية للبيانات التي تم إرجاعها بواسطة JSON ومعلمات العمود في جدول Bootstrap ؛ اسم العمود المعروض وفقًا للعنوان ؛ يتم فرز الإعداد القابل للفرز وفقًا للعمود الحالي ؛ يضع التنسيق تنسيق كل خلية في العمود ؛ الإعداد القابل للتحرير هو طريقة التحرير لخلية العمود الحالية ، ويمكن أيضًا تعيين طريقة التحقق من التحقق من صحة.

لذلك ، يتم تعيين الجدول الفعلي على أربعة أعمدة ، يتم فرزها وفقًا للعمود الأول ، يمكن تحرير العمودان 2 و 3 ، ويتم تعيين النوع على النص ، ويمكن استخدام أنواع أخرى حسب الحاجة. لا يمكن أن تكون بيانات التحقق من العمود الثاني فارغة ، وقيمة إدخال التحقق من العمود الثالث هي الوقت ؛ تأتي محتويات الأعمدة 1 و 2 و 3 من بيانات JSON التي يتم إرجاعها بواسطة الخادم ؛ العمود الرابع هو تشغيل البيانات في الصف الحالي ، ويتم إضافة حدث الاستماع ، ويرتبط بالنافذة.

تم تعيين SortName على قيمة الحقل في العمود 1 ؛

تم تعيين SortOrder على ترتيب عكسي ؛

ترقيم الصفحات ينطبق على ترقيم الصفحات.

يمثل Sidepagination ترقيم ترقيم الخادم ؛

يشير Pagenumber إلى صفحة البدء الافتراضية ؛

يمثل Pagesize عدد البيانات المعروضة لكل صفحة ؛

يمثل Pagelist العدد الاختياري للبيانات المعروضة لكل صفحة ؛

تعني QueryParams أنه يمكن إضافة كل معلمة يتم إرسالها إلى الخادم إلى المعلمات التي تحتاجها ؛

عنوان URL هو عنوان طلب البيانات.

تحقق من bootstrap-table.js ويمكنك رؤية معلمات params الافتراضية:

 bootstraptable.prototype. this.options.totalrows: this.options.pagesize ، pagenumber: this.options.pagenumber ، searchtext: this.searchtext ، sortname: this.options.sortName ، sortorder: this.options.sortorder} ؛ if (! this.options.url) {return ؛ } if (this.options.queryparamstype === 'limit') {params = {search: params.SearchText ، sort: params.sortName ، order: params.sortorder} ؛ if (this.options.pagination) {params.limit = this.options.pagesize === this.options.formatallrows ()؟ this.options.totalrows: this.options.pagesize ؛ params.offset = this.options.pagesize === this.options.formatallrows () ؟: this.options.pagesize * (this.options.pagenumber - 1) ؛ }}

تقوم خلفية الخادم بتنفيذ ثلاث وظائف ، واحدة يتم تحميلها بناءً على البيانات ، وكذلك تعديل وحذف البيانات.

 الإجراءات العامة getjsonhistorydatas () {var displayStart = int.parse (request ["Offset"]) ؛ var displayLength = int.parse (request ["pagesize"]) ؛ var meterid = int.parse (طلب ["meterid"]) ؛ var order = request ["sortorder"] ؛ var HistoryDatas = db.meterMeasureHistories. حيث (p => p.meterMeasure.meterid == meterid). orderbydescending (p => p.timestamp). تخطي (DisplayStart). خذ (عرض العرض) .tolist () ؛ // إظهار أحدث بيانات عرض الطول إذا ("asc" == order) {historydatas = db.meterMeasureHistories. حيث (p => p.meterMeasure.meterid == meterid). Orderby (P => P.Timestamp). تخطي (DisplayStart). خذ (عرض العرض) .tolist () ؛ // إظهار أقدم بيانات الطول} int historydatatotal = db.meterMeasureHistories. حيث (p => p.meterMeasure.meterid == meterid) .count () ؛ // إجمالي عدد البيانات // مرشح الوقت if (! string.isnullorEmpty (request ["begintime"])) DateTime Endtime = dateTime.parse (طلب ["Endtime"]) ؛ HistoryDatas = db.meterMeasureHistories. حيث (p => p.meterMeasure.meterid == meterid). حيث (p => p.timestamp> begintime && p.timestamp <endtime). orderbydescending (p => p.timestamp). تخطي (DisplayStart). خذ (عرض العرض) .tolist () ؛ // إظهار أحدث بيانات شريط العرض إذا ("ASC" == ORDER) {HistoryDatas = db.meterMeasureHistories. حيث (p => p.meterMeasure.meterid == meterid). حيث (p => p.timestamp> begintime && p.timestamp <endtime). Orderby (P => P.Timestamp). تخطي (DisplayStart). خذ (عرض العرض) .Tolist () ؛ // إظهار أقدم بيانات الطول} HistoryDatatotal = db.meterMeasureHistories. حيث (p => p.meterMeasure.meterid == meterid). حيث (p => p.timestamp> begintime && p.timestamp <endtime) .count () ؛ // إجمالي عدد البيانات} <meterMeasureHistoryDataViewModels> listMeAsitiveHistories = قائمة جديدة <meterMeasureHistoryDataviewModels> () ؛ foreach (var item in HistoryDatas) {listMeSerMeasureHistories.add (new MeterMeasureHistoryDataViewModels {meterMeasureHistoryId = item.MeterMeasureHistoryId ، value = item.value ، timestamp = item.timestamp.toString ()}) ؛ } string jSondatatable = jsonconvert.serializeObject (new {total = historyDatatotal ، rows = listMeAseasureHistories}) ؛ إرجاع محتوى (jsondatable) ؛}

وهو ينفذ ترقيم الصفحات والاستفسار عن البيانات ، ويعيد بيانات JSON. تتضمن بيانات JSON التي تم إرجاعها كائنين: Total and Rows. يمثل المجموع إجمالي عدد البيانات ، ويمثل الصفوف البيانات الواجب عرضها. MeterMeasureHistoryDateView كما يلي ، المقابلة لقيمة الحقل في الجدول:

 الطبقة العامة meterMeasureHistoryDataViewModels {public int metermeasurehistoryid {get ؛ تعيين؛ } القيمة المزدوجة العامة {get ؛ تعيين؛ } timestamp timestamp {get ؛ تعيين؛ }}

وظيفة تعديل البيانات:

 [httppost] public jsonresult editMeasureShistoryData () {var meterestehistoryid = int.parse (request ["metermeasurehistoryid"]) ؛ var meterestehistoryvalue = double.parse (request ["value"]) ؛ var meterestehistorytime = dateTime.parse (request ["timestamp"]) ؛ var meterestehistoryIndb = db.meterMeasureHistory.find (meterestehistoryid) ؛ meteresteasurehistoryindb.value = meterestaseasurehistoryvalue ؛ meteresteasurehistoryindb.timestamp = meterestaseasurehistorytime ؛ db.savechanges () ؛ var changeData = new MeterMeasureHistoryDataviewModels {MeterMeasureHistoryId = meteresteasureHistoryIndb.MeterMeasureHistoryId ، value = meteresteasureHistoryIndb.value ، timestamp = meterestasurehistoryindb.timestamp.toString ()} ؛ JsonResult JS = New JsonResult () ؛ JS.Data = json (changeData) ؛ إرجاع JS ؛}

وظيفة حذف البيانات:

 [httppost] public jsonresult deletemetermeasurehistorydata () {var meterestehistoryid = int.parse (request ["metermeasurehistoryid"]) ؛ db.meterMeasureHistory.Remove (db.meterMeasureHistory.Find (meterestehistoryid)) ؛ db.savechanges () ؛ var deletedData = new MeterMeasureHistoryDataViewModels {meterMeasureHistoryId = meteresteasurehistoryid ، value = 0 ، timestamp = null} ؛ JsonResult JS = New JsonResult () ؛ JS.Data = deletedData ؛ إرجاع JS ؛}

بعد حذف الخادم ، يحذف المقدمة صف البيانات المحدد من خلال طريقة جدول bootstrap.

لقد استخدمت هذه الأشياء في الوقت الحالي. لتلخيص عملية التعلم ، أبحث عن مستندات رسمية وأمثلة ومشاهدة الكود المصدري وتعلم استخدام أدوات مطور Chrome لعرض المصادر والشبكة.

ما ورد أعلاه هو ملخص لتراجع خادم جدول Bootstrap وتطبيق التحرير عبر الإنترنت الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!