Wie Datenfehler beim Laden mit bootstrap-Tabelle und x-editierbaren

Question

angezeigt werden Ich versuche, eine Bootstrap-Tabelle mit mehreren bearbeitbaren Feldern mit der bearbeitbaren (x-editierbaren) Erweiterung zu füllen. Die Felder werden von einer URL übernommen. Auf der Serverseite führen wir einige Validierungsprüfungen durch und geben ein Array zurück, dessen Felder Fehler enthalten.

Wie kann ich diese Fehler beim Laden der Seite mit dem bearbeitbaren Plug-in anzeigen? Damit die zweite Seite der Seite lädt, kann der Benutzer identifizieren, welche Daten falsch sind.

See example: JSFiddle

HTML

<table id="table"> 

</table> 

Javascript

var data = [ 
    { 
     "name": "bootstrap-table", 
     "stargazers_count": "526", 
     "forks_count": "122", 
     "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) ", 
     "errors": "{'name','stargazers_count','forks_count'}" 
    }, 
    { 
     "name": "multiple-select", 
     "stargazers_count": "288", 
     "forks_count": "150", 
     "description": "A jQuery plugin to select multiple elements with checkboxes :)", 
     "errors": "{}" 
    }, 
    { 
     "name": "bootstrap-show-password", 
     "stargazers_count": "32", 
     "forks_count": "11", 
     "description": "Show/hide password plugin for twitter bootstrap.", 
     "errors": "{'forks_count'}" 
    }, 
    { 
     "name": "blog", 
     "stargazers_count": "13", 
     "forks_count": "4", 
     "description": "my blog", 
     "errors": "{'stargazers_count', 'name'}" 
    }, 
    { 
     "name": "scutech-redmine", 
     "stargazers_count": "6", 
     "forks_count": "3", 
     "description": "Redmine notification tools for chrome extension.", 
     "errors": "{}" 
    } 
]; 

$(function() { 
    $('#table').bootstrapTable({ 
      columns: [ 
      { 
      field: 'name', 
      title: 'Name', 
      editable: { 
      type: 'text' 
      } 
      },{ 
      field: 'stargazers_count', 
      title: 'Stars', 
      editable: { 
      type: 'text' 
      } 
      },{ 
      field: 'forks_count', 
      title: 'Forks', 
      editable: { 
       type: 'text' 
      } 
      },{ 
      field: 'errors', 
      title: 'Errors', 
      } 
     ], 
     data: data 
    }); 
}); 

Um Ihnen ein weiteres Beispiel dafür, was ich zu tun versuche. Nehmen wir an, dass der Wert 'newName' im Feld 'name' in unserer Datenbank gespeichert wurde. Wenn wir auf unsere Seite mit der Bootstrap-Tabelle gehen, die alle Namen von Benutzern anzeigt, würde der mit dem Wert 'newName' rot hervorgehoben werden, und eine Fehlermeldung würde etwas wie "Fehler: newName ist nicht gültig, bitte ändern" sagen.

Ich weiß, dass jemand fragen wird, warum wir die Daten beim Speichern nicht validieren. In diesem Fall dürfen Benutzer ungültige Daten eingeben, die normalerweise keine Validierungsprüfungen bestehen (siehe Entwurfsdaten). Dies geschieht über eine andere Webseite. Zu einem späteren Zeitpunkt, sagen wir beim nächsten Login, entscheiden sie, dass sie mit den Entwurfsdaten fertig sind und bereit sind, sie einzureichen. Der Benutzer würde auf eine Senden-Schaltfläche klicken und zu dieser Seite weitergeleitet werden, um seine Daten zu überprüfen und zu korrigieren.

Answer 1

