1. A introdução da tabela de bootstrap
Em relação à introdução da tabela de bootstrap, geralmente existem dois métodos:
1. Faça o download do código -fonte diretamente e adicione -o ao projeto.
Como a tabela de bootstrap é um componente do bootstrap, depende do bootstrap. Primeiro precisamos adicionar uma referência ao bootstrap.
2. Use nosso NUGET MÁGICO
Abra o Nuget e procure por esses dois pacotes
O Bootstrap já é o 3.3.5 mais recente, para que possamos instalá -lo diretamente.
A versão da tabela de bootstrap é na verdade 0,4, o que é muito enganado. Portanto, o blogueiro sugere que o pacote de tabela de bootstrap seja baixado diretamente no código -fonte. A versão mais recente da tabela de bootstrap parece ser 1.9.0.
Os antecedentes deste artigo são introduzidos:
Recentemente, o cliente aumentou uma demanda e queria otimizar o sistema de gerenciamento original, que pode ser bem exibido através de telefones celulares. Ele pensou em duas soluções:
Plano A: Mantenha a página original e projete um novo conjunto de páginas adequadas para telefones celulares. Ao acessar o telefone celular, digite M.Zhy.com (página móvel) e, ao acessar o dispositivo PC, digite www.zhy.com (página do PC)
Solução B: Use o Bootstrap Framework para substituir a página original e se adaptar automaticamente a telefones celulares, tablets e dispositivos PC
Usando a solução A requer projetar um conjunto de interfaces e reescrever a interface adequada para a página. Considerando os problemas de tempo e custo, o projeto adota a solução B
2. Exibição de efeito
2. Uma breve introdução à tabela de bootstrap
A tabela de bootstrap é um plug-in leve que usa o AJAX para obter dados no formato JSON. Sua paginação e preenchimento de dados são muito convenientes e apóiam a internacionalização.
3. Como usar
1. Introduzir JS e CSS
<!-estilo CSS-> <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet"> <link href = "css/bootstrap/bootstrap-table.css" rel = "StyleSheet"> <!-js-> <script src = "js/bootstrap/jQuery-1.12.0.min.js" type = "text/javascript"> </script> <script src = "js/bootstrap/bootstrap.minmin.js"> </script> <script src " 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.
Existem duas maneiras de obter dados da tabela de bootstrap. Um é especificar a fonte de dados através da propriedade Data-URL da tabela, e a outra é especificar o URL ao inicializar a tabela através do JavaScript para obter dados.
<tabela data-toggle = "tabela"> <Tead> ... </sead> </tabela> ...
$ ('#tabela'). Bootstraptable ({url: 'data.json'});O segundo método é mais flexível ao processar dados complexos do que o primeiro método. Geralmente, o segundo método é usado para preencher os dados da tabela.
$ (function () {// 1. Inicialize tabela var otable = new tableInit (); otable.init (); // 2. Inicialize o button clique em event/ * var obuttoninit = new Buttonit (); obuttoninit.init (); */}); var tableInit = function () {var otableInit = new Object (); // Initialize Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //Request URL (*) method: 'post', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button: true, //Where to display line interval color cache: false, //Where to use cache, o padrão é verdadeiro, portanto, em geral, você precisa definir esta propriedade (*) paginação: true, // onde exibir paging (*) classificável: false, // se o Sort Sortorder: "ASC", // Sorting Method QueryParams: OtableInit.QueryParams, // Parâmetros de paginação (*) SidePagination: " //Initialize the first page to load, the default first page pageSize: 50, //The number of rows recorded per page (*) pageList: [10, 25, 50, 100], //The number of rows per page to be selected (*) strictSearch: true, clickToSelect: true, //Whether click select row height: 460, //Line height, if the height attribute is not set, the table automatically feels the 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: 'Transaction type' }, {Field: 'GoodMachineid', Título: 'Número do Freeight'}, {Field: 'InneridName', Title: 'Cargo Fand Number'}, {Field: 'BOTSNAME', Título: 'Nome do produto'}, {Field: 'ChanGestus', Title: 'Payment'}, {Field: 'Sendat'; }; // Obtenha os parâmetros de consulta OTableInit.QueryParams = function (params) {var temp = {// o nome da chave aqui e o nome da variável do controlador deve ser sempre. Se isso for alterado, o controlador também precisará ser alterado para o mesmo limite: params.limit, // deslocamento do tamanho da página: params.offset, // número de página sdate: $ ("#strattime"). $ ("#CardNumber"). Sucesso: $ ('Entrada: Rádio [nome = "Sucesso"]: verificado'). Val (),}; retornar temp; }; retornar otableInit; };O campo de campo deve corresponder ao campo retornado pelo servidor antes que os dados sejam exibidos.
3. Obtenha dados em segundo plano
um. Servlet obtém dados
BUBLEREDREADER BUFR = new BufferredReader (new InputStreamReader (request.getInputStream (), "UTF-8")); Stringbuilder sbuilder = new stringbuilder (""); String temp = ""; while ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } bufr.close (); String json = sbuilder.toString (); JsonObject json1 = jsonObject.FromObject (JSON); String sdate = json1.getString ("sdate"); // Obtenha dados de frente para frente nesse método ...b. O método correspondente no controlador Springmvc obtém dados
public jsonResult getDepartment (INT Limit, Int Offset, String OrderId, String SellerID, PortID, CardNumber, Success, MaxRows, TradeType) {...}4. Paginação (aquela que encontra mais problemas)
Usando a paginação, os dados retornados pelo lado do servidor devem incluir linhas e total, o código é o seguinte:
... <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) {continua; } 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 ("RECEVETIME", Toolbox.getymdhms (tb.getReCeivETime ())); jo.put ("TradeType", clscOnst.trade_type_des [tb.getTradeType ()]); jo.put ("Changestatus", (tb.getChanGestatus ()! = 0)? "Sucesso": "falhou"); jo.put ("Changestatus", (tb.getChanGestatus ()! = 0)? "Sucesso": "falhou"); jo.put ("SendStatus", (tb.getSendStatus ()! = 0)? "Sucesso": "falhou"); jo.put ("bill_credit", string.format ("%1.2f", tb.getbill_credit ()/100.0)); jo.put ("alterações", string.format ("%1.2f", tb.getChanges ()/100.0)); jo.put ("GoodroadId", tb.getgoodroadRoadID ()); jo.put ("smscontent", tb.getsmscontent ()); jo.put ("OrderId", tb.getorderId ()); jo.put ("bensname", 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 ("linhas", jsondata); // jsonArray jsonObject.put ("total", totalCount); // Total Records Out.print (jsonObject.toString ()); <br> ...5. Introdução ao conteúdo da interface de paginação
O front-end recebe os dados paginados, o código é o seguinte:
... <br> OtableInit.QueryParams = function (params) {var temp = {// o nome da chave aqui e o nome da variável do controlador deve ser sempre. Se isso for alterado, o controlador também precisará ser alterado para o mesmo limite: params.limit, // quantos registros estão compensados: params.offset, // exibir quantos registros são gravados em uma página sdate: $ ("#strattime"). Val (),}; retornar temp; }; <br> ...O back -end recebe os dados do Pagrado, o código é o seguinte:
... <br> int PageIndex = 0; int offset = Toolbox.Filterint (json1.getString ("offset")); int limite = Toolbox.Filterint (json1.getString ("limite")); if (offset! = 0) {PageIndex = deslocamento/limite;} PageIndex+= 1; // Quantas páginas <br> ...4 outros
Bootstrap3 é compatível com o navegador IE8! Veja o artigo: //www.vevb.com/article/83366.htm
Se você não aprendeu o suficiente, pode clicar aqui para aprender e depois anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
O acima é tudo sobre este artigo. Espero que isso possa ajudá -lo a aprender melhor a tabela de bootfact de componentes da tabela JS.