Давайте сначала посмотрим на эффекты таблицы начальной загрузки:
Таблица используется для отображения данных в базе данных. Данные загружаются с сервера через AJAX. В то же время, функция пейджинга реализуется сервером, чтобы избежать подкрепления клиента и пользовательского опыта, вызванного плохой загрузкой больших объемов данных. Вы также можете установить время начала и окончания данных запроса на запросы данных для определенного времени. Функция онлайн-редактирования реализована путем расширения таблицы начальной загрузки и использования X-EdiTable.
Есть два способа использовать таблицу начальной загрузки:
1. Установите атрибуты данных для обычных таблиц;
2. Включите подключатель Bootstrap Table через JavaScript.
Первый метод очень удобен, но я предпочитаю второй метод, который может разделить JS и HTML, и код JS может быть использован повторно.
Документация таблицы Bootstrap относительно подробно, но есть определенное конкретное содержимое, которое необходимо найти в примере кода и т. Д.
Сначала опубликуйте код реализации для фронта и бэкэнд, а затем подробно представьте его.
Файлы ресурсов, требуемые на стойке регистрации, в основном включают в себя стили, связанные с Bootstrap3, JS, CSS, связанные с таблицей начальной загрузки, JS и X-Elebutable на основе Bootstrap3 и JS: JS: JS: JS: JS: JS: JS: JS: JS:
<link rel = "styleSheet" href = "../ Assets/bootstrap/css/bootstrap.min.css"> <link rel = "stylesheet" href = "../ Assets/bootstrap-table/src/bootstrap-table.css"> <link rel = "styleSheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src =" ../ assets/jquery.min.js "> </script> <script 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/master/dist/bootstrap3-editable/js/bootstrap-editable.js"> </script>
HTML -код нуждается только
<Таблица идентификатор = "QueryList"> </table>
Код JS, код, связанный с временным запросом, после правильного установки времени запроса данные обновляются через метод Bootstrap Table:
$ ('#OpportGetData'). Click (function () {$ ('#msg'). html ('' '); var begintime_ = $ ('#begintime '). val (); var endtime_ = $ ('#endtime '). val (); var err =' '; if wemintime_ =' '|| if (date.parse (endtime _)-date.parse (begintime_) <0) $ ('#QueryList'). Bootstraptable ('rebresh');Связанный с таблицей JS:
$ ('#QueryList'). Bootstraptable ({Columns: [{Field: 'MeterMeasureHistoryId', Tilt: 'id', Sortable: true}, {Field: 'value', title: 'value', editable: {type: 'text', validate: function (value) {if ($. }, {Field: 'TimeMange', title: 'Time', редактор: {type: 'text', valide: function (value) {if ($. trim (value) == '') {return 'время не может быть пустым'; ФОРМАТЕТ: Функция (значение, row, index) {var s = '<a class = "save" href = "javascript: void (0)"> Сохранить </a>'; «Metermeasurehistoryid», Sortorder: «desc», Pagination: True, боковая пагивания: «сервер», PageNumber: 1, PageSize: 5, Pagelist: [5, 10, 20], Queryparams: function (params) {return {meterid: $ ('#meterid'). Val (paramsize: paramimit, forpsetsetset: $ spatsetsetset: $ spatset spetsetset: $ spatsetsetsetsetset: $ warmitset: $ spatset spetsetsetset: $ warmis spetsetset: $ spatsetsetsetsetset: $. Params.order, Begintime: $ ('#BERINTIME'). val (), EndTime: $ ('#EndTime'). val ()}}, URL: '/Analyze/getJsonHistoryDatas't '/Analyze/editmetermeasurehistorydata', успех: function (data) {alert ('модифицирован успешно'); }, 'click .remove': function (e, значение, row, index) {$ .ajax ({type: "post", data: row, url: '/analyze/deletemetermeasurehistorydata', успех: функция (data) {alert ('удалить успешно'); $ ('#QueryList'). значения: [row.metermeasurehistoryid]}); }};Параметр столбцов устанавливает все столбцы таблицы и параметры каждого столбца. Поле соответствует значению ключа данных, возвращаемых JSON, и параметров столбца в таблице начальной загрузки; Имя столбца отображается в соответствии с заголовком; Сортируемая настройка сортируется в соответствии с текущим столбцом; Форматтер устанавливает формат каждой ячейки в столбце; Редактируемый настройка - это метод редактирования текущей ячейки столбца, а также можно установить метод проверки проверки.
Следовательно, фактическая таблица установлена на четыре столбца, отсортированные в соответствии с первым столбцом, столбцы 2 и 3 могут быть отредактированы, тип установлен на текст, а по мере необходимости можно использовать другие типы. Данные проверки второго столбца не могут быть пустыми, а входное значение проверки третьего столбца - время; Содержимое столбцов 1, 2 и 3 происходит из данных JSON, возвращаемых сервером; Четвертый столбец - это операция данных в текущей строке, и добавлено событие прослушивания, и связано с окном.
SortName установлено на значение поля в столбце 1;
Sortorder настроен на обратный заказ;
Правительство верно для страниц;
Боковая панификация представляет серверную страницу;
PageNumber указывает страницу начала по умолчанию;
PageSize представляет количество данных, отображаемых на страницу;
Pagelist представляет дополнительное количество данных, отображаемых на страницу;
Queryparams означает, что каждый параметр, отправленный на сервер, может быть добавлен к необходимым вам параметрам;
URL - это адрес запроса данных.
Проверьте Bootstrap-table.js, и вы можете увидеть параметры параметров по умолчанию:
Bootstraptable.prototype.initserver = function (silent, Query) {var that = this, data = {}, params = {pagesize: this.options.padesize === this.options.formatallrows ()? 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.padesize; params.offset = this.options.pagesize === this.options.formatallrows ()? }}Фон сервера реализует три функции, одна из которых будет загружать на основе данных, а также изменять и удалять данные.
Public ActionResult 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). Skip (DisplayStart). Take (displaylength) .tolist (); // Покажите самые последние данные DisplayLength if ("asc" == order) {astoryDatas = db.meterMeasurehistories. Где (p => p.metermeasure.meterid == meterid). Orderby (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Покажите самые ранние данные DisplayLength} int vistoryDatatal = db.meterMeasureHistories. Где (p => p.metermeasure.meterid == meterid) .count (); // Общее количество данных // фильтрации времени if (! String.isnullorempty (request ["begintime"])) {dateTime begintime = dateTime.parse (запрос ["begintime"]); DateTime EndTime = dateTime.parse (request ["endtime"]); ИСТОРИЯ ДАТАТЫ = DB.METERMEASUREHISTORIES. Где (p => p.metermeasure.meterid == meterid). Где (p => p.timestamp> Betrintime && p.timestamp <EndTime). Orderbydescending (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Покажите самые последние данные о полосе дисплея if ("asc" == order) {astorydatas = db.metermeasurehistories. Где (p => p.metermeasure.meterid == meterid). Где (p => p.timestamp> Betrintime && p.timestamp <EndTime). Orderby (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Покажите самые ранние данные DISPLAINLENLENGHT} astoryDatatal = db.MeterMeasureHistories. Где (p => p.metermeasure.meterid == meterid). Где (p => p.timestamp> Betrintime && p.timestamp <EndTime) .count (); // Общее количество данных} list <tetermeasurehistoryDataviewModels> listmeterMeasureHistories = new List <MeterMeasureHistoryDataViewModels> (); foreach (var it in in vistrydatas) {listmetermeasurehistories.add (new MeterMeasureHistoryDataViewModels {meterMeasureHistoryId = item.MeterMeasureHistoryId, value = item.value, timestamp = item.timestamp.tostring ()}); } string jsondAtatable = jsonConvert.serializeObject (new {total = vistoryDatatal, rows = listmeterMeasureHistories}); вернуть контент (jsondatatable);}Он реализует лиц и запросы данных и возвращает данные JSON. Возвращенные данные JSON включают два объекта: общее количество и строки. Общее количество представляет общее количество данных, а строки представляют данные, которые будут отображаться. MeterMeasureHistoryDateView выглядит следующим образом, соответствующее значению поля в таблице:
открытый класс MeterMeasureHistoryDataViewModels {public int meterMeasureHistoryId {get; набор; } public Double Value {get; набор; } public String TimeStamp {get; набор; }}Функция модификации данных:
[Httppost] public jsonresult editmetermeasurehistorydata () {var meterestehistoryid = int.parse (запрос ["metermeasurehistoryid"]); var meterestehistoryvalue = double.parse (запрос ["value"]); var meterestehistorytime = dateTime.parse (запрос ["timeStamp"]); var meterestehistoryindb = db.metermeasurehistory.find (meterestehistoryid); meteresteasurehistoryindb.value = meteresteasurehistoryvalue; meteresteasurehistoryindb.timestamp = meteresteasurehistorytory; db.savechanges (); var infosedData = new MeterMeasureHistoryDataViewModels {meterMeasureHistoryId = meteresteAsurehistoryindb.metermeasurehistoryid, value = meteresteasurehistoryindb.value, timeStamp = meteresteasurehistoryindb.timestamp.toString ()}; Jsonresult js = new jsonresult (); js.data = json (mediceData); вернуть JS;}Функция удаления данных:
[Httppost] public jsonresult deletemetermeasurehistorydata () {var meterestehistoryid = int.parse (запрос ["metermeasurehistoryid"]); db.metermeasurehistory.remove (db.metermeasurehistory.find (meterestehistoryid)); db.savechanges (); var letetedData = new MeterMeasureHistoryDataViewModels {meterMeasureHistoryId = meterESteAsureHistoryId, value = 0, timestamp = null}; Jsonresult js = new jsonresult (); js.data = deleteddata; вернуть JS;}После удаления сервера передний план удаляет указанную строку данных с помощью метода Bootstrap Table.
Я использовал эти вещи сейчас. Подводя итог процесса обучения, я ищу официальные документы, примеры, смотрю исходный код и научусь использовать инструменты разработчика Chrome для просмотра источников и сети.
Выше приведено резюме сервера Bootstrap Table Server и приложения онлайн -редактирования, представленное редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!