Préface: lorsque j'ai présenté le composant bootstaptable auparavant, j'ai mentionné sa fonction d'édition en ligne, mais dans le but d'afficher la fonction, j'ai repris cela et j'ai dit que c'était un péché! Récemment, je prévois toujours d'utiliser l'édition en ligne dans le projet, j'ai donc étudié à nouveau le composant X-Editable. J'ai rencontré des pièges, alors enregistrons les stands ici! Les amis qui veulent savoir sur bootstaptable peuvent passer à la série de composants JS - Table Composant Artefact: Bootstrap Table.
1. Introduction à la composante X-édifiante
Le composant X-EDIT est un plug-in pour créer des boîtes contextuelles modifiables. Il prend en charge trois styles: Bootstrap, jQuery UI et jQuery. L'effet général est le suivant:
Selon le style habituel du blogueur, le premier doit être choisi ici. Tout d'abord, donnez l'adresse open source.
Adresse open source X-Editable: https://github.com/vitalets/x-editable
Adresse du document X-éditable: http://vitalets.github.io/x-editable/docs.html
Demo en ligne X-Editable: http://vitalets.github.io/x-editable/demo-bs3.html
1. Première expérience de X-Editable
Téléchargez d'abord le code source basé sur Bootstrap vers la zone locale. Références aux fichiers pertinents.
<link href = "/ contenu / bootstrap / css / bootstrap.min.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap3-éditable / css / bootstrap-editable.css" rel = "Stylesheet" /> <script src = "/ scripts / jquery-1.9.1.min.js"> </ script> <script src = "/ contenu / bootstrap / js / bootstrap.min.js"> </ script> <script src = "~ / contenu / bootstrap3-editable / js / bootstrap-editable.js"> </ script>
Éléments de page
Copiez le code comme suit: <a href = "#" id = "username" data-type = "text" data-title = "username"> username </a>
Initialisation JS
$ (function () {$ ('# username'). editable ();});Affichage d'effet
Ce qui précède consiste à définir les paramètres X-éditables via l'attribut de données HTML. Bien sûr, je peux également définir les paramètres lors de l'initialisation. Par exemple, je donne juste une balise vide: <a href = "#" id = "nom d'utilisateur"> nom d'utilisateur </a>
Initialisation JS
$ (function () {$ ('# username'). editable ({type: "texte", // le type de la zone d'édition. Texte de support | TextArea | Sélectionner | Date | Liste de contrôle et autres titres: "Username", // Le titre de la boîte d'édition a été désactivé: FALS et mode en ligne, la valeur par défaut est popup: function (valeur) {// Vérification de champ if (! $.Voir l'effet
Ayons un légèrement plus compliqué
<a href = "#" id = "département"> Département sélectionné </a>
$ (function () {$ ('# département'). modifiable ({type: "select", // le type de boîte d'édition. Titre: "SELECT Department", // Le titre de la boîte d'édition désactivée: False, // Ne désactivez pas l'édition vide: "Texte vide", // Le mode texte par défaut de la valeur vide: "Popup", // Le mode de modification de la boîte: prend en charge le mode popup et en ligne, la valeur par défaut est Popup Validate: fonction (valeur) {// Field Verification if (! $. });Voir l'effet
L'article ci-dessus ne donne que certains champs couramment utilisés. Bien sûr, le composant X-Editable a de nombreux autres paramètres fonctionnels. Si vous êtes intéressé, vous pouvez vérifier la documentation. La documentation officielle a des descriptions détaillées pour chaque paramètre.
2. Plan initial bootstaptable pour l'édition en ligne
Après avoir parlé pendant longtemps, ce qui précède n'est qu'un prélude. Nous espérons finalement mettre en œuvre l'édition en ligne en bootstraptable. Selon les règles ci-dessus, si nous voulons utiliser X-Editable pour implémenter l'édition en ligne, il doit y avoir une balise A dans la cellule du tableau, puis la balise A est initialisée. Avec cette idée, essayons d'abord de cette façon.
Citer les fichiers connexes
<link href = "/ content / bootstrap / css / bootstrap.min.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap3-éditable / css / bootstrap-editable.css" rel = "Stylesheet" /> <lin rel = "Stylesheet" /> <script src = "/ scripts / jQuery-1.9.1.min.js"> </ script> <script src = "/ contenu / bootstrap / js / bootstrap.min.js"> </ script> <script src = "~ / contenu / boootstrap3-editable / js / bootstrap-edit-edit src = "~ / contenu / bootstrap-table / bootstrap-table.js"> </ script> <script src = "/ contenu / bootstrap-table / locale / bootstrap-table-zh-cn.js"> </ script>
Initialisation connexe de l'amorçage
<script type = "text / javascript"> var currow = {}; $ (function () {$ ("# tb_user"). bootstraptable ({barre d'outils: "#toolbar", idfield: "id", pagination: true: showRefresh: true, search: true, clicktoselect: true, queryparams: function (param) {return {};}, url: "/ editable / getusrs", colonnes: [};}, url: "/ editable / Getusrs", colonnes: [};}, url: "/ editable / Getusrs", colonnes: [}; }, { 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", Titre: "Age",}, {Field: "Birthday", Title: "Birthday", Formatter: Function (Value, Row, Index) {var Date = EVAL ('New' + Eval (Value). }], onClickRow: fonction (row, $ element) {currow = row;}, onloadsuccess: function (aa, bb, cc) {$ ("# tb_user a"). 'Post', URL: "/ editable / edit", data: currow, dataType: 'json', function (dataMéthode backend
Méthode de test de fond
public JSonResult getUsers () {var lstres = new list <ser user> (); lstres.add (nouvel utilisateur () {id = "1", username = "zhang san", age = 22, anniversaire = convert.todatetime ("1994-12-21"), deptid = "1", deptName = "R&D Department"}); lstres.add (nouvel utilisateur () {id = "2", username = "li si", age = 28, anniversaire = convert.todatetime ("1988-09-09"), deptid = "2", deptname = "Sales Department"}); lstres.add (nouvel utilisateur () {id = "3", username = "wrestle coat oncle", age = 40, anniversaire = convert.todatetime ("1976-09-01"), deptid = "2", deptname = "Sales Department"}); lstres.add (new User () {id = "4", username = "Lightning Prawn", age = 37, anniversaire = convert.todatetime ("1979-03-12"), deptid = "4", deptname = "Creative Department"}); lstres.add (nouvel utilisateur () {id = "5", username = "han meimei", age = 29, anniversaire = convert.todatetime ("1987-05-01"), deptid = "5", deptname = "Business Department"}); return json (lstres, jsonrequestbehavior.allowget); } public JSonResult Edit (utilisateur utilisateur) {// Mettez à jour le retour après désérialisation JSON (new {}, jsonRequestBavior.Allowget); }Cela peut en effet réaliser l'effet souhaité, et il semble qu'il puisse également être modifié dans la ligne, mais s'il n'y a pas de colonnes qui nécessitent l'édition dans la ligne et qu'il y a de nombreuses colonnes, alors cela prend-il pour chaque colonne de formater la même manière? Et ce genre d'écriture est évidemment rigide, ce qui est vraiment difficile à accepter pour les blogueurs. J'ai donc cherché un exemple et j'ai constaté que le JS Bootstrap-Table-Editable.js existe dans l'extension du bootstraptable.
3. Plan final d'édition bootstaptable
Eh bien, le blogueur admet que ce qui précède est toujours un prélude, car le blogueur pense que cela peut être une idée générale pour résoudre le problème, donc la durée de ces préludes peut être un peu trop. Tout d'abord, jetons un coup d'œil au fichier bootstrap-pable-éditable.js:
/ ** * @author zhixin wen <[email protected]> * Extensions: https://github.com/vitalets/x-editable * /! function ($) {'use strict'; $ .Extend ($. fn.bootstraptable.defaults, {editable: true: OneDitableInit: function () {return false;}, OneDitableAave: function (field, row, oldvalue, $ el) {return false;}, OneDitintshown: function (field, row, el, indem raison) {return false;}}); $ .extend ($. fn.bootstraptable.constructor.events, {'editable-nit.bs.table': 'OneDitableInit', 'editable-Save.bs.Table': 'OneDitables', 'editable-swows.bs.table': 'onDeditableShown', 'indiable-Hidden.bs.Table' ':' oneditablehend '); indemaire.BS.Table' ':' oneditHidden '); var bootstraptable = $ .fn.bootstraptable.constructor, _inittable = bootstraptable.prototype.initable, _initbody = bootstraptable.prototype.initbody; Bootstraptable.prototype.Inttable = function () {var that = this; _Initable.Apply (this, array.prototype.slice.apply (arguments)); if (! this.options.editable) {return; } $ .each (this.columns, function (i, colnumn) {if (! Column.editable) {return;} var _formatter = colonnen.formatter; chronn.formatter = function (value, row, index) {var result = _formatter? _formatter (value, row, index): value; return ['<a href = "javascrip Column.field + '"', 'data-pk ="' + row [that.options.idfield] + '"', 'data-valeue ="' + result + '"', '>' + '</a>'] .join (');};}); }; Bootstraptable.prototype.initbody = function () {var that = this; _InitBody.Apply (this, array.prototype.slice.apply (arguments)); if (! this.options.editable) {return; } $.each(this.columns, function (i, column) { if (!column.editable) { return; } that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) .off('save').on('save', function (e, params) { var data = that.getData(), index = $ (this) .parents ('tr [data-index]'). data (index '), row = data [index], oldvalue = row [Column.field]; Column.field + '"]'). Editable (Column.EDITT) .off ('montré'). sur ('montré', fonction (e, editable) {var data = that.getData (), index = $ (this) .parents ('tr [data-indice]'). data ('index'), row = data [index]; that.trigger (editable-shown ', chlumn.field, chronique, row, $,. }); that.trigger ('editable-hidden', colonnes.field, row, $ (this), raisonnement);}); this.trigger («modifitable-initi»); };} (jQuery);
Ce JS fait en fait une encapsulation simple de X-éditable, ajoutant des attributs modifiables des colonnes et l'édition et la sauvegarde de certains événements. Avec cela comme base, le code que nous avons édité dans l'industrie est devenu ainsi.
Les fichiers qui doivent être référencés sont les suivants:
<link href = "/ content / bootstrap / css / bootstrap.min.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap3-éditable / css / bootstrap-editable.css" rel = "Stylesheet" /> <lin rel = "Stylesheet" /> <script src = "/ scripts / jQuery-1.9.1.min.js"> </ script> <script src = "/ contenu / bootstrap / js / bootstrap.min.js"> </ script> <script src = "~ / contenu / boootstrap3-editable / js / bootstrap-edit-edit src = "~ / contenu / bootstrap-table / bootstrap-table.js"> </ script> <script src = "/ contenu / bootstrap-table / locale / bootstrap-table-zh-cn.js"> </ script> <script src = "/ content / bootstrap-table / src = "~ / contenu / bootstrap-table / extensions / editable / bootstrap-table-ditable.js"> </ script>
1. Box de texte
$ (function () {$ ("# tb_user"). bootstraptable ({barre d'outils: "#toolbar", idfield: "id", pagination: true: showRefresh: true, search: true, clicktoselect: true, queryparams: function (param) {return {};}, url: "/ editable / getusrs", colonnes: [};}, url: "/ editable / Getusrs", colonnes: [};}, url: "/ editable / Getusrs", colonnes: [}; }, {champ: "nom d'utilisateur", titre: "nom d'utilisateur", modifiable: {type: 'text', titre: 'username', valider: function (v) {if (! v) return 'username ne peut pas être vide'; Date = EVAL ('New' + eval (valeur) .Source) return date.format ("yyyy-mm-dd"); "/ Editable / edit", data: row, datatype: 'json', Success: function (data, status) {if (status == "Success") {alert ('la soumission réussie des données');}}, error: function () {alert ('edit failli');La méthode de mise à jour correspondante de l'arrière-plan
public JSonResult Edit (utilisateur utilisateur) {// Update Entity return JSON (new {}, jsonRequestBehavior.Allowget); }Après les tests, la colonne du nom d'utilisateur peut être modifiée librement. De même, la colonne d'âge peut également être modifiée pour cela
{Field: "Age", Title: "Age", modifiable: {Type: 'Text', Title: 'Age', valider: function (v) {if (isnan (v)) return 'L'âge doit être un nombre'; var age = paSeInt (v); si (âge <= 0) return «L'âge doit être un entier positif»; }}}Aucune modification n'est requise pour le reste.
Explication du code: Les paramètres modifiables sont configurés dans l'attribut des colonnes initiales ci-dessus. Notez que l'objet JSON correspondant à l'attribut modifiable de chaque colonne ici est l'objet JSON initialisé dans X-EdIT. C'est-à-dire que les attributs peuvent être configurés lorsque nous initialisons X-Editable, et il en va de même pour être configuré dans l'attribut modifiable de la colonne, il sera donc beaucoup plus agréable à utiliser. La méthode de soumission éditée est uniformément placée dans l'événement Oneditables pour le gérer uniformément.
2. Boîte de sélection du temps
Avec les connaissances ci-dessus comme base, initialisons la colonne d'anniversaire:
{champ: "anniversaire", titre: "anniversaire", format: function (valeur, ligne, index) {var date = eval ('new' + eval (valeur) .source) return date.format ("yyyy-mm-dd"); }, modifiable: {type: 'date', titre: 'anniversaire'}}Aucune modification n'est requise ailleurs pour obtenir l'effet:
Ceci est le style par défaut de X-Editable. Si vous ne vous sentez pas heureux, vous pouvez le configurer vous-même. X-EDITS fournit de nombreux paramètres pour configurer les boîtes de date, comme suit:
Bien sûr, si l'heure est exacte pour le temps, les minutes et les secondes, vous pouvez utiliser une boîte d'édition de type DateTime. Ce qui suit est l'effet de modification officiel du délai, qui a l'air plutôt bien.
3. Tirez la boîte
Il existe une autre balise importante dans l'édition de formulaire, qui est sélectionné. Comme mentionné ci-dessus, nous savons que X-Editable nous fournit un mode d'édition de boîte déroulant, par exemple, l'édition de cette colonne de notre département peut être écrite comme ceci:
{Field: "Deptid", Title: "Department", modifiable: {type: 'select', Title: 'Department', Source: [{Value: "1", Text: "R&D Department"}, {Value: "2", Text: "Sales Department"}, {Value: "3", Text: "Administrative Department"}}}}}}, {Value: "3", Text: "Administrative Department"}}}}}}, {Value: "3", Text: "Administrative Department"}]}}}Obtenir l'effet
Bien sûr, cette méthode de définition des sources de données localement ne peut pas répondre à nos besoins, car dans de nombreux cas, les options de la boîte déroulante sont obtenues à distance à partir de la base de données. Bien sûr, X-Editable a également été pris en compte pour nous, par exemple, nous pouvons écrire ceci:
{champ: "Deptid", titre: "département", modifiable: {type: 'select', titre: 'département', source: function () {var result = []; $ .ajax ({url: '/ editable / getDepartments', async: false, type: "get", data: {}, succès: function (data, status) {$ .each (data, function (key, value) {result.push ({value: value.id, text: value.name});});}}); Résultat de retour; }}}}Nous configurons une méthode en arrière-plan
public JSonResult getDepartments () {var lstres = new list <p un département> (); lstres.add (nouveau département () {id = "1", name = "R&D Department"}); lstres.add (nouveau département () {id = "2", name = "Sales Department"}); lstres.add (nouveau département () {id = "3", name = "département administratif"}); lstres.add (nouveau département () {id = "4", name = "Creative Department"}); lstres.add (nouveau département () {id = "5", name = "Unit Business"}); return json (lstres, jsonrequestbehavior.allowget); }Il peut également obtenir les résultats que nous voulons.
Question du code: Voici une chose qui doit être expliquée. Des jardiniers prudents ont peut-être découvert que notre champ: "Deptid" ici, pourquoi devrions-nous configurer Deptid au lieu de Deptname? C'est très simple, car nous devons correspondre à la valeur de valeur dans la source de données.
4. Box
En plus des boîtes d'édition communes mentionnées ci-dessus, X-EDIT nous fournit également l'édition des groupes à cocher. Par exemple:
{Field: "Hobby", titre: "hôte", modifiable: {type: "list list", séparateur: ",", source: [{valeur: 'bsb', texte: 'Basketball'}, {valeur: 'ftb', texte: 'football'}, {value: 'wsm', texte: 'nager'}],}}Obtenez l'effet:
Bien sûr, si vous avez des données distantes, vous pouvez également utiliser une méthode similaire à celle ci-dessus pour la récupérer.
5. Les "fantômes ne se fanent jamais"
En parlant de la case ci-dessus, le blogueur ne pouvait s'empêcher de penser à des choses comme Multiselect, alors il a recherché le document X-Editable, et a constaté qu'il ne prend pas en charge Multiselect, mais prend en charge Select2, et je ne sais pas si c'est une bonne nouvelle. Sur la base de la propre expérience d'utilisation du blogueur et de l'expérience de chat dans le groupe de communication technique, j'ai constaté que de nombreuses personnes avaient rencontré divers problèmes de style lors de l'utilisation de Select2, et il n'est pas facile de résoudre.
Étant donné que X-EDITS prend en charge Select2, essayons-le. Quoi qu'il en soit, la démo officielle est plutôt bonne. Voici un exemple d'utilisation de la démo officielle:
Avec une humeur nerveuse, le blogueur l'a essayé lui-même.
Fichier de référence SELECT2
<link href = "~ / contenu / select2-bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / select2-master / dist / css / select2
Code d'essayer
{Field: "Hobby", Titre: "Hobby", modifiable: {Type: 'Select2', Titre: 'Hobby', Name: 'Hobby', Placement: 'Top', Success: Function (Response, NewValue) {Debugger; }, erreur: fonction (réponse, newValue) {Debugger; }, url: fonction (params) {Debugger; }, source: [{id: 'bsb', texte: 'basketball'}, {id: 'ftb', texte: 'football'}, {id: 'wsm', texte: 'natation'}], inputclass: 'input-gl', select2: {allowClear: true, multiple:}}}}Obtenez le résultat:
Il s'avère que la valeur sélectionnée de Select2 ne peut pas être transmise à l'arrière-plan normalement. Quoi qu'il en soit, le blogueur a essayé divers paramètres et selon la démo officielle, et ils se sont tous terminés par un échec. Je ne sais pas comment la démo officielle a réussi. Cette question est d'abord jetée. S'il y a des jardiniers qui l'utilisent, veuillez y corriger et y répondre. Si le blogueur résout ce problème à l'avenir, il sera également mis à jour ici.
4. Résumé
Un autre problème est qu'après la fin de l'édition et de la soumission, le blogueur a rencontré un problème dans le projet: s'il y a trop de contenu texte après la soumission, la largeur du TH dans la tête du tableau et la largeur du TD dans le TBODY n'est pas correcte, ce qui semble assez dégoûtant. Mais je n'ai pas rencontré ce problème lors de l'écriture de démos. Voici la solution.
Résolvez vos problèmes en une seule phrase!
Cet article introduit l'utilisation de bootstaptables combinés avec X-EDIT pour implémenter l'édition en ligne. De nombreuses questions de l'article sont expliquées sur la base de l'expérience du blogueur de l'utilisation. Si vous prévoyez de l'utiliser, vous pouvez également l'essayer.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article. J'espère que cela peut vous aider à mieux apprendre la table de bootstrap d'artefacts de composant JS Table.