Resumo do uso da tabela de bootstrap
O Bootstrap-Table é um plug-in de tabela escrito com base na mesa de bootstrap, especialmente usada para exibir dados. O Bootstrap é do Twitter e atualmente é a estrutura de front-end mais popular. O Bootstrap é baseado em HTML, CSS e JavaScript, e tem as vantagens de desenvolvimento de front-end simples, flexível e rápido. Não vou descrever o mesmo que o bootstrap aqui. Este artigo se concentrará em explicar parte do meu entendimento de usar a tabela de bootstrap no meu projeto e como aprendê-lo.
Primeiro, deixe-me explicar o relacionamento entre jQuery, bootstrap e bootstrap-table. Muitas partes do código de bootstrap envolvem jQuery, ou seja, o bootstrap depende do jQuery, e a tabela de bootstrap que queremos usar é criada com base no bootstrap; portanto, antes de usar a tabela de bootstrap, você deve consultar os arquivos JS e CSS relacionados de jquery e bootstrap.
Em seguida, as características da mesa de bootstrap: com JQuery-UI, JQGrid e outros plug-ins de exibição de tabela, a tabela de bootstrap é plana e leve. É mais do que suficiente para alguns dados leves, e o suporte para tabelas de pai e filho e assim por diante também é muito bom. O mais importante é que ele pode ser combinado perfeitamente com outras tags de bootstrap.
Ok, isso é tudo para a introdução. Vou fazer o upload diretamente do código e as renderizações e depois discutirei mais.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head> <title>bootstrap-table</title> <meta http-equiv="Content-Type" content = "text/html; charset = utf-8"/> <meta name = "description" content = ""/> <meta name = "palavras-chave" content = ""/> <script type = "text/javascript" src = "./ js/jQuery-2.2.Js"> </script> < src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "./ bootstrap-table/bootstrap-table-ll.js"> </script> <script = "text/javascript" src = "./ bootstrap-table/loce/bootstrap-table-zh-cn.js"> </sCript> <link rel = "stylesheet" type = "text/css" href = "./ bootstrap/css/bootstrap.min.css"> <link Relsheet "Stylesets" href="./bootstrap-table/bootstrap-table.min.css" ></head><script language="javascript"> </script><body> <div> <div> <div> <div> <h3>Added teacher account</h3> </div> <div> <div id="toolbar"> <button id="btn_edit" type="button" > <span aria-hidden = "true"> </span> modificar </butut> <button id = "btn_delete" type = "button"> <span Aria-hidden = "true"> </span> delete </button> </div> <tabela id = "professor_table" data-toggle = "tabela" dates-url = ". data-toolbar = "#ToolBar" Data-patination = "True" Data-Search = "True" Data-Show-Refresh = "True" Data-Show-Toggle = "True" Data-Show-Columns = "True" Data-Page-Size = "5"> <tr> <the Datafield = "Nome"> Usuário </th> <th Data-field = " Data-field = "T_NAME"> Nome do professor </th> </tr> </tabela> </div> </div> </div> </body>
Imagem de reprodução:
Ok, em seguida, vamos analisar o significado do código acima nas etapas.
1. Primeiro de tudo, precisamos baixar o pacote de bootstrap de bootstrap de bootstrap correspondente. Existem tutoriais on -line e não descreveremos como baixá -lo aqui.
A partir da referência aos nomes de arquivos JS e CSS na tag <head> acima, podemos ver que devemos introduzir esses arquivos.
Nota Bootstrap, existem apenas três pastas no pacote compactado compilado.
1.jQuery-2.2.1.js --- O mais recente arquivo jQuery
2.BOOTSTRAP.MIN.JS --- O FILO COMPRESSO DO RECURSO ESTRABALIZADO DO SPOTSTRAP.MIN.JS em Bootstrap/JS
3.BOOTSTRAP.MIN.CSS --- O mais recente arquivo compactado bootstrap.min.css no Bootstrap/CSS
4.BOOTSTRAP-TABLE-ALL.JS --- O mais recente arquivo JS em Bootstrap-Table
5.Bootstrap-Table-Zh-CN.JS --- O mais recente arquivo inicial chinês em Bootstrap-Table/Local
6.BOOTSTRAP-TABLE.MIN.CSS --- O mais recente arquivo compactado CSS em Bootstrap-Table
Esses seis devem ser configurados, entre os quais Bootstrap-Table-ZH-CN.JS é um arquivo JS que suporta chinês. Somente quando este arquivo for carregado, algumas das informações da nossa tabela serão definidas como chinesas.
Vamos experimentar o efeito de exibição após a remoção de bootstrap-table-zh-cn.js.
Obviamente, também podemos definir as informações de exibição para outros idiomas, basta substituir o Bootstrap-Table-ZH-CN.JS por arquivos JS em outros idiomas. Há suporte no pacote de tabela de bootstrap.
Também podemos olhar para o código -fonte neste arquivo. Vamos dar uma olhada e você saberá o que esse arquivo faz.
/** * Tabela de bootstrap Tradução chinesa * Autor: zhixin wen <[email protected]> */(function ($) {'use strict'; $ .fn.bootstraptable.locales ['zh-cn'] = {formatingMessage 'function:) {Return' trabalha para ladrar o trabalho para carregar o trabalho para carregar o trabalho para ladrar os dados da função: function). (Pagenumber) {Retorno 'Mostrando por página' + Pagenumber + 'registro'; O registro de correspondência foi encontrado '; }, formatggle: function () {return 'switch';
Você pode ver rapidamente que, depois de citar o arquivo JS, ao carregar, ore pelo efeito de inicialização. Converta algumas informações exibidas no conteúdo médio correspondente.
2. Em seguida, vamos falar sobre o código HTML relevante. De fato, esta é a única parte do código HTML relacionado à mesa de bootstrap.
<tabela id = "professor_table" data-toggle = "tabela" data-url = "./ data.php" data-method = "post" data-quadery-params = "consulso" Data-toolbar = "#ferramenta" data-pagination = "true" earch = "" true-show-show-refrush = "true" data-show-show "true" ") Data-página-size = "5"> <Thead> <tr> <th data-field = "name"> Conta de usuário </th> <th datafield = "pwd"> senha do usuário </th> <th datafield = "t_name"> nome </th> </tr> </thead> </ tabela>
Sim, existe apenas uma tag de tabela, além de muitos parâmetros, e a forma da tabela é implementada através desses parâmetros. Você deve saber quais estilos e funções estão lá. Apenas listando -os, definitivamente será uma queda no balde. É melhor ensinar as pessoas a pescar do que ensinar as pessoas a pescar. Vou lhe dizer onde encontrar essas categorias. O significado da classe. Podemos ir ao site profissional da Table Bootstrap para encontrar um link que eu uso. Clique para abrir o link. Se for inválido, você pode entrar diretamente http://bootstrap-table.wenzhixin.net.cn/documentation
Claro, você também pode ver alguns exemplos no exemplo
Como verificamos o significado dos parâmetros correspondentes? Quando você vê a imagem acima, o lado direito é algumas opções, você pode escolher os atributos da tabela, atributos de linha e eventos vinculativos que você pode definir.
Clique nas opções da tabela de atributos da tabela para exibir a figura a seguir. Primeiro, você pode ver que o nome do título é usado para JS para criar tabelas, e o atributo é usado para HTML para criar tabelas.
Para dar alguns exemplos, existem vários parâmetros em nosso código acima. O que eles querem dizer é:
Dados-URL: o URL para solicitar dados.
Dados-método: método de solicitação.
altura de dados: defina a altura da tabela
Data-query-params = "Queryparams": Configurações
Data-Toolbar = "#Ferramentas": Defina o contêiner para o qual o botão é ID é barra de ferramentas.
Data-Pagination = "True": Defina se deseja exibir o número da página
Data-search = "true": defina a caixa de pesquisa
Data-show-refresh = "true": defina o botão de atualização
Data-show-toggle = "true": defina o formato de exibição de dados
Agora você deve entender como conferir!
Observe que o código a seguir é o núcleo, <tr> representa uma grade em uma linha e data-field = "nome" representa o nome de dados em uma grade em uma linha. Você pode entender o campo de dados como ID, porque os dados transmitidos do plano de fundo são distinguidos com base no campo de dados e quem é enviado.
<tr> <th data-field = "name"> Conta de usuário </th> <th datafield = "pwd"> senha do usuário </th> <th datafield = "t_name"> nome do professor </th> </tr> </thead>
Para aqueles que não desejam usar a geração estática HTML, você também pode usar o JS para gerar geração dinâmica. Para dar uma demonstração de código, para definir os parâmetros relevantes, você só precisa usar o nome: opções mencionadas acima. Por exemplo, defina o arquivo de destino Data-URL para solicitação de dados em html: "./data.php" em js, basta declarar url: "./data.php"
$('#table').bootstrapTable({ columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }]});3. Dessa forma, o que outros códigos fazem, parte do código usa o painel no boostrap para formatar, ou seja, para incorporar a tabela no painel. O efeito da mesa de bootstrap após o código do painel removido é assim
Só que não há painel.
4. O formato de transmissão de dados, os dados recebidos pela Table Bootstrap está em formato JSON por padrão
Você pode ver acima que o endereço de fundo solicitado é: "./data.php", vamos dar uma olhada em seu conteúdo
<? php $ resultados [0] = array ("nome" => "Aoze", "pwd" => "20132588", "t_name" => "zhang san"); $ resultados [1] = Array ("nome" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ resultados [2] = array ("nome" => "wangwu", "pwd" => "44455", "t_name" => "wang wu"); echo json_encode ($ resultados);?>É muito simples! Obviamente, esses são apenas alguns dados de teste que escrevi manualmente e, é claro, são encontrados no banco de dados no projeto.
5. É claro que não é suficiente apenas exibir dados. Precisamos interagir com a tabela, como funções de exclusão e modificação. Neste momento, precisamos usar alguns eventos de mesa de bootstrap. No caso acima, incorporei dois componentes de botões na tabela, como mostrado na figura
O método de implementação deste mosaico é adicionar essa linha de dados de data-toolbar = "#ferramenta" às propriedades da tabela.
Isso significa adicionar um rótulo com ID como barra de ferramentas a uma linha na barra de ferramentas.
Na minha implementação deste projeto, você deve usar esses dois botões para executar operações correspondentes na linha selecionada na tabela.
Escreva o evento correspondente, primeiro ligue um evento de gatilho selecionado à tabela e, em seguida, obtenha os dados da linha selecionada através da função GetSelectrow.
$ ('#professor_table'). on ('click-rrow.bs.table', function (e, linha, elemento) {$ ('. success'). removeclass ('sucesso'); // remove a linha selecionada anteriormente, selecione o estilo $ (elemento) .addclass ('succelT'); // Add o sucessor atualmente selecionado para o diferencial}; function getSelectedRow () {var index = $ ('#professor_table'). find ('tr.success'). data ('index'); // obtenha a linha selecionada retornar $ ('#professor_table').Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso da tabela de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.