Die Bootstrap-Tabelle bietet die Formatierung Option, aber das scheint nicht mit der bearbeitbaren Erweiterung zu funktionieren (siehe https://github.com/wenzhixin/bootstrap-table/blob/develop/src/extensions/editable/bootstrap-table-editable.js#L65 für weitere Details).

Es ist immer noch möglich, zuerst den Formatierer für die Spalten und dann nach dem Nachrichtentext das Skript die Tabelle zu aktualisieren. Suchen Sie nach 'cfa', um die Erweiterungen im Snippet zu überprüfen.

/* begin cfa */ 
 
function errorFormatter(value, row, index) { 
 
    var thisCellValue = value; 
 
    var thisRowData = row; 
 
    var thisRowErrorsString = thisRowData.errors; 
 

 
    for (var aKey in thisRowData) { 
 
    if (thisRowData[aKey] == thisCellValue) { 
 
     if (thisRowErrorsString.indexOf(aKey) != -1) { 
 
     return value + ' has_errors'; 
 
     } 
 
    } 
 
    } 
 

 
    return thisCellValue; 
 
}; 
 
/* end cfa */ 
 

 
var data = [{ 
 
    "name": "bootstrap-table", 
 
    "stargazers_count": "526", 
 
    "forks_count": "122", 
 
    "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) ", 
 
    "errors": "{'name','stargazers_count','forks_count'}" 
 
}, { 
 
    "name": "multiple-select", 
 
    "stargazers_count": "288", 
 
    "forks_count": "150", 
 
    "description": "A jQuery plugin to select multiple elements with checkboxes :)", 
 
    "errors": "{}" 
 
}, { 
 
    "name": "bootstrap-show-password", 
 
    "stargazers_count": "32", 
 
    "forks_count": "11", 
 
    "description": "Show/hide password plugin for twitter bootstrap.", 
 
    "errors": "{'forks_count'}" 
 
}, { 
 
    "name": "blog", 
 
    "stargazers_count": "13", 
 
    "forks_count": "4", 
 
    "description": "my blog", 
 
    "errors": "{'stargazers_count', 'name'}" 
 
}, { 
 
    "name": "scutech-redmine", 
 
    "stargazers_count": "6", 
 
    "forks_count": "3", 
 
    "description": "Redmine notification tools for chrome extension.", 
 
    "errors": "{}" 
 
}]; 
 

 
$(function() { 
 
    $('#table').bootstrapTable({ 
 
    /* begin cfa */ 
 
    onPostBody: function() { 
 
     $('[data-value!=""]').each(function(each_element) { 
 
     var thisElement = this; 
 
     var thisElementDataValue = $(thisElement).data('value') + " "; 
 

 
     if (thisElementDataValue != null && thisElementDataValue.indexOf("has_errors") != -1) { 
 
      $(thisElement).data('value', thisElementDataValue.substring(0, thisElementDataValue.indexOf("has_errors"))); 
 
      $(thisElement).text(thisElementDataValue.replace('has_errors', 'is invalid')); 
 
      $(thisElement).css("color", "red"); 
 
     } 
 
     }); 
 
    }, 
 
    /* end cfa */ 
 
    columns: [{ 
 
     field: 'name', 
 
     title: 'Name', 
 
     editable: { 
 
     type: 'text' 
 
     }, 
 
     formatter: errorFormatter, /* cfa */ 
 
    }, { 
 
     field: 'stargazers_count', 
 
     title: 'Stars', 
 
     editable: { 
 
     type: 'text' 
 
     }, 
 
     formatter: errorFormatter, /* cfa */ 
 
    }, { 
 
     field: 'forks_count', 
 
     title: 'Forks', 
 
     editable: { 
 
     type: 'text' 
 
     }, 
 
     formatter: errorFormatter, /* cfa */ 
 
    }, { 
 
     field: 'errors', 
 
     title: 'Errors', 
 
    }], 
 
    data: data 
 
    }); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" /> 
 
<link href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> 
 

 
<table id="table"> 
 

 
</table> 
 
<hr> 
 
<div> 
 
    If the field name in bootstrapTable is equal to one of the items passed in the error array for that row, then highlight the appropriate cell in that row RED and display message "Error: (print value for that cell) is invalid". When a user clicks on the 
 
    item to edit it, they should still see the original text with a validation error asking them to change it. 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 
 
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script> 
 
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js"></script>