Em um sistema, geralmente existem muitos itens de menu, cada item de menu corresponde a uma página. Geralmente, os usuários precisam usar apenas algumas funções comumente usadas. Se você precisar ir a menus em cada nível para encontrar funções correspondentes, é realmente um pouco pesado. Especialmente quando há muitos menus e os clientes não estão familiarizados com o sistema como um todo, se houver um módulo favorito semelhante a um navegador, conectar e salvar alguns menus comumente usados e encontre a página correspondente da página inicial desses favoritos sempre, será realmente que é realmente economizando trabalho e muito conveniente. Este ensaio apresenta a idéia de implementar esses favoritos na estrutura de desenvolvimento de bootstrap baseada em metrônica.
1. Efeito de processamento dos favoritos do sistema
Para realizar essa função favorita, também precisamos colocar uma entrada no módulo Favoritos na localização óbvia da página do sistema, bem como a função que pode ser adicionada aos favoritos correspondentes para cada página.
Após a comparação, colocamos essas funções de entrada perto do título da página, para que possamos coletá -las de maneira fácil e rápida, conforme mostrado no efeito a seguir.
Quando clicamos no botão [Adicionar aos favoritos] na página, adicionamos o título da página correspondente e a conexão ao registro dos favoritos.
Na função [View Favoritos], podemos exibir os links de página que adicionamos, clique em um dos registros para inserir rapidamente a página correspondente, que realiza nossa necessidade de inserir rapidamente o módulo funcional.
O mais importante aqui é classificar os registros favoritos, movendo os registros para cima ou para baixo para que eles possam estar em conformidade com o processamento da interface.
2. O processo de implementação dos favoritos do sistema
Depois de entender o efeito da interface acima da função favorita da página do sistema, precisamos entender seu processo específico de implementação. Primeiro, precisamos projetar uma tabela para armazenar informações correspondentes a favoritos, título da página, endereço da página, classificação e outras informações.
A interface de design do banco de dados é mostrada abaixo.
Percebemos que os registros de classificação são armazenados em formato decimal e os classificamos por um valor com longitude, para que, quando pudermos ajustar, possamos modificar o tamanho entre eles.
Use o banco de dados da ferramenta de geração de código 2Sharp para gerar rapidamente o código relacionado e o controlador da Web subjacente e o código de visualização e, em seguida, integrá -lo à estrutura, para que possamos ter a interface de todo o módulo e processar o código.
Como em geral, nossa interface de exibição e edição de dados é relativamente padrão, e os requisitos para a exibição de entrada dos favoritos são diferentes, precisamos adicionar uma visualização à interface da lista para exibir uma interface de entrada simples, conforme mostrado na figura.
Essa interface contém o processamento de movimentos de registros, incluindo para cima ou para baixo.
Como mencionado anteriormente, nossa classificação de registros é alcançada principalmente através do campo SEQ do tipo decimal.
Quando a classe de entidade é inicializada, atribuímos o valor classificado ao registro de data e hora do UNIX do horário atual.
O código da função DATETIMETION acima é mostrado abaixo, que também é o nosso método de processamento comumente usado.
/// <summary> /// Extended time interface, can return the shaping value /// </summary> /// <param name="time"></param> /// <returns></returns> public static int DateTimeToInt(this DateTime time) { System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)); return (int) (tempo - starttime) .TotalSeconds; }Para realizar o movimento de registro, precisamos implementar um processamento lógico em movimento na camada BLL de serviço para facilitar a chamada no controlador.
/// <summary> /// Atualize o pedido ou descendente /// </summary> /// <param name = "id"> ID gravado </am param> /// <param name = "moveup"> mova -se ou mova -se para baixo, true no top </aman> /// <retornos> </returns> public bool updown (string id, bool move)
O código de função implementado é o seguinte
/// <summary> /// Atualize ou descendo o pedido /// </summary> /// <param name = "id"> registro id </param> /// <param name = "moveup"> up ou movimentado, true </amam> /// <lorpns> </returns> public bool updown (string id, bool wearp) {/ Set; resultado bool = false; WebFavoriteInfo info = findbyId (id); if (info! = null) {// Construa a consulta String condition = ""; if (isDescending) {condition = string.format ("seq {0} {1}", moveup? ">": "<", info.seq); } else {condition = string.format ("seq {0} {1}", moveup? "<": ">", info.seq); } var list = Basedal.find (condição); decimal newseq = 0m; switch (list.count) {case 0: newseq = info.seq; // já está na parte superior ou inferior, o pedido permanece inalterado por padrão; Caso 1: // Há um registro acima ou abaixo se (isDescending) {newseq = moveUp? (Lista [0] .seq + 1m): (Lista [0] .seq - 1m); } else {newseq =! moveUp? (Lista [0] .seq + 1m): (Lista [0] .seq - 1m); } quebrar; Caso 2: // A área do meio, pegue o valor médio newseq = (lista [0] .seq + lista [1] .seq) /2m; quebrar; padrão: // o caso em que mais de dois são if (moveup) {newseq = (list [list.count - 2] .seq + list [list.count - 1] .seq) /2m; } else {newseq = (list [0] .seq + list [1] .seq) / 2m; } quebrar; } // Modificação unificada info.seq = newseq; resultado = atualização (info, info.id); } resultado de retorno;}Dessa forma, encapsulamos ainda essa interface da camada BLL no controlador MVC para facilitar o processamento de chamadas do AJAX na extremidade frontal da página. O código de encapsulamento é o seguinte.
/// <summary> //// mover registro /// </summary> /// <param name = "id"> registrar id </param> /// <param name = "up"> atualização é true, caso contrário, é false </param> // <lortns> </returns> [httppost] public ActionResult (string IDS, bool) {upttpost] (httpost] public ActionResult (string idan) { if (! string.isnullorEmpty (id)) {try {result.success = bllFactory <webFavorite> .instance.Updown (id, up); } catch (Exceção ex) {result.errorMessage = ex.Message; }} Retorne tojsonContent (resultado);}Dessa forma, podemos chamar esse método na visualização da interface na extremidade frontal da página.
Primeiro, gerar código HTML front-end através da ligação JS, como mostrado abaixo.
$ ("#grid_body"). html (""); $. cada (data.rows, function (i, item) {var tr = "<tr>"; tr + = "<td> <a class = 'btn btn-sm azul' href = '" + item.url + ">" + item.tticle + "/a; "<a href = 'javascript:; btn-sm azul 'OnClick =/"Down ('" + item.id + "')/" title =' mover para baixo '> <span class =' glyphicon glyphicon-arrow-down '> </span> </a> "; trid_body".Em seguida, processe -o através da função para cima ou para baixo e mova a posição para cima ou para baixo.
var updOwnurl = "/webfavorite/updown" function up (id) {var postData = {id: id, up: true}; $ .post (updOwnurl, pós -dados, função (json) {var data = $ .parsejson (json); if (data.success) {showTips ("mova -se com sucesso"); refresh (); // atualizar dados da página} (shostips.erormessage);}}; }; $ .Post (updOwnurl, pós -dados, função (json) {var data = $ .parsejson (json); if (data.success) {showTips ("mova -se para baixo com sucesso"); refresh (); // atualizar dados da página} {showtsips (dataMormessage);}});Isso implementa a ordem de movimento que precisamos. Além disso, ao adicionar, determinamos se o usuário correspondente adicionou um URL. Se existir, não há necessidade de adicioná -lo repetidamente. O front-end só precisa chamá-lo através do Ajax e depois responder a ele.
Através da implementação desses códigos, podemos gerenciar rapidamente os favoritos e entrar rapidamente no usuário, proporcionando uma experiência mais amigável.
O exposto acima é a função favorita do link da página com base no bootstrap introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!