Schauen wir uns zunächst die Auswirkungen der Bootstrap -Tabelle an:
Die Tabelle wird verwendet, um die Daten in der Datenbank anzuzeigen. Die Daten werden vom Server über Ajax geladen. Gleichzeitig wird die Paging -Funktion von einem Server implementiert, um Client -Paging und die Benutzererfahrung zu vermeiden, die durch schlechte Belastung großer Datenmengen verursacht wird. Sie können auch die Start- und Endzeit der Abfragedaten festlegen, um Daten für einen bestimmten Zeitbereich abzufragen. Die Online-Bearbeitungsfunktion wird implementiert, indem die Bootstrap-Tabelle erweitert und x-editable verwendet wird.
Es gibt zwei Möglichkeiten, die Bootstrap -Tabelle zu verwenden:
1. Setzen Sie Datenattribute für normale Tabellen;
2. Aktivieren Sie das Bootstrap-Tabellen-Plug-In über JavaScript.
Die erste Methode ist sehr bequem, aber ich bevorzuge die zweite Methode, die JS und HTML trennen kann, und der JS -Code kann wiederverwendet werden.
Die Dokumentation der Bootstrap -Tabelle ist relativ detailliert, es gibt jedoch einige spezifische Inhalte, die im Beispielcode usw. gefunden werden müssen.
Stellen Sie zuerst den Implementierungscode für die Vorder- und Backend und stellen Sie ihn ausführlich vor.
Die von der Rezeption erforderlichen Ressourcendateien umfassen hauptsächlich Bootstrap3-verwandte Stile, JS, Bootstrap-Tabellen-bezogene CSS, JS und X-editable-basierte Bootstrap3-basierte Stile und JS:
<link rel = "stylesheet" href = "../ assets/bootstrap/css/bootstrap.min href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-edible.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-edible/jsstrap-editable.js
HTML -Code benötigt nur
<table id = "queryList"> </table>
JS -Code, Zeitabfrage -zubezogener Code, nach korrekter Abfragezeit werden die Daten durch die Bootstrap -Tabellenmethode aktualisiert:
$ ('#subletData'). click (function () {$ ('#msg'). if (Datum.Parse (Endtime _)-Datum.Parse (BeginTime_) <0) {err = 'Abfragestellungsfehler'; $ ('#QueryList').Tabellenbezogene JS:
$ ('#queryList'). bootstrappable ({columns: [{field: 'meterMeasurehistoryId', title: 'id', sortable: true}, {field: 'value', title: 'value', bearbeitbar: {type: 'text', valida: valid (value) {if ($ $. $. }, {field: 'timestamp', title: 'time', editable: {type: 'text', validate: function (value) {if ($. trim (value) == '') {return 'time kann nicht leer sein; Formatierung: Funktion, Zeile, Index) {var s = '<a class = "speichern" href = "javaScript: void (0)"> speichern </a>'; 'MeterMeasurehistoryId', Sorder: 'Desc', Pagination: TRUE, Sidepagination: 'Server', PageNumber: 1, PageSize: 5, Pagelist: [5, 10, 20], Queryparams: Funktion (Params) {return {Meterid: $ ('#meterid'). Params.ORDER, BeginTime: $ ('#BeginTime'). Val (), EndTime: $ ('#endzeit'). Val ()}}, url: '/Analyze/getJsonHistoryDatas' })window.operateEvents = {'klick. '/Analyse/edgeMeterMeasurehistoryData', Erfolg: Funktion (Daten) {alert ('erfolgreich geändert'); }. Werte: [Row.MeterMeasurehistoryId]}); }};Der Parameter der Spalten legt alle Spalten der Tabelle und die Parameter jeder Spalte fest. Das Feld entspricht dem Schlüsselwert der von JSON zurückgegebenen Daten und den Spaltenparametern in der Bootstrap -Tabelle. der Spaltenname, der gemäß dem Titel angezeigt wird; Die sortierbare Einstellung wird nach der aktuellen Spalte sortiert. Das Formatierer legt das Format jeder Zelle in der Spalte fest; Die bearbeitbare Einstellung ist die Bearbeitungsmethode der aktuellen Spaltenzelle, und die Überprüfungsmethode kann ebenfalls festgelegt werden.
Daher wird die tatsächliche Tabelle auf vier Spalten eingestellt, die nach der ersten Spalte sortiert sind, die Spalten 2 und 3 können bearbeitet werden, der Typ wird auf Text gesetzt und andere Typen können nach Bedarf verwendet werden. Die zweiten Spaltenüberprüfungsdaten können nicht leer sein, und der Eingabwert der dritten Spalte ist die Zeit. Der Inhalt der Spalten 1, 2 und 3 stammt aus den vom Server zurückgegebenen JSON -Daten. Die vierte Spalte ist die Datenoperation in der aktuellen Zeile, und das Hörereignis wird hinzugefügt und an das Fenster gebunden.
Sortname wird in Spalte 1 auf den Feldwert gesetzt.
Sorder ist auf umgekehrte Reihenfolge eingestellt.
Pagination gilt für die Pagination;
Die Sidepagination repräsentiert die Server -Pagination;
Pagenumber gibt die Standard -Startseite an.
PageSize repräsentiert die Anzahl der pro Seite angezeigten Daten.
Der Pagelist repräsentiert die optionale Anzahl der pro Seite angezeigten Daten.
Queryparams bedeutet, dass jeder an den Server gesendete Parameter zu den benötigten Parametern hinzugefügt werden kann.
URL ist die Anforderungsadresse der Daten.
Überprüfen Sie die Bootstrap-table.js und Sie können die Standardparameter der Standardparameter sehen:
BootStrapTable.Prototype.initServer = Funktion (stille, abfrage) {var that = this, data = {}, params = {pageSize: this.options.pageSize === 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 = {such: 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); }}Der Serverhintergrund implementiert drei Funktionen, eine auf Daten sowie die Daten zu laden und Daten zu ändern und zu löschen.
public actionResult getJsonHistoryDatas () {var displayStart = int.Parse (request ["offset"]); var displayLength = int.Parse (request ["pageSize"]); var meterid = int.Parse (request ["meterid"]); var order = request ["sortOrder"]; var historyDatas = db.MeterMeasurehistories. Wobei (p => P.Mermeasure.meterid == Meterid). OrderByDescending (p => P.Timestamp). Skip (dosidatStart). Take (displayLength) .tolist (); // Zeigen Sie die neuesten Anzeigenlängendaten an if ("asc" == order) {historyDatas = db.meterMeasurehistories. Wobei (p => P.Mermeasure.meterid == Meterid). OrderBy (p => p.timestamp). Skip (dosidatStart). Take (displayLength) .tolist (); // Zeigen Sie die frühesten Anzeigenlängendaten} int historyDatatotal = db.MeterMeasurehistories. Wobei (p => p.meterMeasure.meterid == meterid) .count (); // Gesamtzahl der Daten // Zeitfilterung if (! String.Isnullorempy (Request ["BeginTime"])) {DateTime BegintTime = DateTime.Parse (Anfrage ["BeginTime"]); DateTime EndTime = DateTime.Parse (Request ["Endime"]); HistoryDatas = db.MeterMeasurehistories. Wobei (p => P.Mermeasure.meterid == Meterid). Wo (p => p.timestamp> Begintime && P.Timestamp <Endime). OrderByDescending (p => P.Timestamp). Skip (dosidatStart). Take (displayLength) .tolist (); // Zeigen Sie die neuesten DisplayLength -Strip -Daten an, wenn ("asc" == order) {historyDatas = db.MeterMeasurehistories. Wobei (p => P.Mermeasure.meterid == Meterid). Wo (p => p.timestamp> Begintime && P.Timestamp <Endime). OrderBy (p => p.timestamp). Skip (dosidatStart). Take (DisplayLength) .tolist (); // Zeigen Sie die frühesten Anzeigenlängendaten} historyDatatotal = db.MeterMeasurehistories. Wobei (p => P.Mermeasure.meterid == Meterid). Wobei (p => p.timestamp> Begintime && p.timestamp <endzeit) .count (); // Gesamtzahl der Daten} Liste <mymeasurehistoryDataviewModels> listmeterMeasurehistories = neue Liste <MeterMeasurehistoryDataviewModels> (); foreach (var item in historyDatas) {listMeterMeasurehistories.Add (New MeterMeasurehistoryDatAviewModels {meterMeasurehistoryId = item.MeterMeasurehistoryId, value = item.value, TimeStamp = item.timestamp.toString ()}); } String jSondatable = jsonConvert.SerializeObject (new {Total = historyDatatotal, rows = listMeterMeasurehistories}); Inhalt zurückgeben (jSondatable);}Es implementiert Pagination und Datenabfrage und gibt JSON -Daten zurück. Die zurückgegebenen JSON -Daten enthält zwei Objekte: Total and Zeilen. Die Gesamtsumme repräsentiert die Gesamtzahl der Daten, und die Zeilen stellen die zu angezeigten Daten dar. METEREMEASUREHISTORYDATEVIEW ist wie folgt, was dem Feldwert in der Tabelle entspricht:
öffentliche Klasse meterMeasurehistoryDataviewModels {public int meterMeasurehistoryId {get; Satz; } public double value {get; Satz; } public String timestamp {get; Satz; }}Datenänderungsfunktion:
[Httppost] public JsonResult edredeMeterMeasurehistoryData () {var meterestehistoryId = int.Parse (Request ["meterMeasurehistoryId"]); var meterestehistoryValue = double.Parse (request ["value"]); var meterestehistorytime = datetime.parse (request ["timestamp"]); var meterestehistoryIndb = db.MeterMeasurehistory.find (MeterestehistoryId); metersteasurehistoryIndb.value = metersteasurehistoryValue; MetersteasurehistoryIndb.Timestamp = MetersteasurehistoryTime; db.savechanges (); var geänderteData = new myMeasurehistoryDataviewModels {meterMeasurehistoryId = metersteasurehistoryIndb.MeterMeasurehistoryId, Value = MetersteasurehistoryIndb.Value, TimeStamp = MessgeräteasurehistoryIndb.Timestamp.ToString ()}; JSONRESULT JS = New JsonResult (); Js.Data = JSON (geändert); Rückgabe js;}Datenlöschfunktion:
[Httppost] public JsonResult DeletemeterMeasurehistoryData () {var meterestehistoryId = int.Parse (Request ["meterMeasurehistoryId"]); db.MeterMeMeasurehistory.remove (db.MeterMeasurehistory.find (MeterestehistoryId)); db.savechanges (); var deletedData = new MeterMeasurehistoryDatAviewModels {meterMeasurehistoryId = MetersteasurehistoryId, value = 0, timestamp = null}; JSONRESULT JS = New JsonResult (); js.data = deletedData; Rückgabe js;}Nachdem der Server gelöscht wurde, löscht der Vordergrund die angegebene Datenzeile über die Bootstrap -Tabellenmethode.
Ich habe diese Dinge im Moment benutzt. Um den Lernprozess zusammenzufassen, suche ich offizielle Dokumente, Beispiele, siehe den Quellcode und lerne, Chrome -Entwickler -Tools zum Anzeigen von Quellen und zum Netzwerk zu verwenden.
Die oben genannte Zusammenfassung der vom Editor vorgestellten Online -Bearbeitungsanwendung ist die Zusammenfassung der Bootstrap -Tabellenserver -Pagination und der Online -Bearbeitung. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!