Examinons d'abord les effets de la table de bootstrap:
Le tableau est utilisé pour afficher les données de la base de données. Les données sont chargées à partir du serveur via AJAX. Dans le même temps, la fonction de pagination est implémentée par un serveur pour éviter la pagination du client et l'expérience utilisateur causée par une mauvaise charge de grandes quantités de données. Vous pouvez également définir l'heure de début et de fin de l'interrogation des données pour interroger les données pour une certaine plage de temps. La fonction d'édition en ligne est implémentée en étendant la table bootstrap et en utilisant X-Editable.
Il existe deux façons d'utiliser la table bootstrap:
1. Définir les attributs de données pour les tables ordinaires;
2. Activez le plug-in de table bootstrap via JavaScript.
La première méthode est très pratique, mais je préfère la deuxième méthode, qui peut séparer JS et HTML, et le code JS peut être réutilisé.
La documentation de la table bootstrap est relativement détaillée, mais il existe des contenus spécifiques qui doivent être trouvés dans l'exemple de code, etc.
Publiez d'abord le code d'implémentation pour l'avant et le backend, puis le présenter en détail.
Les fichiers de ressources requis par la réception incluent principalement des styles liés à Bootstrap3, des JS, des CSS, des JS et des styles et JS basés sur Bootstrap3 basés sur Bootstrap et JS:
<link rel = "Stylesheet" href = "../ actifs / bootstrap / css / bootstrap.min.css"> <link rel = "Stylesheet" href = "../ actifs / bootstrap-Table / src / bootstrap-table.css"> <link ling = "stylesheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src =" ../ actifs / jQuery.min.js "> </ script> <script src =" .. / script> script> src = "../ actifs / bootstrap-table / src / bootstrap-table.js"> </ script> <script src = "../ actifs / 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>
Le code HTML n'a besoin que
<table id = "QueryList"> </ table>
Code JS, code lié à la requête temporelle, une fois que l'heure de la requête est définie correctement, les données sont actualisées via la méthode de la table bootstrap:
$ ('# obligetData'). Cliquez sur (function () {$ ('# msg'). html (''); var begintime_ = $ ('# begintime'). val (); var endtime_ = $ ('# Endtime'). Val (); var err = ''; if (begintime_ == '' || fin) if (date.parse (EndTime _) - Date.Parse (Begintime_) <0) {ERR = 'Query Time Retting Error';} if (err) {$ ('# msg'). html (err + '!'); $ (# msg '). $ ('# queryList'). Bootstaptable ('Refresh'); $ ('# msg'). Fadeout (3000);JS lié à la table:
$ ('# QueryList'). bootstraptable ({colonnes: [{champ: 'metermasurehistoryid', title: 'id', sortable: true}, {champ: 'value', title: 'value', moditable: {type: 'text', valide ' }, {champ: 'horodatage', titre: 'Time', modifiable: {type: 'text', valider: function (valeur) {if ($. Formatrice: Fonction (Row, index) {var S = '<a class = "Save" href = "JavaScript: void (0)"> Enregistrer </a>'; 'MeterMeasonHistoryId', Sordeorder: 'DESC', Pagination: True, Sidepagination: 'Server', PageNumber: 1, PageSize: 5, PageList: [5, 10, 20], QueryParams: Function (Params) {return {Meterid: $ ('# meterid'). Begintime: $ ('# begintime'). Val (), Fintime: $ ('# Endtime'). Val ()}}, URL: '/analyze/GetJSonHistoryDatas' }) ;window.opeateEnts = {' cliquez. '/ Analyser / editMeterEpreashistoryData', Success: Function (data) {alert ('modifié avec succès');}}); }, 'cliquer .remove': function (e, valeur, ligne, index) {$ .ajax ({type: "post", data: row, url: '/ analyser / deletemetereashehistorydata', réussite: function (data) {alert ('supprimer réussi'); $ ('# queryList'). [Row.MeterMeasonHistoryId]});}}); }};Le paramètre des colonnes définit toutes les colonnes de la table et les paramètres de chaque colonne. Le champ correspond à la valeur clé des données renvoyées par JSON et les paramètres de colonne dans la table bootstrap; Le nom de colonne affiché selon le titre; Le paramètre triable est trié en fonction de la colonne actuelle; Le formateur définit le format de chaque cellule dans la colonne; Le paramètre modifiable est la méthode d'édition de la cellule de colonne actuelle, et la méthode de vérification validée peut également être définie.
Par conséquent, la table réelle est définie sur quatre colonnes, triée en fonction de la première colonne, les colonnes 2 et 3 peuvent être modifiées, le type est défini sur le texte et d'autres types peuvent être utilisés au besoin. Les données de vérification de la deuxième colonne ne peuvent pas être vides et la valeur d'entrée de vérification de la troisième colonne est le temps; Le contenu des colonnes 1, 2 et 3 provient des données JSON renvoyées par le serveur; La quatrième colonne est l'opération de données sur la ligne actuelle, et l'événement d'écoute OperateEvents est ajouté et lié à la fenêtre.
SortName est défini sur la valeur du champ dans la colonne 1;
SortOrder est défini sur l'ordre inversé;
La pagination est vraie pour la pagination;
Sidepagination représente la pagination du serveur;
PageNumber indique la page de démarrage par défaut;
PageSize représente le nombre de données affichées par page;
PageList représente le nombre facultatif de données affichées par page;
QueryParams signifie que chaque paramètre envoyé au serveur peut être ajouté aux paramètres dont vous avez besoin;
L'URL est l'adresse de demande des données.
Vérifiez Bootstrap-Table.js et vous pouvez voir les paramètres de paramètres par défaut:
Bootstraptable.prototype.initServer = fonction (silent, query) {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 = {search: params.searchText, tri: params.sortName, ordre: 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); }}L'arrière-plan du serveur implémente trois fonctions, l'une est de charger en fonction des données, ainsi que de modifier et de supprimer les données.
public ActionResult getjsonHistoryDatas () {var displayStart = int.parse (request ["offset"]); var displayLength = int.parse (request ["pagesize"]); var meterid = int.parse (request ["meterid"]); var ordonnance = request ["sortOrder"]; var HistoryDatas = db.Meteraskeashehistories. Où (p => p.MeterMeason.MeterId == Meterid). OrderByDescending (p => P.timestamp). Skip (DisplayStart). Take (displayLength) .tolist (); // affiche les données d'affichage les plus récentes if ("ASC" == Ordre) {HistoryDatas = db.MeterMeasonHistories. Où (p => p.MeterMeason.MeterId == Meterid). OrderBy (p => p.timestamp). Skip (DisplayStart). Take (displayLength) .tolist (); // montre les premières données DisplayLength} int HistoryDatatotal = db.MeterasureHistories. Où (p => p.MeterMeason.MeterId == Meterid) .Count (); // Nombre total de données // Filtrage de temps if (! String.isnullorempty (request ["begintime"])) {DateTime begintime = DateTime.Parse (request ["begintime"]); DateTime EndTime = DateTime.Parse (Demande ["Fintime"]); HistoryDatas = DB.MeterasonHistories. Où (p => p.MeterMeason.MeterId == Meterid). Où (p => p.timestamp> begintime && p.timestamp <endtime). OrderByDescending (p => P.timestamp). Skip (DisplayStart). Take (displayLength) .tolist (); // affiche les données de bande DisplayLength les plus récentes if ("ASC" == Ordre) {HistoryDatas = db.MeterMeasonHistories. Où (p => p.MeterMeason.MeterId == Meterid). Où (p => p.timestamp> begintime && p.timestamp <endtime). OrderBy (p => p.timestamp). Skip (DisplayStart). Take (displayLength) .tolist (); // montre les premières données DisplayLength} HistoryDatatotal = db.Meterasheasehistories. Où (p => p.MeterMeason.MeterId == Meterid). Où (p => p.timestamp> begintime && p.timestamp <endtime) .Count (); // nombre total de données} liste <METERMEASEHISTORYDATAVIEWMODELS> ListMeterasheaseHistories = nouvelle liste <MetermEastoryDataviewModels> (); foreach (var item in HistoryDatas) {listMeterasheashehistories.add (new menermEasureHistoryDataViewModels {metermEasureHistoryId = item.MeterMeaseHistoryId, value = item.value, horodatamp = item.timestamp.toString ()}); } string jSondataTable = JSONConvert.SerializeObject (new {total = historyDatatotal, Rows = listMeterAllEhistories}); return contenu (jSondatatable);}Il implémente la pagination et la requête de données et renvoie les données JSON. Les données JSON renvoyées comprennent deux objets: Total et lignes. Le total représente le nombre total de données et les lignes représentent les données à afficher. METERMEASEHistoryDateView est le suivant, correspondant à la valeur du champ dans le tableau:
classe publique MentheaseashehistoryDataviewModels {public int meneteraSeHistoryId {get; ensemble; } public double valeur {get; ensemble; } Timestamp de chaîne publique {get; ensemble; }}Fonction de modification des données:
[Httppost] public JSonResult EditMeterasherHistoryData () {var meterestehistoryid = int.parse (request ["metermasureHistoryId"]); var meteresteHistoryValue = double.parse (demande ["valeur"]); var meterestehistorytime = datetime.parse (request ["horodat"]); var meterestehistoryInDB = db.Meterasheashehistory.find (MetereSteHistoryId); MetereaspreashehistoryInDB.Value = MetereStorseHistoryValue; METERESTEAUSEHISTORYINDB.TIMESTAMP = METERESTEAUSEHISTORYTHILE; DB.SAVECHANGES (); var changédata = new metermEasureHistoryDataviewModels {metermEasureHistoryId = MeterestreasureHistoryInDB.MeterasheasehistoryId, value = meteresastEpasehistoryInDB.Value, TimeStamp = MeteResSeasheSeHistoryInDB.timestamp.ToString ()}; JSONRESULT JS = NOUVEAU JSONRESULT (); jsdata = json (changédata); retourner js;}Fonction de suppression des données:
[Httppost] public JSonResult DeleteMetEtreashehistoryData () {var meterestehistoryid = int.parse (request ["metermasureHistoryId"]); db.MetermasureHistory.remove (db.MeterasureHistory.find (MeteresteHistoryId)); DB.SAVECHANGES (); var deletedData = new metermEasureHistoryDataViewModels {metermEasureHistoryId = MetereStorseHistoryId, value = 0, horodatamp = null}; JSONRESULT JS = NOUVEAU JSONRESULT (); Js.Data = DeletedData; retourner js;}Une fois le serveur supprimé, le premier plan supprime la ligne de données spécifiée via la méthode de la table bootstrap.
J'ai utilisé ces choses en ce moment. Pour résumer le processus d'apprentissage, je recherche des documents officiels, des exemples, voir le code source et apprendre à utiliser des outils de développeur Chrome pour afficher les sources et le réseau.
Ce qui précède est le résumé de la pagination de la pagination du serveur de table bootstrap et de l'application d'édition en ligne introduite par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!