Primero veamos los efectos de la tabla de arranque:
La tabla se utiliza para mostrar los datos en la base de datos. Los datos se cargan desde el servidor a través de AJAX. Al mismo tiempo, la función de paginación es implementada por un servidor para evitar la paginación del cliente y la experiencia del usuario causada por una pobre carga de grandes cantidades de datos. También puede establecer el tiempo de inicio y finalización de los datos de consulta para consultar datos para un cierto rango de tiempo. La función de edición en línea se implementa extendiendo la tabla Bootstrap y utilizando X-Editable.
Hay dos formas de usar la tabla Bootstrap:
1. Establezca atributos de datos para tablas ordinarias;
2. Habilite el complemento de la tabla Bootstrap a través de JavaScript.
El primer método es muy conveniente, pero prefiero el segundo método, que puede separar JS y HTML, y el código JS puede reutilizarse.
La documentación de la tabla de arranque es relativamente detallada, pero hay algunos contenidos específicos que deben encontrarse en el código de muestra, etc.
Primero publique el código de implementación para el frente y el backend, y luego preséntelo en detalle.
Los archivos de recursos requeridos por la recepción incluyen principalmente estilos relacionados con Bootstrap3, JS, CSS, JS y JS basados en Bootstrap3 basados en la mesa de Bootstrap:
<link rel = "Stylesheet" href = "../ assets/bootstrap/css/bootstrap.min.css"> <link rel = "stylesheet" href = "../ assets/bootstrap-table/src/bootstrap-table.css"> <link rel = "stylesheet" "" "" "" "" "" "" "" "" "" "" "" "" "" "" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src =" ../ assets/jQuery.min.js "> </script> <script src =" ../ assets/bootstrap/js/bootstrap.min.mins " 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-editable/js/bootstrap-editable.js"> </script>
El código HTML solo necesita
<Tabla id = "QueryList"> </table>
Código JS, código relacionado con la consulta de tiempo, después de que el tiempo de consulta se establece correctamente, los datos se actualizan a través del método de tabla de arranque:
$ ('#SubtItgetData'). Click (function () {$ ('#msg'). Html (''); var BegInTime_ = $ ('#BegInTime'). Val (); var endtime_ = $ ('#endtime'). val (); var err = '' '; if (begeTime_ ==' '' || if (date.Parse (endtime _)-date.Parse (BegIntime_) <0) {err = 'Error de configuración de tiempo de consulta'; $ ('#QueryList').JS relacionado con la tabla:
$ ('#queryList'). BootStraptable ({columns: [{campo: 'meterMeaseHistoryId, title:' id ', sortable: true}, {campo:' valor ', title:' valor ', editable: {type:' text ', validate: function (valor) {if ($. trim (valor) ==' ') }, {campo: 'timestamp', title: 'time', editable: {type: 'text', validate: function (value) {if ($. Trim (valor) Formatter: function (valor, fila, índice) {var s = '<a class = "save" href = "javascript: void (0)"> save </a>'; 'MetermreasureHistoryId', sortOrder: 'Desc', Pagination: True, SidePagination: 'Server', PageNumber: 1, PageSize: 5, PageList: [5, 10, 20], QeryParams: function (Params) {return {meterid: $ ('#meterid'). Val (), PageSize: params.limit, offset: params.ofts. BegIntime: $ (''#Begintime '). Val (), EndTime: $ ('#endtime '). val ()}}, url:' /analyze/getjsonhistorydatas'ht.);window.operereEvents = {{'click .save': function (e, valor, row, índice) {$ .AJAX ({type: "Post", Data, Row, orl, url '/Analizar/editMeTermeaseHistoryData', éxito: function (data) {alerta ('modificado con éxito'); }, 'Haga clic en .remove': function (e, value, fila, index) {$ .AJAX ({type: "post", data: fila, url: '/analze/deletemetermreasureShistoryData', éxito: function (data) {alert ('delete'); $ ('#Querylist'). [Row.MeTermeaseHistoryId]}); }};El parámetro de las columnas establece todas las columnas de la tabla y los parámetros de cada columna. El campo corresponde al valor clave de los datos devueltos por JSON y los parámetros de la columna en la tabla de arranque; El nombre de la columna se muestra según el título; La configuración ordenable se clasifica de acuerdo con la columna actual; El formato establece el formato de cada celda en la columna; La configuración editable es el método de edición de la celda de la columna actual, y el método de verificación de validar también se puede establecer.
Por lo tanto, la tabla real se establece en cuatro columnas, ordenadas de acuerdo con la primera columna, se pueden editar las columnas 2 y 3, el tipo se establece en texto y se pueden usar otros tipos según sea necesario. Los datos de verificación de la segunda columna no pueden estar vacíos, y el valor de entrada de verificación de la tercera columna es el tiempo; El contenido de las columnas 1, 2 y 3 proviene de los datos JSON devueltos por el servidor; La cuarta columna es la operación de datos en la fila actual, y se agrega el evento de escucha que funciona y se une a la ventana.
SortName se establece en el valor de campo en la columna 1;
SortOrder está configurado en orden inverso;
La paginación es cierta para la paginación;
La paginación lateral representa la paginación del servidor;
PageNumber indica la página de inicio predeterminada;
PageSize representa el número de datos que se muestran por página;
La pageList representa el número opcional de datos que se muestran por página;
Querams significa que cada parámetro enviado al servidor se puede agregar a los parámetros que necesita;
La URL es la dirección de solicitud de los datos.
Verifique Bootstrap-Table.js y puede ver los parámetros de parámetros predeterminados:
Bootstraptable.prototype.initserver = function (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, sort: params.sortname, orden: 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); }}El fondo del servidor implementa tres funciones, una es cargar según los datos, así como modificar y eliminar datos.
Public ActionResult getJsonHistoryDatas () {var displayStart = int.Parse (request ["offset"]); var displayLength = int.Parse (request ["PageSize"]); var meterid = int.parse (request ["meterid"]); Var orden = request ["sortOrder"]; var HistoryDatas = DB.MeMeMesureShistories. Donde (p => p.metermasure.meterID == meterid). OrderByDescending (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Muestre los datos de longitud de pantalla más recientes if ("ASC" == orden) {HistoryDatas = db.MeTermeaseHistories. Donde (p => p.metermasure.meterID == meterid). Orderby (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Mostrar los datos más tempranos de la longitud} int HistoryDatotal = db.MeTermeaseHistories. Donde (p => p.metermasure.meterID == meterid) .count (); // número total de datos // filtrado de tiempo if (! String.isNullorEmpty (request ["begInTime"])) {DateTime BegInTime = DateTime.Parse (request ["Begintime"]); DateTime EndTime = DateTime.Parse (solicitud ["EndTime"]); HistoryDatas = DB.MeMeMasureHistories. Donde (p => p.metermasure.meterID == meterid). Donde (p => p.timestamp> begIntime && p.timestamp <endtime). OrderByDescending (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Muestre los datos de tira de longitud más recientes si ("ASC" == orden) {HistoryDatas = db.MeTermaseasehistories. Donde (p => p.metermasure.meterID == meterid). Donde (p => p.timestamp> begIntime && p.timestamp <endtime). Orderby (p => p.timestamp). Skip (DisplayStart). Take (DisplayLength) .tolist (); // Mostrar los datos más tempranos de la longitud} HISTORYDATATAL = DB.MeTermeaseHistories. Donde (p => p.metermasure.meterID == meterid). Donde (p => p.timestamp> begIntime && p.timestamp <endtime) .count (); // Número total de datos} Lista <TermeaseHistoryDataViewModels> ListMetMeaseHistories = nueva lista <SetermaseShistoryDataViewModels> (); foreach (var item en HistoryDatas) {ListMetMeaseHistories.Add (nuevo meterMeaseHistoryDataViewModels {metermreasureHistoryId = item.MeTermeaseHistoryId, valor = item.value, timestamp = item.timestamp.ToString ()}); } String JSondATATABLE = JSONCONVERTER.SerializeObject (new {Total = HistoryDATATAL, filas = ListMetMeaseHistories}); return content (jsondatatable);}Implementa la consulta de paginación y datos, y devuelve datos JSON. Los datos JSON devueltos incluyen dos objetos: total y filas. El total representa el número total de datos, y las filas representan los datos que se mostrarán. MetermreasureHistoryDateView es el siguiente, correspondiente al valor de campo en la tabla:
clase pública metermreasureHistoryDataviewModels {public int metermeasehistoryID {get; colocar; } Public Double Value {get; colocar; } Public String TimeStamp {get; colocar; }}Función de modificación de datos:
[Httppost] public jsonResult editMeMeureShistoryData () {var meterestehistoryId = int.parse (request ["metermreasureHistoryId"]); var meterestehistoryValue = double.parse (solicitud ["valor"]); var meterestehistorytime = dateTime.Parse (request ["timestamp"]); var meterestehistoryIndb = db.MeTermeaseHistory.Find (meterestehistoryID); metereSteureShistoryIndb.Value = metereSteureShistoryValue; metereSteureShistoryIndb.timestamp = metereSteureShistoryTime; db.savechanges (); var cambiaData = new MetermreasureHistoryDataviewModels {metermeasehistoryID = metereSteureShistoryIndb.MeTermeaseHistoryId, valor = metereSeureShistoryIndb.value, timestamp = metereSeSeureShistoryIndb.timestamp.ToString ()}; JSONRESULT JS = new JsonResult (); js.data = json (cambiadodata); return js;}Función de eliminación de datos:
[Httppost] public jsonResult DeletemetermreasureShistoryData () {var meterestehistoryId = int.parse (request ["metermreasureHistoryId"]); db.MeTermeaseHistory.remove (db.MeTermeaseHistory.Find (meterestehistoryID)); db.savechanges (); var deletedData = new MetermeaseHistoryDataviewModels {metermreasureHistoryId = metereSteureShistoryId, valor = 0, timestamp = null}; JSONRESULT JS = new JsonResult (); js.data = DeletedData; return js;}Después de eliminar el servidor, el primer plano elimina la fila de datos especificada a través del método de tabla de arranque.
He usado estas cosas en este momento. Para resumir el proceso de aprendizaje, estoy buscando documentos oficiales, ejemplos, consulte el código fuente y aprendo a utilizar herramientas de desarrollador de Chrome para ver fuentes y redes.
Lo anterior es el resumen de la aplicación Bootstrap Table Server y la aplicación de edición en línea presentada por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!