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]
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, Setent Data, componente de Seltted Colunas [End Chapterfttle], etc. Ettoms Apresenta o artigo JSOTENSTER SERVIMENTONEVENSONCONS ARTIFT [Chapterft.
1. Exibição de efeito
1. Estilo da linha da tabela
Por exemplo, temos um requisito para exibir a página do pedido, e pedidos com status diferentes mostram cores diferentes, como mostrado na figura:
2. Editar dentro da linha de formulário
No primeiro artigo, um amigo do parque perguntou ao blogueiro se ele poderia apoiar o efeito da edição no setor, e a resposta foi sim. Vamos dar uma olhada no efeito:
Antes de editar
Clique em dados de uma célula
Após a edição, completo
3. Combinação de linhas e colunas de tabelas
Os blogueiros acham que é muito comum para fusões de classificação, especialmente ao fazer relatórios de páginas. Vamos dar uma olhada no efeito:
A página atual está incompleta, clique para entrar e dê uma olhada. Que tal? O efeito é muito bom.
4. Exportação de dados da tabela
Em relação à exportação de dados da tabela, a tabela de bootstrap suporta a exportação de três modos: BASIC, todos, selecionados. Ou seja, a exportação de dados da página atual, todos os dados e exportação de dados selecionados. Ele também suporta a exportação de vários tipos de arquivos, como Common Excel, XML, JSON e outros formatos.
Exportar a página atual para se destacar
Exportar todos os dados na tabela
Exportar dados de linha selecionados
Quanto à exportação de outros tipos de arquivos, é basicamente o mesmo que o Excel, portanto o efeito não será exibido.
2. Exemplo de código de estilo da linha da mesa
Em relação à configuração de estilo de linhas de tabela, outras funções são as funções mais básicas. Por que colocá -lo no terceiro artigo? É porque o blogueiro acha que essa função pode ser usada em todos os lugares. Obviamente, o efeito não é difícil. Você também pode obter a cor de fundo do TR usando o jQuery, mas o blogueiro pensa que, como a tabela de bootstrap fornece um mecanismo para definir a cor de fundo da linha, por que não usar sua API integrada. Vamos ver como implementá -lo.
Ao inicializar a tabela
// Inicialize a tabela $ ('#tb_order'). Bootstraptable ({url: '/tablestyle/getorder', // solicitar url (*) Método: 'Get', // Método de solicitação (*) // Ferramenta Cache: '#Toolbar', // que listrado do contêiner, para a ferramenta, // where thret para exibir o interval da linha de linhas need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams,//Pagination parameters (*) sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, //Initialize the first page to load, Página de primeira página Página: 10, // Número de linhas registradas por página (*) Pagelista: [10, 25, 50, 100], // Número de linhas por página para selecionar (*) Pesquisar: True, // A pesquisa de tabela é exibida? // O botão de refresh é exibido mínimo, calumns: 2, // o número mínimo de colunas permitidas clicktosselect: true, // onde ativar o clique em Selecionar altura da linha: 500, // altura da linha, se o atributo de altura não for definido, a tabela sente automaticamente a altura da tabela de acordo com cada número de registros, Única: "id", // Botão de alternância para visualização detalhada e visualização da lista CardView: false, // A visualização detalhada da visualização detalhada: false, // A tabela pai-filho RowStyle: function (linha, índice) {// Existem 5 valores aqui representando as cores em 5 ['ativo', 'sucessor', 'info', 'warning', 'dangue'; 'success';//There is also an active}else if (row.ORDER_STATUS == "Deleted") {strclass = 'danger';}else {return {};}return { classes: strclass }},columns: [{checkbox: true}, {field: 'ORDER_NO',title: 'Order number'}, {field: 'ORDER_TYPE',title: 'Order type'}, {field: 'order_status', título: 'status da ordem'}, {field: 'observa', título: 'observações'},]});De fato, o foco está neste parâmetro:
RowStyle: function (linha, índice) {// Existem 5 valores aqui representando as cores em 5 ['ativo', 'sucesso', 'info', 'aviso', 'perigo']; var strclass = ""; if (row.order_status == "a ser agendado") {strclass = 'succcess'; // "também existe um ades. {strclass = 'perigo';} else {return {};} retornar {classes: strclass}},A tabela de bootstrap suporta as cores de fundo da linha da tabela em 5, ou seja, 'ativo', 'sucesso', 'info', 'aviso', 'perigo'. Quanto a cada cor de fundo correspondente, você pode vê -lo executando o código. Em relação ao valor de retorno desse método, o blogueiro também o estudou por um longo tempo, quando ele o usou pela primeira vez. De acordo com as regras da tabela de bootstrap, é necessário retornar um tipo de objeto JSON-Format, como: {Classes: strclass}.
3. Exemplo de código de edição na linha de formulário
Em relação à edição de tabela, vários arquivos JS que precisam ser estendidos usando a tabela Bootstrap.
1. Introduzir arquivos JS adicionais
<link rel = "Stylesheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></Script> <Script src =" ~/content/bootstrap-table/extensions/editável/bootstrap-table-edable.js "
2. Ao definir uma tabela na página cshtml, adicione dois atributos
<tabela id = "tb_departments"> <Thead> <tr> <th data-field = "name" data-editable = "true"> nome do departamento </th> <th data-field = "parentname"> departamento superior </th> <th data-field = "nível" data-edition = "true"> verdadeiro departamento </th> <th Data-field = "Data-editable =" True "> Data-Editable = "True"> Descriptor </th> </tr> </sead> </tabela>
Se for inicializado no JS, o método de escrita é o seguinte:
{Field: "Name", Title: "Name", Editável: True}3. Registre a edição e salve eventos ao inicializar a tabela em JS
$ ('#tb_departments'). bootstraptable ({url: '/editável/getDepartment', // solicitar url (*) método: 'get', // solicitar o método (*) Ferramenta de ferramenta: '#ToolBar', // que contêiner listrado pelo botão da ferramenta é verdadeiro, // para exibir o interval da linha need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "server", //Paging method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default Página de primeira página: 10, // Número de registros por página (*) OneDitablesAve: function (campo, linha, antiga, $ el) {$ .ajax ({type: "post", url: "/editable/edit", dados: {strjson: json.stringify (linha)} (sucessor: sucur (status, status, status: {strjson: json.stringify (linha)}, success: status (status, status, status: {strjson: bem -sucedido ");}}, erro: function () {alert (" error ");}, complete: function () {}});}});O ponto principal é olhar para o manuseio deste evento
OneditablesAve: function (campo, linha, antigo, $ el) {$ .ajax ({type: "post", url: "/editable/edit", dados: {strjson: json.stringify (line)}, sucesso: function (dados, status) {if (status == "succurch) {alert (" ed. {alert ("error");}, completo: function () {}});}O método correspondente precisa lidar com a lógica salva você mesmo. O campo de quatro parâmetros, linha, antigo e $ el correspondem ao nome da coluna atual, o objeto de dados da linha atual, o valor antes da atualização e o objeto jQuery da célula atual editada.
4. Exemplo de linha de tabela e código de mesclagem da coluna
A função de fusão da coluna de linha da tabela não requer referência a outros arquivos JS. Ele só precisa usar a tabela Colspan e o linhas na página CSHTML para alcançá -la.
1. Página cshtml
<tabela id = "tb_report"> <Thead> <tr> <th colspan = "4" data-valign = "middle" data-align = "center"> q1 </th> <th colspan = "4" data-valign = "médio" dados-align = "center"> </th> <th colspan = "4" 4 "Data" Data-align = "> trimestre </th> <th cents =" 4 "4" e "Dados" Data-align = "Center"> Data Data-field = "TotalCount" rowspan = "2" Data-valign = "Middle" Data-align = "Center"> Resumo anual </th> </tr> <tr> <th data-field = "Jancount" data-align = "Centro"> Jan </th> <the-field = "Febcount" Data-align = "Centre"> "> FeBC (FeBC" FeBCOUND = "FeBcount" Data-align = "Centro"> ">"> FeBC (FeBcount "Data-align =" Center ">"> "> FeBC (FeBcount"/"center"> "> FEBC (FeBCount"/"center "> Data-align = "Center"> março </th> <th data-field = "FirstWarter" data-align = "Center"> Firstwarter </th> <th data-field = "ApRCount" Data-align = "Center"> April </th> <thath- thath-field = "Maycount" Data-align = "Centre"> May </Thyly> data-align = "Center"> jun </th> <th data-field = "SecondQuarter" data-align = "center"> trimestre </th> <th data-field = "julcount" data-align = "center"> julho </th> data-align = "Center"> set </th> <th data-field = "terceiro quarter" data-align = "center"> trimestre 3 </th> <th data-field = "octcount" data-align = "center"> outubro </th> data-align = "Center"> dezembro </th> <th data-field = "foundQuarter" data-align = "center"> trimestre 4 </th> </tr> </sead> </ table>
2. Não há inicialização especial de JS
$('#tb_report').bootstrapTable({url: '/GroupColumns/GetReport', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to set this property (*) pagination: true, //Whether to display pagination (*) sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "server", //Paging method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 10, //Number of Linhas de registro por página (*) Pagelist: [10, 25, 50, 100], // Número de linhas por página para selecionar (*)});Que tal isso, é fácil? Obviamente, algumas pessoas disseram que você pode usar os atributos da tabela para definir URL, paginação e outras informações sem usar a inicialização do JS, diretamente no CSHTML. De fato, se olharmos para sua API, descobriremos que cada atributo inicializa corresponde ao atributo de uma tabela. Digite como
Se o seu formulário não tiver alguns eventos especiais para lidar, não há nenhum problema.
5. Exemplos de código de exportação de dados de tabela
A função de exportação dos dados da tabela também requer algum suporte de JS estendido.
1. Introduzir arquivos JS adicionais
<script src = "~/content/bootstrap-table/extensions/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/master/tablexport.js"> </script>
2. Quando JS é inicializado
$('#tb_departments').bootstrapTable({url: '/Export/GetDepartment', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "client", //Pagination method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 10, //Number of record lines per page (*) pageList: [10, 25, 50, 100], //Number of rows per page to select (*) clickToSelect: true, showExport: true, //Is exportDataType displayed: "basic", //basic', 'all', 'selected'.columns: [{checkbox: true}, {field: 'Name',title: 'Department nome '}, {field:' pomername ', título:' departamento superior '}, {field:' nível ', título:' nível do departamento '}, {field:' desc ', title:' description '},]});Vejamos os pontos -chave: esses dois atributos
ShowExport: true, // Se você deve exibir o exportaçãoDatatype: "Basic", // Basic ',' All ',' Selected'.ShowExport significa se você deve exibir o botão exportado, exportDatatype significa se o modo exportado é a página atual, todos os dados ou dados selecionados.
6. Resumo
O exposto acima é o efeito da função e o código simples para implementá -lo. O blogueiro descobriu que havia vários problemas a serem resolvidos.
1. A função da edição em linha é enviar cada célula ao plano de fundo, o que causará operações frequentes do banco de dados e parecerá inadequado. Não sei se existe uma maneira melhor de enviar cada linha para o plano de fundo.
2. Embora a função de exportação seja muito útil, infelizmente não é suportada pelo navegador do IE. O blogueiro tentou o exemplo no site oficial e parece que o IE não pode exportá -lo. A ser verificado.
O acima é o conteúdo relevante do artefato do componente da tabela de bootstrap tabela [capítulo final] da série de componentes JS introduzida pelo editor. Espero que seja útil para todos!