En el artículo anterior: el marco metrónico basado en Bootstrap implementa la función favorita del enlace de la página, que introduce la implementación de la función favorita del enlace y la clasificación de registros favoritos. Este ensayo utiliza principalmente botones de función para mover los registros de recopilación. Aunque la función se implementa bien, después de que salió el artículo, algunos lectores señalaron que es más conveniente clasificar usando Direct Arrast. Por lo tanto, se estudió la clasificación de registros de la lista y, por lo tanto, introdujo cómo usar el componente JS de código abierto en ordenable para implementar la clasificación de arrastre. Este ensayo introduce la aplicación de este componente en la conexión de la clasificación de los favoritos.
1. Revisión de la clasificación y procesamiento de los registros favoritos
El procesamiento de favoritos introducido en el ensayo anterior es principalmente para facilitar a los usuarios ingresar rápidamente a un módulo de funciones de uso común. A medida que aumenta el número de registros favoritos, es necesario que los clasifiquemos razonablemente para facilitar nuestro uso.
La interfaz de clasificación de registro de favoritos original es la siguiente.
Esta interfaz contiene el procesamiento de movimiento de registros, incluidos hacia arriba o hacia abajo.
El código lógico implementado ajusta principalmente la clasificación de los registros anteriores y posteriores del registro actual, realizando así el ajuste de posición. El código se muestra a continuación.
/// <summary> /// Actualizar o ordenar orden /// </summary> /// <param name = "id"> ID registrado </mamr> /// <param name = "MoveUp"> up o moverse, true </param> /// <surns> </return> public bool updown (id id, bool mudeup) {// configurar las reglas de los pedidos para clasificar bool es dudascendentes = verdadero verdadero = verdadero verdadero = verdadero; falso; webFeareDeInfo info = findById (id); if (info! = null) {// construye la cadena de la consulta condición = ""; if (isDescending) {condición = string.format ("seq {0} {1}", mudoso? ">": "<", info.seq);} más ? (Lista [0] .seq + 1m): (List [0] .seq - 1m);} else {newseq =! MoveUp? (lista [0] .seq + 1m): (lista [0] .seq - 1m);} break; caso 2: // área central, tome el valor promedio newseq = (list [0] .seq + list [1] .seq)/2m; break; default: // más de dos casos si (mudeUp) {newseq = (list.Count - 2] .seq + list [list [list [list. 2m;} else {newseq = (List [0] .seq + list [1] .seq)/2m;} break;} // Modificación unificada Info.seq = newseq; result = update (info, info.id);} Resultado de retorno;}En el código anterior, determinando la posición del registro móvil actual y luego obteniendo los registros ordenados arriba o abajo. Si el número de registros es 0, está en la parte superior o inferior. Si es 1 registro, entonces sumar o restar un cierto valor del registro es como el valor de la nueva posición ordenada. Si es un registro mayor o igual a 2 registros, tome los dos registros de sus valores más recientes y promedio.
2. Proceso de arrastre y clasificación de favoritos
El procesamiento anterior puede cumplir con los requisitos básicos y la posición de ajuste también es correcta. Pero si podemos arrastrar los elementos de la lista para ordenar, será más conveniente y amigable.
Basado en arrastrar la clasificación, encontré un mejor componente de procesamiento JS (ordenable), que se ubica relativamente alto en GitHub, y supongo que hay muchas personas que lo usan.
El uso de este control es relativamente simple, el código es el siguiente.
<ul id = "items"> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> </ul> var el = document.getElementById ('items'); var sortable = new Sortable (El);Veamos primero la interfaz que finalmente integré con SATABLE.
De esta manera podemos ajustar la posición moviendo el registro.
Todavía usamos la paginación para mostrar listas para mejorar la eficiencia de la recuperación.
<Div> <Viv> <viv> <span> display </span> <select id = "Rows" onChange = "Changeerows ()"> <Option> 10 </opción> <opción seleccionada> 50 </ppection> <opción> 100 </opción> <pection> 1000 </opción> </select> <span> Records </span> </span) id = 'totalPageCount'> 0 </span> páginas. </div> <hr/> <div id = "grid_body" class = 'list-group'> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div>
Aquí podemos construir una serie de registros de listas en Grid_Body.
<Div> <span aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http: // localhost: 2251/user/index? tid = 2744dbf5-a648-47c1-9e9a-d8b405884389"> Información del usuario del sistema </a> <i> ✖ </i> </div>
Después de actualizar el registro, el componente clasificable tiene un evento de ONUPDate que manejar, como se muestra a continuación.
var grid_body = document.getElementById ('grid_body'); new Sortable (grid_body, {handle: '.glyphiCon-mOve', filtro: ".js-remove", animación: 150, en onupdate: function (/** evt) {var list = []; // construye el objeto de colección $ ('. Lista-Gruprup div a'). {list.push ({'text': item.Text, 'value': item.href});}); var url = "/webfavorite/editfavorite"; var postdata = {list: list}; $. post (url, postdata, function (json) {var data = $ .parsejson (json); if (data.success) Succeeds "); refresh (); // Actualizar datos de página} else {showtips (data.errormessage);}});},});De esta manera, entregamos el procesamiento de negocios al método EditFavorite, que actualiza principalmente los registros de la lista de manera unificada. La lógica de procesamiento debe eliminar primero los registros anteriores, luego agregar los registros de la colección de la lista y establecer sus registros de clasificación en el orden apropiado.
/// <summary> //// Editar lista de registros /// </summary> /// <param name = "list"> Regy List </param> /// <surns> </surnsures> [httppost] public ActionResult EditFavorite (list <CLISTITEM> LIST) {CommonResult Result = new CommonResult (); var UyerId = Currentuser.id; dbtransaction trans) Bllfactory <SebFeareite> .instance.createTransaction (); if (trans Elemento en la lista) {webfavoriteInfo info = new WebFeaVeTiteInfo (); info.title = item.text; info.url = item.value; info.seq = i-; info.creator = currentUser.id.ToString (); bllfactory <Bebefavorite> .instance.inter true;} catch (excepción ex) {result.errormessage = ex.message; trans.rollback (); loghelper.error (ex);}} return tojsonContent (resultado);}Lo anterior es una mejora para arrastrar y ordenar la lista de favoritos. Espero que el componente JS ordenable pueda usarse razonablemente en proyectos reales para mejorar los resultados del examen físico de nuestros usuarios. 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!