A tabela de boot-in leve baseada em bootstrap pode ter funções poderosas, como cabeçalhos de tabela fixa, verificação única/verificação, classificação, paginação, pesquisa e cabeçalhos de tabela personalizados, o que pode melhorar melhor a eficiência do desenvolvimento e reduzir o tempo de desenvolvimento.
1. Descrição do plug-in: A tabela de bootstrap exibe formato de tabela de dados, fornecendo suporte rico, caixas de rádio, caixas de seleção, classificação, paginação, etc., download de plug-in.
2. Recursos:
Desenvolvido com base no bootstrap 3 (o bootstrap 2 também é suportado)
Interface responsiva
Cabeçalho fixo
Totalmente configurável
Suportar atributos de dados
Mostrar/ocultar colunas
Mostre/oculte o cabeçalho da mesa
Obtenha dados JSON usando Ajax
Clique no cabeçalho da tabela para classificá -lo simplesmente
Suporta exibição de coluna personalizada
Apoie Single/Reselect
Função de paginação poderosa
Suporte ao layout do cartão de visita
Suporta multilíngues
3. Como usar:
1) Apresente a biblioteca de bootstrap (se o seu projeto ainda não for usado) e o bootstrap-table.css na etiqueta principal da página HTML.
<link rel = "Stylesheet" href = "bootstrap.minmin.css"> <link rel = "Stylesheet" href = "bootstrap-table.css">
2) Introduzir biblioteca jQuery, Biblioteca de Bootstrap (se o seu projeto ainda não for usado) e Bootstrap-Table.js antes que a etiqueta da cabeça ou a etiqueta corporal seja fechada (recomendada).
<script src = "jquery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) Especifique a fonte de dados, aqui estão duas maneiras
Método 1: Passe a tag de atributo de dados
Configurando data-toggle = "tabela" em uma tabela normal Ativa a tabela de bootstrap sem gravar JavaScript.
<tabela data-toggle = "tabela" data-url = "data.json"> <tead> ... </sead> </ table>
Método 2: Configure a fonte de dados através do JavaScript
Ativar tabela com atributo de identificação via javascript.
$ ('#tabela'). Bootstraptable ({url: 'data.json'});:4. Descrição do bug:
Ao definir o formatador de campo usando o método de atributo de tag, descobri que não havia efeito e a imagem não estava clara. Você pode baixar diretamente o exemplo para pesquisar e fazer o download do endereço.
Por exemplo: <th data-field = "sexo" data-formatter = "format_sex"> gênero </th>
1) Motivo:
Linha 399 do bootstrap-table.js, apenas o tipo de formatação é a função no código.
2) Solução:
Modifique o bloco de código na linha 399:
Antes da modificação
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (valor, item);}Após a modificação:
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (valor, item); } else if (typeof that.header.formatters [j] === 'string') {if (typeof window [that.header.formatters [j]] === 'function') {value = window [that.header.formatters [j]] (valor, item); }}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 de plug-in bootstrap
O exposto acima é o método de uso da tabela de bootstrap compartilhada com você. Espero que seja útil que você domine o método de uso da tabela de bootstrap.