A tabela de bootstrap são dados leves e ricos em recursos exibidos em forma de tabela, suportando seleção única, caixas de seleção, classificação, paginação, exibição/ocultar colunas, tabela de rolagem de título fixo, design responsivo, AJAX carregar dados JSON, clique em colunas de classificação com as vistas de cartões, etc. Hoje, vamos introduzir um pouco mais avançado de combinação de usos de uso em combinação de usuários de uso de luminosos, que usam a combinação de luminosos, que usam a combinação de luminosos, que usam os usuários, que são usados, que usam as luminárias, que são usadas, que não se soltam.
Série de tabela de bootstrap:
Explicação detalhada da tabela de inicialização do componente da tabela JS (versão básica)
O artefato do componente da tabela da tabela de bootstrap da série de componentes JS [capítulo final]
O artefato do componente da tabela da tabela de bootstrap da série de componentes JS [2. Tabela de pais e filho e pedidos de coluna de linha]
1. Exibição de efeito
Hoje vou mudar o seguinte método. Vamos dar uma olhada no efeito da implementação primeiro e depois apresentar a implementação do código e as precauções posteriormente. Vamos lá, vamos enviar as renderizações:
1. Renderização de mesa de pai e filho
2. Pedido de linha
Antes de pedir
Arraste a linha para classificá -la para a primeira linha
3. Pedido de coluna
Antes de pedir
Título do título da coluna de arrasto
Depois de pedir
2. Explicação detalhada do código da tabela pai-filho
No capítulo anterior, introduzimos o uso básico da tabela de bootstrap. Ao inicializar a tabela, existe uma propriedade "detalhe -view". Defina -o como TRUE, e você poderá ver um ícone na forma de "+" na frente de cada linha. Clicar neste ícone aciona o evento que carrega o subtable. Este é o princípio geral. Vejamos o código, na verdade é muito simples.
1. Inicialize a tabela e registre a linha para expandir o evento
$("#tb_powerset").bootstrapTable({url: '/api/MenuApi/GetParentMenu',method: 'get',detailView: true,//Parent and Child Table//sidePagination: "server",pageSize: 10,pageList: [10, 25],columns: [{field: 'MENU_NAME',title: 'menu name'}, {field: 'MENU_URL', Título: 'Menu Url'}, {Field: 'Parent_id', Title: 'Menu pai'}, {Field: 'MENU_LEVEL', Título: 'Men Level'},], // Registrar eventos que carregam subtables.Vamos dar uma olhada nos três parâmetros da função de método correspondente (índice, linha, $ detalhe) do evento de carregamento subtable OnexPandrow.
ÍNDICE: O índice da linha da linha atual da tabela pai.
Linha: JSON Data Object da linha atual da tabela pai.
$ detalhe: o objeto TD na nova linha criada sob a linha atual.
O terceiro parâmetro é particularmente importante porque a tabela subtable gerada é carregada no objeto $ detalhe. A tabela de bootstrap gera o objeto $ detalhe para nós e, em seguida, precisamos preenchê -lo com a tabela que queremos.
2. Vejamos o método oinit.initsubtable ()
// Inicialize subtable (loop sem fio) oinit.initsubtable = function (índice, linha, $ detalhe) {var parentid = row.menu_id; var cur_table = $ detalhe.html ('<table> </tabela>'). Find ('tabela'); $ (curi/) .OTStraptable ({{Url: '); 'Get', QueryParams: {strParentId: ParentId}, Ajaxoptions: {strParentId: parentId}, clicktoselect: true, detalheview: true, // the parent-child tabela `` `` `` `` `` `` `` `` `` `` `` `` `` '' ', e a madreceling' '' '' '' '' '' '' '' '' '' '' '' ', nome '}, {field:' menu_url ', título:' menu url '}, {field:' parent_id ', título:' menu pai '}, {field:' menu_level ', título:' nível de menu '},], // loop sem fio para buscar a tagem {oinit.initsubtable (índice, linha, $ subdetail);}});};A partir disso, podemos ver que o princípio de gerar um subtable é criar um objeto de tabela cur_table e depois registrar a inicialização da tabela desse objeto. Não é muito simples ~~
3. Explicação detalhada do código de pedidos de linha
O código de pedidos de linha é mais simples, vamos dar uma olhada.
1. Duas referências adicionais são necessárias
<script src = "~/content/jQuery-ui-1.11.4.custom/external/jquery.tablednd.js"> </script> <script src = "~/content/bootstrap-table/Extensions/reordenar-se-rows/bootstrap-table-reorder-ws.js"> </script>
2. Ao definir uma tabela na página cshtml, adicione dois atributos
<tabela id = "tb_order"-use-use-row-attr-func = "true" Data-reandable-rows = "true"> </tabela>
Em seguida, não há necessidade de fazer modificações ao inicializar a tabela JS, e a tabela carregada pode realizar a função de pedido da linha.
4. Explicação detalhada do código de ordem da coluna
Semelhante ao pedido de linha. A ordem das colunas é usada da seguinte maneira:
1. Referência de alguns JS e CSs adicionais
<script src = "~/content/bootstrap-table/extensions/reordenar-colunns/bootstrap-table-reorder-columns.js"> </script> <link rel = "stylesheet" href = "../ Assets/exemplos.css"> <link Rel = "Stylesheet" href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <script src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js" src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. Ao definir uma tabela na página cshtml, adicione um atributo
<tabela id = "tb_departments" Data-reorderable-columns = "true"> </tabela>
Nenhuma modificação é necessária em outro lugar. A tabela carregada pode realizar pedidos de coluna. É fácil?
5. Filtragem de controle
Originalmente, este artigo estava prestes a terminar, de repente lembrei que havia uma função de pesquisa no capítulo anterior. Parecia que a função de pesquisa não pôde ser usada quando a paginação do servidor foi usada. Por isso, lembrei -me de que tinha uma função semelhante à filtragem de cada coluna no CS antes. O blogueiro estava curioso novamente. A tabela de bootstrap também possui esse tipo de filtragem de cada coluna na tabela, então eu verifiquei o documento. O resultado é cumprido, e há realmente algo ~~ Vamos dar uma olhada.
1. Exibição de renderizações
2. Exemplos de código
(1) Aprenda JS extra
<script src = "~/content/bootstrap-table/Extensions/filtro-control/bootstrap-table filter-control.js"> </sCript>
(2) Defina atributos da tabela e atributos do cabeçalho
<tabela id = "tb_roles" Data-filter-Control = "true"> <Thead> <tr> <th data-field = "role_name" data-filter-control = "select"> nome da função </th> <th datafield = "description" datafilter --control = "input"> role Description </Thh> dados
Como os atributos do cabeçalho da tabela são definidos aqui, não há necessidade de definir colunas ao inicializar o JS.
(3) Inicialização do JS
$ ('#tb_roles'). bootstraptable ({url: '/funt/getRole', método: 'get', barra de ferramentas: '#barra de ferramentas', listrada: true, cache: false, listrado: verdadeiro, fizination: verdadeiro, true, classificável: true, queryParams: function (param) {retorno; Paginação lateral: "servidor", PageSize: 10, Pagelist: [10, 25, 50, 100], pesquisa: true, showColumns: true, showRefresh: true, minimumCountColumns: 2, clicktoselect: true,});No começo, o blogueiro achou que esse tipo de pesquisa só poderia pagar o cliente do usuário, mas após a depuração, não era o caso. As condições de pesquisa originais podem ser passadas para o servidor através do JSON. Vejamos o processo de depuração
Receba parâmetros em segundo plano e os desestimize
Dessa forma, podemos passar bem as condições da consulta para o plano de fundo. Muito bom e poderoso. Isso eliminará o problema de expandir a função de pesquisa de tabela ~~
6. Resumo
Os acima são algumas aplicações de extensão da tabela de bootstrap. Pode não estar incompleto e existem alguns usos avançados que não são introduzidos, como fusão de linhas e colunas, congelamento de linhas e colunas, etc.
O conteúdo acima é o conhecimento relevante do artefato do componente da tabela de bootstrap [2. Tabela de pai e filho e ordem de linha e coluna] Introduzido a você pelo editor. Espero que seja útil para todos!