En un sistema, a menudo hay muchos elementos de menú, cada elemento de menú corresponde a una página. En general, los usuarios solo necesitan usar algunas funciones de uso común. Si necesita ir a menús en cada nivel para encontrar las funciones correspondientes, de hecho es un poco engorroso. Especialmente cuando hay muchos menús y los clientes no están familiarizados con el sistema en su conjunto, si hay un módulo de favoritos similar a un navegador, conecte y guarde algunos menús de uso común, y encuentre la página correspondiente de la página de inicio de estos favoritos cada vez, será realmente salvar y muy conveniente. Este ensayo introduce la idea de implementar estos favoritos en el marco de desarrollo de Bootstrap basado en metrónico.
1. Efecto de procesamiento de interfaz de favoritos del sistema
Para realizar esta función de favoritos, también necesitamos colocar una entrada al módulo de favoritos en la ubicación obvia de la página del sistema, así como la función que se puede agregar a los favoritos correspondientes para cada página.
Después de la comparación, colocamos estas funciones de entrada cerca del título de la página, para que podamos recopilarlas fácil y rápidamente, como se muestra en el siguiente efecto.
Cuando hacemos clic en el botón [Agregar a favoritos] en la página, agregamos el título de página y la conexión correspondientes al registro de favoritos.
En la función [Ver favoritos], podemos mostrar los enlaces de página que hemos agregado, haga clic en uno de los registros para ingresar rápidamente la página correspondiente, que realiza nuestra necesidad de ingresar rápidamente el módulo funcional.
Lo más importante aquí es ordenar los registros de favoritos, moviendo los registros hacia arriba o hacia abajo para que puedan cumplir con el procesamiento de la interfaz.
2. El proceso de implementación de los favoritos del sistema
Después de comprender el efecto de la interfaz anterior de la función favorita de la página del sistema, necesitamos comprender su proceso de implementación específico. Primero, necesitamos diseñar una tabla para almacenar información correspondiente a los favoritos, el título de la página, la dirección de la página, la clasificación y otra información.
La interfaz de diseño de la base de datos se muestra a continuación.
Notamos que los registros de clasificación se almacenan en formato decimal, y los clasificamos por un valor con longitud, de modo que cuando podamos ajustar, podamos modificar el tamaño entre ellos.
Use la base de datos de la herramienta de generación de códigos2Sharp para generar rápidamente el código relacionado subyacente y el controlador web y el código de vista, y luego integrarlo en el marco, para que podamos tener la interfaz de todo el módulo y procesar el código.
Dado que en general, nuestra interfaz de visualización de datos y edición de la edición es relativamente estándar, y los requisitos para la visualización de ingresos de los favoritos son diferentes, necesitamos agregar una vista a la interfaz de la lista para mostrar una interfaz de entrada simple, como se muestra en la figura.
Esta interfaz contiene el procesamiento de movimiento de registros, incluidos hacia arriba o hacia abajo.
Como se mencionó anteriormente, nuestra clasificación de registros se logra principalmente a través del campo SEQ de tipo decimal.
Cuando se inicializa la clase de entidad, asignamos el valor ordenado a la marca de tiempo UNIX de la hora actual.
El código de función DataTimeToint anterior se muestra a continuación, que también es nuestro método de procesamiento comúnmente utilizado.
/// <summary> /// interfaz de tiempo extendida, puede devolver el valor de conformación /// </sumario> /// <param name = "time"> </param> /// <surns> </devuelve> public statatic int DatueToint (esta hora de fecha datetea) {system.datEtime starttime = TimeZone.CurrentTimeZone.tolocaltime (new System.Datime (1970, 1, 1, 1, 1, 1); return (int) (tiempo - tiempo de inicio) .totalSeconds; }Para realizar el movimiento de registro, necesitamos implementar un procesamiento lógico móvil en la capa BLL de servicio para facilitar la llamada en el controlador.
/// <summary> /// Actualizar o ordenar orden /// </sumario> /// <param name = "id"> id id </param> /// <param name = "MoveUp"> moverse hacia arriba o moverse hacia abajo, verdadero en la parte superior </marr> /// <<churns> </return> public bool updown (ID de cadena, bool MoveUp)
El código de función implementado es el siguiente
/// <summary> /// Actualizar o ordenar orden /// </summary> /// <param name = "id"> registro id </param> /// <param name = "MoveUp"> up o mudarse, true </param> /// <surns> </return> public bool updown (string id, bool mudeup) {// configurar las reglas de pedido bool es duda de = verdadero; Resultado de bool = falso; WebfavoriteInfo info = findById (id); if (info! = null) {// Construye la condición de cadena de consulta = ""; if (isDescending) {condición = string.format ("seq {0} {1}", mudoso? ">": "<", info.seq); } else {condición = string.format ("seq {0} {1}", MoveUp? "<": ">", info.seq); } var list = Basedal.Find (condición); decimal newseq = 0m; switch (list.count) {caso 0: newseq = info.seq; // Ya está en la parte superior o inferior, el orden permanece sin cambios por defecto; Caso 1: // Hay un registro arriba o abajo si (isDescending) {newseq = MoveUp? (lista [0] .seq + 1m): (lista [0] .seq - 1m); } else {newseq =! MoveUp? (lista [0] .seq + 1m): (lista [0] .seq - 1m); } romper; Caso 2: // El área media, tome el valor promedio newseq = (List [0] .seq + list [1] .seq) /2m; romper; predeterminado: // El caso donde más de dos es if (MoveUp) {newseq = (list [list.count - 2] .seq + list [list.count - 1] .seq) /2m; } else {newseq = (list [0] .seq + list [1] .seq) / 2m; } romper; } // Info de orden de modificación unificado.seq = newseq; resultado = actualización (info, info.id); } resultado de retorno;}De esta manera, encapsulamos aún más esta interfaz de capa BLL en el controlador MVC para facilitar el procesamiento de llamadas AJAX en el extremo frontal de la página. El código de encapsulación es el siguiente.
/// <summary> //// Mover Regy /// </summary> /// <param name = "id"> registro id </param> //// <param name = "up"> La actualización es verdadera, de lo contrario, es falso </param> /// <surns> </returns> [httppost] public ActionResult Updoow if (! String.isNullorEmpty (id)) {try {result.success = bllFactory <BebFAVEADITE> .instance.updown (id, up); } capt (excepción ex) {result.errormessage = ex.message; }} return toJsonContent (resultado);}De esta manera, podemos llamar a este método en la vista de interfaz en el extremo frontal de la página.
Primero, genere el código HTML front-end a través de JS Binking, como se muestra a continuación.
$ ("#grid_body"). Html (""); $. Cada uno (data.rows, function (i, item) {var tr = "<tr>"; tr + = "<td> <a class = 'btn btn-sm blue' href = '" + item.url + "'>" + item.title + "</a> </td>; "<a href = 'javaScript :;' btn-sm blue 'onClick =/"down ('" + item.id + "')/" title =' lanzar hacia abajo '> <span class =' glyphicon glyphicon-arrow-down '> </span> </a> "; tr + =" </td> "; tr + =" </tr> "; $ ("#grid_body "). Append (tr);});Luego procese a través de la función hacia arriba o hacia abajo y mueva la posición hacia arriba o hacia abajo.
var updownUrl = "/webfavorite/updown" function up (id) {var postdata = {id: id, up: true}; $ .post (updownUrl, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {showtips ("mudarse con éxito"); refresh (); // página data} más {showTips (data.erRormsage);}}); $ .post (updownUrl, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {showtips ("moverse hacia abajo con éxito"); refresh (); // datos de página de actualización} else {showtips (data.errormessage);}});}Esto implementa el orden de movimiento que necesitamos. Además, al agregar, determinamos si el usuario correspondiente ha agregado una URL. Si existe, no hay necesidad de agregarlo repetidamente. El front-end solo necesita llamarlo a través de AJAX y luego responder a él.
A través de la implementación de estos códigos, podemos administrar rápidamente los favoritos e ingresar rápidamente al usuario, proporcionando una experiencia más amigable.
La anterior es la función favorita del enlace de página basada en Bootstrap introducida por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!