No artigo anterior, o resumo da experiência da estrutura de desenvolvimento metrônico de Bootstrap está resumido [i] Visão geral da estrutura e processamento do módulo de menu, algum resumo básico da estrutura de desenvolvimento de bootstrap, incluindo o efeito geral da interface, bem como o Layout, os menus, etc. Este artigo continua o tópico e o tópico é usado o que é usado o que é usado o processo de pagamento de dados, como o tópico, o tópico é o que se usa com o tópico do tópico, como o tópico, o que é usado para que o tópico seja usado com o que é usado o tópico de tópico.
Na exibição da interface de dados, a exibição e a paginação dos dados tabulares são operações de processamento muito comuns. Usando o layout de estilo da Bootstrap e o processamento de dados do Ajax da JQuery, a exibição dinâmica e a paginação dos dados podem ser alcançados bem.
1. Lista de exibição e processamento de paginação 1) Lista de dados
Em muitas páginas, geralmente precisamos listar e pagar registros de banco de dados.
A seção a seguir da lista de árvores à esquerda é a área de exibição de consulta de dados geral à direita, que é dividida em duas partes: conteúdo de consulta e lista de dados. O conteúdo da consulta é geralmente colocado em forma de processamento. Quando o usuário aciona a consulta, processamos o evento e solicitamos os dados correspondentes do controlador no plano de fundo do MVC para devolvê -los à extremidade frontal da página e exibir e paginar os dados.
Conforme mostrado no código da consulta da página de menu, o seguinte é mostrado.
<form id = "ffSearch"> <div> <div> <breting> Nome de exibição </crety> <div> <name de entrada = "whc_name" type = "text"> </div> </div> </div> <div> <div> <belt> função id </label> <div> <input name = "whc_function" tipo = ""> <Beel> Endereço da conexão da web </cretel> <div> <input name = "whc_url" type = "text"> </div> </div> </div> <div> <div> <breting> Ícone do menu da web </celt> <div> <input name = "whc_webicon"/"text"> </niv> <//<///<//> <//"
No código JS da página, processamos o processamento dos dados após a inicialização da página, conforme mostrado no script a seguir.
// Página inicialização $ (function () {initjstree (); // árvore de inicialização bindEvent (); // Pesquisa de processamento de eventos de ligação (currentpage); // inicialização dos dados da primeira página initDictiTem (); // Informações de dicionário de inicialização});O código HTML para exibir os dados é mostrado abaixo. O conteúdo principal do cabeçalho da tabela é exibido e o conteúdo principal da tabela grid_body é construído dinamicamente e exibido pelos scripts.
<table id="grid" cellpadding="0" cellpacing="0"> <thead id="grid_head"> <tr> <th><input type="checkbox" onclick="selectAll(this)"></th> <th>Display name</th> <th>Sorting</th> <th>Function ID</th> <th>Menu visible</th> <th>Web connection address</th> <th>Web Ícone do menu </th> <th> Número do sistema </th> <th> operação </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </ table> <div> <ul id = 'grid_paging'> </ul> </liv>
A exibição dos dados é processada através da função de script de pesquisa após a página estar pronta. Ao processar, primeiro passe as condições do formulário de número de série e as informações da condição de paginação no controlador MVC para obter os dados da lista correspondente e vinculá -los dinamicamente na interface para concluir todo o processo de processamento. A tela de código específica é mostrada abaixo.
E o código dentro
tr += getActionHtml (item.id);
Em seguida, alguns botões de operação são gerados através de scripts, a interface é a seguinte.
2) Processamento de paginação de dados
Os dados exibidos em nossa página geralmente não são um registro fixo; portanto, a paginação também é um processamento necessário, o que pode melhorar o desempenho e melhorar a experiência amigável ao usuário. A paginação dos dados é processada usando o paginador de boot-in de Bootstrap. Esse controle é muito usado e é um plug -in de paginação muito poderoso.
Bootstrap Paginator O endereço do código do github é: https://github.com/lyonlai/bootstrap-paginator
Seus exemplos de uso podem ser introduzidos, consulte: http://lyonlai.github.io/bootstrap-paginator/
Ao usar esse controle, depois de introduzir estilos de jQuery e bootstrap e bibliotecas de classes, você pode adicioná -las e usá -las através da seguinte linha de código.
<script src = "/js/bootstrap-paginator.min.js"> </script>
Esta paginação de controle pode ser implementada lidando com eventos clicados em página clicados e mudanças de página.
Para exibir conteúdo na página, adicionamos uma div ao código HTML e declaramos um elemento UL com ID Grid_Paging. O código é o seguinte.
<div> <ul id = 'grid_paging' ></ul> </div>
Em seguida, o código de processamento JS específico é o seguinte.
No fundo do MVC, precisamos obter as condições de paginação e formar condições de dados passadas pelo usuário na página front-end, para que possamos obter os dados correspondentes com base nesses parâmetros e devolvê-los ao cliente.
Como esse processamento é muito comum, podemos colocá -lo no controlador de classe base para processamento. Se for necessário processamento especial, reescreva a função de paginação FindWithPager no controlador da subclasse.
/// <summary> /// Consulte o banco de dados de acordo com as condições e retorne a coleção de objetos (para exibição de dados de paginação) /// </summary> /// <lorpns> especifique a coleta do objeto </returns> public virtual ActionResult FindWithPager () {// Verifique se o usuário tem permissão, de outra forma, throwredResultEnCescestWithPager () {// verifique se o usuário tem permissão, de outra forma, (de outra forma string where = getPagerCondition (); Pagerinfo Pagerinfo = getPagerInfo (); List <t> list = basebll.findWithPager (onde, Pagerinfo); // requisitos de formato json {Total: 22, linhas: {}} // Construa o formato de json para passar o Var Result = new {total = Pagerinfo.RecordCount, linhas = list}; retornar ajSoNContentDate (resultado); }Entre eles, o GetPagerInfo é obter os parâmetros de paginação passados pelo usuário. Você ainda se lembra dos parâmetros da URL processados pela página front-end acima, como mostrado abaixo.
url = "/menu/findWithPager? página =" + página + "& linhas =" + linhas;
O código de implementação da função GetPagerInfo do controlador MVC específico é a seguinte.
/// <summary> /// Obtenha dados do objeto de paginação de acordo com os parâmetros de solicitação /// </summary> /// <lorpns> </returns> Pagerinfo virtual protegido GetPagerInfo () {int PageIndex = request ["página"] == NULL? 1: int.parse (solicitação ["página"]); int páginasize = request ["linhas"] == null? 10: int.parse (solicitação ["linhas"]); Pagerinfo Pagerinfo = new Pagerinfo (); Pagerinfo.currenetPageIndex = PageIndex; PagerInfo.Pagesize = PageSize; retornar Pagerinfo; }Depois de obter as condições do formulário e as condições de paginação, a classe de lógica de negócios passada para a estrutura é suficiente. Esta já é a categoria de suporte na parte inferior da estrutura e não continuará a se expandir.
List <t> list = basebll.findWithPager (onde, Pagerinfo);
O efeito final da interface é o seguinte
2. Plugin JSTEE
A seção anterior também melhora a exibição de listas de árvores. Em geral, se os dados forem hierárquicos, a exibição de listas de árvores poderá exibir intuitivamente sua estrutura. Portanto, em muitos casos, as listas de árvores podem nos ajudar na exibição de dados de classificação.
Por exemplo, para dados do usuário, podemos classificar a estrutura ou a função organizacional do usuário e eles podem ser exibidos visualmente através de listas de árvores, para que, quando procuremos por diferentes tipos de listas de usuários, seja fácil de encontrar.
Ou para dados de dicionário ou dados da província e da cidade, eles também podem ser exibidos através de uma lista de árvores.
O endereço oficial do controle JSTEE é https://www.jstree.com/
O site já deixou claro sobre as instruções e explicações de casos dos controles da JSTEE. De um modo geral, podemos usá -los referindo -se diretamente aos exemplos.
O código de uso simples do JSTEE é o seguinte
$ (function () {$ ('#jstree_demo_div'). JSTEE ();});Para eventos da JSTEE, geralmente podemos vincular eventos através do código a seguir.
$ ('#jStee_Demo_Div').Para JSTree, geralmente usamos dados JSON para ligar dinamicamente. A definição de formato de dados deste JSON é a seguinte.
{ id : "string" // required parent : "string" // required text : "string" // node text icon : "string" // string for custom state : { opened : boolean // is the node open disabled : boolean // is the node disabled selected : boolean // is the node selected }, li_attr : {} // attributes for the generated LI node a_attr : {} // atributos para o nó gerado}De um modo geral, usamos o seguinte script para limpar e vincular dados.
$ ('#jStee_Demo_Div'). Dados ('JSTEE', false); // limpe os dados, você deve // vincular dados JSON de forma assíncrona $ .getjson (url, function (dados) {$ ('#JSTEE_DEMO_DIV'). }). bind ('carreged.jstree', carregamento de função);});Se precisarmos fornecer ao usuário uma caixa de seleção e definir o status selecionado do JSTEE, o efeito da interface é o seguinte.
Em seguida, a função de inicialização geral precisa ser alterada, conforme mostrado no código a seguir
//The initialization code of JSTree with checkbox $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //The selection box 'checkbox': { cascade: "", three_state: false }, //Not cascaded 'core': { 'data': data, "themes": { "responsive": false } } }).Combinando os dois, podemos refinar ainda mais a ligação de inicialização do controle JSTEE em uma função pública JS BindjStree.
// Inicialize o controle JSTee com os dados json especificados // Treeneame é o nome da DIV da árvore, o URL é o endereço da fonte de dados, a caixa de seleção é exibir a caixa de seleção, Function carregado é a função de retorno de chamada carregada BindjStree (Treename), URL, caixa de seleção, carregamento de função) {var = $ ('#' + thered) control.de.DaTa, LOULDFunction) {var = $ ('#' ' + thered) control.de.DATA, argumentos [2] || falso; //Set the default value of checkbox to false if(isCheck) { //Initialize the checkbox tree $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //The selection box appears 'checkbox': { cascade: "", three_state: false }, //Not cascaded 'core': { 'data': data, "themes": {"Responsive": false}}}). } else {// inicialização da lista de árvores comuns $ .getjson (url, function (dados) {control.jstree ({'core': {'dados': dados, "temas": {"responsivo": false}}}). }}Portanto, quando a página liga Jstree, o código pode ser simplificado
// Inicialize a função da lista da organização initDeptTreeView () {var Treeurl = '/user/getMyDeptJSTeejson? UserID =@session ["userID"]'; bindjstree ("JSTEE_DIV", TREEURL); // altere o processamento de eventos do controle de árvores $ ('#jstree_div'). }Para uma lista de caixas de seleção, o código de inicialização é o seguinte.
// Inicialize todos os conjuntos de funções de todos os usuários varreurl = '/function/getRoleFunctionJstreeByUser? UserID =@session ["userID"]; bindjstree ("Tree_function", Treeurl, verdadeiro); // Permissões de dados de função, inicialize todos os departamentos primeiro Treeurl = '/user/getMyDepTJSTEEJSON? UserID =@Session ["UserID"]; bindjstree ("árvore_roledata", Treeurl, verdadeiro);Para caixas de seleção, geralmente inicializamos os dados e definimos o status selecionado da lista de árvores, conforme necessário. Isso não requer inicialização frequente da árvore, que pode melhorar efetivamente a experiência de desempenho e resposta.
Depois de inicializar a lista de árvores, precisamos limpar os itens de seleção e definir os itens de seleção de que precisamos. O código específico é o seguinte, preste atenção ao processamento dos eventos umarck_all e check_node.
// Inicialize o conjunto de permissão de dados da função (organização) função initRoledata (id) {if (id! = "") {Var Treemenu = "Tree_roledata"; ('#' + Treemenu) .JSTEE ("UNLECK_ALL"); // Desmarque toda a seleção // Marque o conteúdo especificado $ .getjson ("/roledata/getRoledatalist? r =" + math.random () + "& role =" + id, função (json) ($ .Each ( Treemenu) .jstree ('check_node', item); // selecione Node}); }}Ao salvar os dados, obtemos a lista de seleção de nós do JSTEE e, em seguida, salvamos os dados. O código específico é o seguinte.
// Salvar a função de permissão de dados da função Saveroledata (Roleid) {var Oulist = $ ('#Tree_roledata'). JSTEE ('get_selected'); var url = '/roledata/updatedata? r =' + math.random (); var postData = {roleid: roleid, oulist: Oulist.join (',')}; $ .Post (URL, PostData, function (JSON) {initRoledata (RoleId);}). Error (function () {ShowTips ("Você não está autorizado a usar esta função, entre em contato com o administrador para lidar com isso.");}); }Ok, afinal, introduzi a exibição regular de dados e a paginação de dados; JSTEE LINDO, processamento de eventos, armazenamento de dados e outras operações. Espero obter seu apoio contínuo. Continuarei a introduzir os principais pontos envolvidos no desenvolvimento de bootstrap e o uso de vários plug-ins para tornar o aprendizado mais concreto e prático e pode nos fornecer referências úteis a projetos de desenvolvimento do preço real.
O conteúdo acima é o resumo da experiência da estrutura de desenvolvimento metrônico de bootstrap com base no processamento da paginação e plug-in, espero que seja útil para todos. Gostaria de agradecer seu apoio ao site Wulin.com. Eu acredito que faremos melhor!