1. La introducción de la mesa de arranque
Con respecto a la introducción de la tabla de arranque, generalmente hay dos métodos:
1. Descargue el código fuente directamente y agréguelo al proyecto.
Dado que la tabla Bootstrap es un componente de Bootstrap, depende de Bootstrap. Primero debemos agregar una referencia a Bootstrap.
2. Usa nuestro mágico nuget
Abra Nuget y busque estos dos paquetes
Bootstrap ya es el último 3.3.5, por lo que podemos instalarlo directamente.
La versión de la tabla Bootstrap es en realidad 0.4, que está demasiado estafada. Entonces, el blogger sugiere que el paquete de tabla Bootstrap se descargue directamente en el código fuente. La última versión de Bootstrap Table parece ser 1.9.0.
Se introduce los antecedentes de este artículo:
Recientemente, el cliente planteó una demanda y quería optimizar el sistema de gestión original, que se puede mostrar bien a través de teléfonos móviles. Pensó en dos soluciones:
Plan A: Mantenga la página original y diseñe un nuevo conjunto de páginas adecuadas para teléfonos móviles. Al acceder al teléfono móvil, ingrese M.Zhy.com (página móvil) y al acceder al dispositivo PC, ingrese www.zhy.com (página de PC)
Solución B: Use el marco Bootstrap para reemplazar la página original y adaptarse automáticamente a teléfonos móviles, tabletas y dispositivos de PC
El uso de la solución A requiere diseñar un conjunto de interfaces y reescribir la interfaz adecuada para la página. Teniendo en cuenta los problemas de tiempo y costos, el proyecto adopta la solución B
2. Muestra de efecto
2. Una breve introducción a la mesa de arranque
La tabla Bootstrap es un complemento de tabla ligero que usa AJAX para obtener datos en formato JSON. Su paginación y llenado de datos son muy convenientes y apoyan la internacionalización.
3. Cómo usar
1. Introducir JS y CSS
< src = "js/bootstrap/jQuery-1.12.0.min.js" type = "text/javascript"> </script> <script src = "js/boottstrap/bootstrap.min.js"> </script> <script src = "js/bootstrap/bootstrap-table.js"> </script> <script> <script> <script> <script> src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table-zh-cn.js"> </script>
2. Completo de datos de tabla
Hay dos formas de obtener datos de la tabla Bootstrap. Una es especificar la fuente de datos a través de la propiedad de la tabla de datos de datos, y el otro es especificar la URL al inicializar la tabla a través de JavaScript para obtener datos.
<tabla data-toggle = "table"> <tead> ... </tead> </table> ... ...
$ ('#table'). BootstraTable ({url: 'data.json'});El segundo método es más flexible al procesar datos complejos que el primer método. En general, el segundo método se utiliza para llenar los datos de la tabla.
$ (function () {// 1. Inicializar la tabla var otable = new tableInit (); otable.init (); // 2. Inicializar el evento de clic del botón/ * var obuttonInit = new ButtonInit (); ObuttonInit.init (); */}); var tableInit = function () {var otableInit = new Object (); // Inicializar Tabla OtableInit.init = function () {$ ('#TradeList'). BootStraptable ({URL: '/Vendermanager/TradeList', // Solicitar url (*) método: 'post', // Método de solicitud (*) ToolBar: '#ToolBar', // Qué contenedor rayado por el botón de herramienta: verdadero, verdadero, donde se muestra el método de línea de línea C. Use caché, el valor predeterminado es verdadero, por lo que en general, debe establecer esta propiedad (*) paginación: true, // donde mostrar paging (*) ordenable: false, // si sort Order Orderdre: "ASC", // Método de clasificación de queryParams: otableInit.QueryParams, // parámetros de pagination (*) SidePagination: "Server", // Page Method: Method: Cliente Pagination, Servidor, Servidor (*) PageNumber: 1, // Inicializa la primera página para cargar, la primera página predeterminada páginas: 50, // El número de filas registradas por página (*) pageList: [10, 25, 50, 100], // El número de el número de filas por página a seleccionar (*) strictSearch: true, clicktoselect: verdadero, // height of the table according to the number of records, uniqueId: "id", //The unique identification of each row is generally the primary key column cardView: false, //Does the detailed view detailView: false, //Does the parent and child table columns: [{ field: 'id', title: 'serial number' }, { field: 'liushuiid', title: 'Transaction number' }, { field: 'orderid', title: 'Order number' }, { field: 'receivetime', title: 'Transaction time' }, { field: 'price', title: 'Amount' }, { field: 'coin_credit', title: 'Input coin' }, { field: 'bill_credit', title: 'Input banknote' }, { field: 'changes', title: 'changes' }, { field: 'tradetype', title: 'Tipo de transacción'}, {campo: 'Goodmachineid', Title: 'Número de carguero'}, {Field: 'InnerIdName', Title: 'Cargo Lane Number'}, {Field: 'GoodsName', Title: 'Nombre del producto'}, {Field: 'ChangeStatus', Title: 'PAGO'}, {Field: 'SendStatus', Title: 'SOW }; // Obtenga los parámetros de consulta oTableInit.QueryParams = function (params) {var temp = {// El nombre de clave aquí y el nombre variable del controlador deben ser siempre. Si esto se cambia, el controlador también debe cambiarse al mismo límite: params.limit, // Page Size Offset: Params.Offset, // Page Number Sdate: $ ("#Strattime"). Val (), editar: $ ("#Endtime"). Val (), SellerID: $ ("#SellerID"). Val (), OrderId: $ ("#Orderid"). $ ("#CardNumber"). Val (), maxrows: params.limit, pageIndex: params.pagenumber, portid: $ ("#portid"). Val (), cardNumber: $ ("#cardNumber"). Val (), tradeType: $ ('Entrada: radio [name = "tradeType"]: verificado'). éxito: $ ('input: radio [name = "éxito"]: checked'). Val (),}; regresar temp; }; regresar otableInit; };El campo de campo debe corresponder al campo devuelto por el servidor antes de que se muestren los datos.
3. Obtenga datos en segundo plano
a. Servlet obtiene datos
BufferedReader bufr = new BufferedReader (new InputStreamReader (request.getInputStream (), "UTF-8")); StringBuilder sBuilder = new StringBuilder (""); Cadena temp = ""; while ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } bufr.close (); Cadena json = sBuilder.ToString (); JsonObject json1 = jsonObject.FromObject (JSON); Cadena sdate = json1.getString ("sdate"); // Obtener datos front-end a través de este método ...b. El método correspondiente en el controlador SpringMVC obtiene datos
public jsonResult getDepartment (int Limit, int offset, String OrderId, String SellerID, Portid, CardNumber, Success, MaxRows, TradeType) {...}4. Pagination (el que encuentra la mayoría de los problemas)
Usando la paginación, los datos devueltos por el lado del servidor deben incluir filas y total, el código es el siguiente:
... <br> gblst = sqlado.getTradelist (SQL, PageIndex, MaxRows); JSONArray JSondata = new JsonArray (); JsonObject Jo = null; for (int i = 0, len = gblst.size (); i <len; i ++) {TradeBean tb = gblst.get (i); if (tb == null) {continuar; } Jo = new JsonObject (); Jo.put ("id", i+1); Jo.put ("liushuiid", tb.getliushuiid ()); Jo.put ("Price", String.Format ("%1.2f", tb.getPrice ()/100.0)); Jo.put ("mobilephone", tb.getMobilephone ()); Jo.put ("ReceptiveTime", Toolbox.getymdhms (tb.getReceiveTime ())); Jo.put ("TradeType", clsconst.trade_type_des [tb.getTradeType ()]); Jo.put ("ChangeStatus", (tb.getChangeStatus ()! = 0)? "éxito": "fallido"); Jo.put ("ChangeStatus", (tb.getChangeStatus ()! = 0)? "éxito": "fallido"); Jo.put ("SendStatus", (tb.getSendStatus ()! = 0)? "éxito": "fallido"); Jo.put ("bill_credit", string.format ("%1.2f", tb.getbill_credit ()/100.0)); Jo.put ("Changes", String.Format ("%1.2f", tb.getChanges ()/100.0)); Jo.put ("GoodRoadid", tb.getGoodRoadid ()); Jo.put ("SMSCONTENT", TB.GETSMCONTENT ()); Jo.put ("OrderId", tb.getOrderId ()); Jo.put ("GoodsName", tb.getgoodsname ()); Jo.put ("InnerIdName", tb.getInnerIdName ()); Jo.put ("xmlstr", tb.getxmlstr ()); jsondata.add (Jo); } int totalCount = sqlado.getTraderowsCount (SQL); JsonObject jsonObject = new JsonObject (); jsonObject.put ("filas", jsondata); // jsonarray jsonObject.put ("total", total); // Total Records out.print (jsonObject.ToString ()); <br> ...5. Introducción al contenido de la interfaz de paginación
El front-end obtiene los datos pagados, el código es el siguiente:
... <br> otableInit.QueryParams = function (params) {var temp = {// El nombre de clave aquí y el nombre de la variable del controlador deben ser siempre. Si esto se cambia, el controlador también debe cambiarse al mismo límite: params.limit, // cuántos registros se desplazan: params.offset, // muestra cuántos registros se registran en una página sdate: $ ("#strattime"). Val (),}; regresar temp; }; <br> ...El backend obtiene los datos pagados, el código es el siguiente:
... <br> int pageindex = 0; int offset = Toolbox.FilterInt (json1.getString ("offset")); int limit = toolbox.filterInt (json1.getString ("limit")); if (offset! = 0) {pageIndex = offset/limit;} pageindex+= 1; // cuántas páginas <br> ...4. Otros
¡Bootstrap3 es compatible con el navegador IE8! Ver el artículo: //www.vevb.com/article/83366.htm
Si no ha aprendido lo suficiente, puede hacer clic aquí para aprender y luego adjuntarle un tema maravilloso: Tutorial de aprendizaje de bootstrap
Lo anterior se trata de este artículo. Espero que pueda ayudarlo a aprender mejor la mesa de arranque de artefactos de componentes de la tabla JS.