Vorwort: Als ich die Bootstrappable-Komponente zuvor vorgestellt habe, erwähnte ich seine Inline-Bearbeitungsfunktion, aber um die Funktion anzuzeigen, habe ich das übernommen und gesagt, es sei eine Sünde! Vor kurzem habe ich immer noch vor, die Inline-Bearbeitung im Projekt zu verwenden, also habe ich die x-eedierbare Komponente erneut untersucht. Ich habe einige Fallstricke begegnet, also lass uns die Gruben hier aufnehmen! Freunde, die etwas über Bootstrappable wissen möchten, können zur JS -Komponentenserie - Table Component Artefact: Bootstrap -Tabelle.
1. Einführung in die x-eedierbare Komponente
Die x-eedierbare Komponente ist ein Plug-In zum Erstellen von bearbeitbaren Popup-Boxen. Es unterstützt drei Stile: Bootstrap, Jquery UI und JQuery. Der allgemeine Effekt ist wie folgt:
Nach dem üblichen Stil des Bloggers muss hier der erste ausgewählt werden. Geben Sie zunächst die Open Source -Adresse an.
X-editable Open Source-Adresse: https://github.com/vitalets/x-editable
X-eedierbare Dokumentadresse: http://vitalets.github.io/x-editable/docs.html
X-editable Online-Demo: http://vitalets.github.io/x-editable/demo-bs3.html
1. Erste Erfahrung mit x-eedierbar
Laden Sie zuerst den Quellcode basierend auf Bootstrap in die Region herunter. Verweise auf relevante Dateien.
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/> <link href = "~/content/bootstrap3-edable/css/bootstrap-edable src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-editable/js/bootstrap-edable.js"
Seitenelemente
Kopieren Sie den Code wie folgt: <a href = "#" id = "userername" date-type = "text" data-title = "userername"> username </a>
JS -Initialisierung
$ (function () {$ ('#userername'). editable ();});Effektanzeige
Das obige soll die x-eedierbaren Parameter durch das HTML-Datenattribut einstellen. Natürlich kann ich auch die Parameter während der Initialisierung festlegen. Zum Beispiel gebe ich nur ein leeres Tag: <a href = "#" id = "userername"> userername </a>
JS -Initialisierung
$ (function () {$ ('#userername'). editable ({type: "text", // Der Typ des Bearbeitungsfelds. Support Text | textarea | Select | Datum | Checkliste und andere Titel: "Benutzername", // Der Titel des Bearbeitungsfelds deaktiviert: false, // Doess bearbeiten: "leeres Text", // Default -Supply -MODEL: MODOULD STEX: MODOULD STEX: MODOULD STEX: MODOULD ", MODOULD UND MODEL und MODEL. Inline -Modus ist der Standard -Popup -Validieren: Funktion (Wert) {// Feldüberprüfung if (! $. Trim (Wert)) {return 'kann nicht leer sein'}}});Den Effekt anzeigen
Lassen Sie uns etwas komplizierter haben
<a href = "#" id = "Abteilung"> Abteilung auswählen </a>
$(function () { $('#department').editable({ type: "select", //The type of editing box. Support text|textarea|select|date|checklist and other sources: [{ value: 1, text: "Development Department" }, { value: 2, text: "Sales Department" }, { value: 2, text: "Sales Department" }, { value: 3, text: "Administrative Department"}], Titel: "Abteilung auswählen", // Der Titel des Bearbeitungsfelds deaktiviert: Falsch, // Deaktivieren Sie das Bearbeiten von Leerlauf: "Leerer Text", // Der Standardtextmodus des leeren Werts: "Popup", // Der Modus des Bearbeitungsfelds unterstützt Popup und Inline -Modus, der Standard -Popup -Validierung: Funktion (Wert) {// {$ $. });Den Effekt anzeigen
Der obige Artikel enthält nur einige häufig verwendete Felder. Natürlich hat die x-eedierbare Komponente viele andere funktionale Parameter. Wenn Sie interessiert sind, können Sie die Dokumentation überprüfen. Die offizielle Dokumentation enthält detaillierte Beschreibungen für jeden Parameter.
2. Bootstrappable Anfangsplan für die Bearbeitung in der Inline
Nach langer Zeit ist das oben genannte nur ein Auftakt. Wir hoffen letztendlich, eine Inline-Bearbeitung in Bootstrappable implementieren zu können. Nach den oben genannten Regeln muss es in der Zelle der Tabelle ein A-Tag in der Zelle der Tabelle verwenden, wenn wir x-editable verwenden möchten, um die Inline-Bearbeitung zu implementieren, und dann wird das A-Tag initialisiert. Versuchen wir es mit dieser Idee zuerst so.
Zitat verwandte Dateien
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-edable rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script><script src="/Content/bootstrap/js/bootstrap.min.js"></script><script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script><script src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script>
Verwandte Initialisierung von Bootstrappable
<script type = "text/javaScript"> var currow = {}; $ (function () {$ ("#TB_USER"). Bootstrappable ({Toolbar: "#toolbar", IDField: "ID", Pagination: true, showRefresh: true, such: true, clickToSelect: true, queryparams: function (params (param) {return {};}; }, { field: "UserName", title: "Username", formatter: function (value, row, index) { return "<a href=/"#/" name=/"UserName/" data-type=/"text/" data-pk=/"+row.Id+"/" data-title=/"Username/">" + value + "</a>"; } }, { field: "Age", Titel: "Age",}, {Feld: "Geburtstag", Titel: "Geburtstag", Formatter: Funktion (Wert, Index) {var date = eval ('neu' + eval (Wert). }], onclickrow: function (row, $ element) {currow = row; 'Post', URL: "/bearbeiten", currrow, DataType: 'JSON', Funktion (Daten, textstatus, JQXHR) {alertieren Sie erfolgreich! ');Backend -Methode
Hintergrundtestmethode
public JSonResult getUsers () {var lstres = new List <Bener> (); lstres.add (neuer user () {id = "1", userername = "zhang san", Alter = 22, birthday = convert.todatetime ("1994-12-21"), Deptid = "1", Deptname = "R & D Department"}); lstres.add (neuer user () {id = "2", userername = "li si", Alter = 28, birthday = convert.todatetime ("1988-09-09"), Deptid = "2", Deptname = "Sales Department"}); lstres.add (neuer user () {id = "3", userername = "Wrestle Coat Onkel", Alter = 40, Geburtstag = convert.todatetime ("1976-09-01"), Deptid = "2", Deptname = "Sales Department"}); lstres.add (neuer user () {id = "4", userername = "lightning prawn", ay 37, birthday = convert.todatetime ("1979-03-12"), Deptid = "4", Deptname = "Creative Department"}); lstres.add (neuer user () {id = "5", userername = "han meimerei", Alter = 29, birthday = convert.todatetime ("1987-05-01"), Deptid = "5", Deptname = "Business Department"}); return JSON (Lstres, JsonRequestBehavior.AllowGet); } public JsonResult Edit (Benutzer Benutzer) {// Die Rückgabe nach der Deserialisierung jSON (neu {}, jsonRequestBehavior.AllowGet); }Dies kann in der Tat den gewünschten Effekt erreichen, und es scheint, dass es auch in der Zeile bearbeitet werden kann. Wenn es jedoch keine Spalten gibt, die in der Zeile bearbeitet werden müssen, und es viele Spalten gibt, dauert es für jede Spalte, um die gleiche Weise zu formatieren? Und diese Art des Schreibens ist offensichtlich starr, was für Blogger wirklich schwierig ist, es zu akzeptieren. Deshalb suchte ich nach einem Beispiel und stellte fest, dass die JS-Bootstrap-Table-eeditable.js in der Erweiterung von Bootstrappable existiert.
3.. Bootstrappable -Bearbeitung endgültiger Plan
Nun, der Blogger gibt zu, dass das Obige immer noch ein Auftakt ist, weil der Blogger der Meinung ist, dass dies eine allgemeine Idee ist, um das Problem zu lösen, sodass die Länge dieser Präludes etwas zu viel sein kann. Schauen wir uns zunächst die Bootstrap-table-eeditable.js-Datei an:
/** * @Author Zhixin Wen <[email protected]> * Erweiterungen: https://github.com/vitalets/x-editable */! Funktion ($) {'strikte'; $.extend($.fn.bootstrapTable.defaults, { editable: true, onEditableInit: function () { return false; }, onEditableSave: function (field, row, oldValue, $el) { return false; }, onEditableShown: function (field, row, $el, editable) { return false; }, onEditableHidden: function (field, row, $el, reason) {return false;}}); $ .extend ($. fn.bootStrapTable.Constructor.Events, {'editable-init.bs.table': 'OnedableInit', 'editable-save.bs.table': 'OnEditablesave', 'editable-reabs.bs.table': 'OneditableShown', Editable-Hidden.table ': var bootstrappable = $ .fn.bootStrapTable.Constructor, _inittable = bootstrappable.Prototype.inITTABLE, _initbody = bootstrappable.Prototype.initbody; BootStrapTable.Prototype.inittable = function () {var that = this; _Inittable.Apply (this, array.prototype.lice.apply (Argumente)); if (! this.options.edable) {return; } $ .each (this.columns, function (i, column) {if (! column.edable) {return;} var _formatter = column.formatter; column.formatter = function (value, Index) {var result = _formatter? _formatter (value, zeile): value; return; '"', 'data-pk ="' + row [that.options.idfield] + '' ',' data-value = "' + result +' ','> ' +' </a> '] .join (' ');};}); }; BootStrapTable.Prototype.initbody = function () {var that = this; _initbody.Apply (this, array.prototype.slice.apply (Argumente)); if (! this.options.edable) {return; } $ .each (this.columns, function (i, column) {if (! column.edable) {return;} that. $ (this) .PARENTS ('TR [Datenindex]). '"]'). editable (column.Editable) .off ('gezeigt'). on ('gezeigt', function (e, bearbeitbar) {var data = that.getData (), index = $ (this) .PARENTEN ('tr [Data-Index]'). Data ('Index'), Row = Data [index]; that. that.trigger ('bearbeitbarer Hidden', Spalte.field, Row, $ (this), Grund); this.trigger ('editable-init'); };} (jQuery);
Diese JS macht tatsächlich eine einfache Verkapselung von X-editable, wobei bearbeitbare Attribute von Spalten hinzugefügt und einige Ereignisse gespeichert und gespeichert werden. Damit wurde der Code, den wir in der Branche bearbeitet haben, so.
Die Dateien, auf die verwiesen werden müssen, sind wie folgt:
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-edable rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script><script src="/Content/bootstrap/js/bootstrap.min.js"></script><script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script><script src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <script src = "/content/bootstrap-table/ src = "~/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"> </script>
1. Textfeld
$ (function () {$ ("#TB_USER"). Bootstrappable ({Toolbar: "#toolbar", IDField: "ID", Pagination: true, showRefresh: true, such: true, clickToSelect: true, queryparams: function (params (param) {return {};}; }. Datum = eval ('neu' + eval (value) .Source) return date.format ("yyyy-mm-dd"); "/Editable/bearbeiten", Daten: Datentyp: 'JSON', Erfolg (Daten, Status) {if (Status == "Erfolg") {alert ('erfolgreiche Einreichung von Daten');Die entsprechende Aktualisierungsmethode des Hintergrunds
public JsonResult Edit (Benutzer Benutzer) {// Aktualisierung von Entity return JSON (neu {}, jsonRequestBehavior.AllowGet); }Nach dem Test kann die Spalte Benutzername frei bearbeitet werden. In ähnlicher Weise kann die Altersspalte auch darauf geändert werden
{Feld: "Alter", Titel: "Age", bearbeitet: {Typ: 'Text', Titel: 'Age', Validate: Funktion (v) {if (isnan (v)) return 'Alter muss eine Zahl sein'; var age = parsesint (v); Wenn (Alter <= 0) das Alter 'Alter muss eine positive Ganzzahl sein'; }}}Für den Rest ist keine Änderung erforderlich.
Code Erläuterung: Die bearbeitbaren Parameter sind im oben genannten Attribut der Anfangspalten konfiguriert. Beachten Sie, dass das JSON-Objekt, das dem bearbeitbaren Attribut jeder Spalte entspricht, hier das initialisierte JSON-Objekt in x-eedierbar ist. Das heißt, welche Attribute können konfiguriert werden, wenn wir x-editable initialisieren, und das Gleiche kann im bearbeitbaren Attribut der Spalte konfiguriert werden, sodass es viel angenehmer ist. Die bearbeitete Einreichungsmethode wird gleichmäßig in das OneNeditableSave -Ereignis platziert, um sie gleichmäßig zu verarbeiten.
2. Zeitauswahlbox
Lassen Sie uns mit dem obigen Wissen als Grundlage die Geburtstagsspalte initialisieren:
{Feld: "Geburtstag", Titel: "Geburtstag", Formatter: Funktion (Wert, Zeile, Index) {var date = eval ('neu' + eval (value) .source) return date.format ("yyyy-mm-dd"); }, editable: {type: 'Date', Titel: 'Geburtstag'}}An anderer Stelle sind keine Änderungen erforderlich, um den Effekt zu erzielen:
Dies ist der Standardstil des X-Editable. Wenn Sie sich nicht glücklich fühlen, können Sie es selbst konfigurieren. x-editable bietet viele Parameter für die Konfiguration von Datumsboxen wie folgt:
Wenn die Zeit für die Zeit, Minuten und Sekunden korrekt ist, können Sie natürlich ein Bearbeitungsfeld mit DateTime -Typ verwenden. Das Folgende ist der offizielle Zeitrahmenbearbeitungseffekt, der ziemlich gut aussieht.
3. Pulldown Box
Es gibt ein weiteres wichtiges Tag in der Formbearbeitung, das ausgewählt wird. Wie oben erwähnt, wissen wir, dass x-editable uns einen Dropdown-Box-Bearbeitungsmodus bietet, beispielsweise kann die Bearbeitung dieser Spalte in unserer Abteilung so geschrieben werden:
{Feld: "Deptid", Titel: "Abteilung", bearbeitet: {Typ: 'Select', Titel: 'Abteilung', Quelle: [{value: "1", text: "r & d departy"}, {value: "2", text: "Verkaufsabteilung"}, {Wert: "3", Text: "Verwaltungsabteilung"}}}}}}}}}}}}}}}}Den Effekt erhalten
Natürlich kann diese Methode zum Einstellen von Datenquellen unsere Bedürfnisse nicht erfüllen, da in vielen Fällen die Optionen im Dropdown-Box aus der Datenbank aus der Ferne erhalten werden. Natürlich wurde X-Eeditable auch für uns in Betracht gezogen, zum Beispiel können wir Folgendes schreiben:
{Feld: "Deptid", Titel: "Abteilung", bearbeitet: {type: 'select', Titel: 'Abteilung', Quelle: function () {var result = []; $ .ajax ({url: '/editable/getDepartments', async: false, type: "get", data: {}, Erfolg: Funktion (Daten, Status) {$ .each (Daten, Funktion (Schlüssel, Wert) {result.push.push ({value ".id, text: value.name}); {});});}); Rückgabeergebnis; }}}}Wir konfigurieren eine Methode im Hintergrund
public JsonResult getDePartments () {var lstres = new List <Abreitabteilung> (); Lstres.Add (neue Abteilung () {id = "1", name = "r & d departy"}); lstres.add (neue Abteilung () {id = "2", name = "Verkaufsabteilung"}); lstres.add (neue Abteilung () {id = "3", name = "administrative Abteilung"}); lstres.add (neue Abteilung () {id = "4", name = "Creative Department"}); lstres.add (neue Abteilung () {id = "5", name = "Business Unit"}); return JSON (Lstres, JsonRequestBehavior.AllowGet); }Es kann auch die gewünschten Ergebnisse erzielen.
Code Frage: Hier ist eine Sache, die erklärt werden muss. Sorgfältige Gärtner haben vielleicht herausgefunden, dass unser Feld: "Deptidee" hier, warum sollten wir Deptid anstelle von Deptname konfigurieren? Es ist sehr einfach, da wir dem Wertwert in der Datenquelle entsprechen müssen.
4. Kontrollkästchen
Zusätzlich zu den oben genannten allgemeinen Bearbeitungsfeldern bietet uns X-Eeditable auch die Bearbeitung von Checkbox-Gruppen. Zum Beispiel:
{Feld: "Hobby", Titel: "Host", bearbeitet: {Typ: "Checkliste", Separator: ",", Quelle: [{value: 'bsb', text: 'basketball'}, {value: 'ftb', text: 'football'}, {value: 'wsm', text: 'swimming'}]Erhalten Sie den Effekt:
Wenn Sie Remotedaten haben, können Sie natürlich auch eine ähnliche Methode verwenden, um sie abzurufen.
5. Die "Geister verblassen nie" Select2
Apropos Kontrollkästchen oben, der Blogger konnte nicht anders, als an Dinge wie Multiselect zu denken. Deshalb suchte er nach dem X-eedierbaren Dokument und stellte fest, dass es Multiselect nicht unterstützt, sondern Select2 unterstützt, und ich weiß nicht, ob dies eine gute Nachricht ist. Basierend auf der eigenen Nutzungserfahrung des Bloggers und der Chat -Erfahrung in der technischen Kommunikationsgruppe stellte ich fest, dass viele Menschen bei der Verwendung von Select2 auf verschiedene Stilprobleme gestoßen sind, und es ist nicht einfach zu lösen.
Da x-editable select2 unterstützt, versuchen wir es. Wie auch immer, die offizielle Demo ist ziemlich gut. Hier ist ein Beispiel für die Verwendung der offiziellen Demo:
Mit einer nervösen Stimmung versuchte der Blogger es selbst.
Referenzauswahl2 -Datei
<link href = "~/content/select2-bootstrap.css" rel = "styleSheet"/> <link href = "~/content/select2-master/dist/css/select2.min.css" rel = "styleSheet"/> <script src = "~/select2-master/dist/js/JS/JS/JS/JS/JS/JS/JS/JS/JS/JS/JS/JS/JS/JS/JS.MIN.MIN.MIN"> <
Code -Versuch
{Feld: "Hobby", Titel: "Hobby", editable: {type: 'select2', Titel: 'Hobby', Name: 'Hobby', Placement: 'Top', Erfolg: Funktion (Antwort, NewValue) {Debugger; }, Fehler: Funktion (Antwort, NewValue) {Debugger; }, url: function (params) {debugger; }, Quelle: [{id: 'bsb', text: 'basketball'}, {id: 'ftb', text: 'football'}, {id: 'wsm', text: 'schwimmen'}], inputclass: 'input-large', select2: {dingelclear: true, multiple: true: true,}}}}}}}}}}}}}}}}}}}}Holen Sie sich das Ergebnis:
Es stellt sich heraus, dass der ausgewählte Wert von SELECT2 nicht normal an den Hintergrund übergeben werden kann. Wie auch immer, der Blogger hat verschiedene Parameter ausprobiert und gemäß der offiziellen Demo, und alle endeten im Scheitern. Ich weiß nicht, wie erfolgreich die offizielle Demo war. Diese Frage wird zuerst rausgeworfen. Wenn es Gärtner gibt, die es verwenden, korrigieren Sie es bitte und beantworten Sie es. Wenn der Blogger dieses Problem in Zukunft löst, wird es auch hier aktualisiert.
4. Zusammenfassung
Ein weiteres Problem ist, dass nach Abschluss der Bearbeitung und Einreichung der Blogger auf ein Problem im Projekt stieß: Wenn nach der Einreichung zu viel Textinhalt vorhanden ist, ist die Breite des TH -Tisches und die Breite des TD im TBODY nicht richtig, was ziemlich widerlich aussieht. Aber ich habe dieses Problem beim Schreiben von Demos nicht begegnet. Hier ist die Lösung.
Lösen Sie Ihre Probleme in nur einem Satz!
In diesem Artikel wird die Verwendung von Bootstrappable in Kombination mit X-Editier zur Implementierung der Inline-Bearbeitung vorgestellt. Viele der Fragen im Artikel werden auf der Grundlage der Erfahrung des Bloggers mit der Verwendung erläutert. Wenn Sie es verwenden möchten, können Sie es auch versuchen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es kann Ihnen helfen, die JS -Tabellenkomponenten -Artefakt -Bootstrap -Tabelle besser zu lernen.