En el artículo anterior, el resumen de la experiencia del marco de desarrollo metrónico de Bootstrap se resume [i] Descripción general del marco y procesamiento del módulo de menú, algún resumen básico del marco de desarrollo de Bootstrap, incluido el efecto de interfaz general, así como el diseño, los menús, etc. Este artículo continúa este tema e introduce el procesamiento de datos de datos comúnmente utilizado del contenido de la página, así como el uso del complemento Bootstrap.
En la pantalla de la interfaz de datos, la visualización y la paginación de datos tabulares son operaciones de procesamiento muy comunes. Utilizando el diseño de estilo de Bootstrap y el procesamiento de datos AJAX de JQuery, la pantalla dinámica y la paginación de datos se pueden lograr bien.
1. Lista de la pantalla y procesamiento de paginación 1) Lista de datos de datos
En muchas páginas, generalmente necesitamos enumerar y paginar los registros de la base de datos.
La siguiente sección de la lista de árboles a la izquierda es el área general de visualización de consultas de datos a la derecha, que se divide en dos partes: contenido de consulta y lista de datos. El contenido de la consulta generalmente se coloca en un formulario para el procesamiento. Cuando el usuario desencadena la consulta, procesamos el evento y solicitamos los datos correspondientes del controlador en el fondo de MVC para devolverlo al extremo frontal de la página y mostrar y paginar los datos.
Como se muestra en el código de consulta de la página del menú, se muestra lo siguiente.
<Form ID = "ffsearch"> <div> <div> <belsteleblel> nombre de visual <Lel etiqueta> dirección de conexión web </selebel> <div> <input name = "whc_url" type = "text"> </div> </div> </div> <div> <div> <label> icono del menú web </selabor> <div> <put name = "whc_webicon" type = "text"> </iv> </div> </div> </form>
En el código JS de la página, procesamos el procesamiento de los datos después de que se inicialice la página, como se muestra en el siguiente script.
// Inicialización de la página $ (function () {initjstree (); // Inicialización del árbol bindEvent (); // Búsqueda de procesamiento de eventos vinculantes (CurrentPage); // Inicialización de los datos de la primera página InitDictem (); // Inicialización Información del diccionario});El código HTML para mostrar los datos se muestra a continuación. Se muestra el contenido principal del encabezado de la tabla, y el contenido principal de la tabla grid_body está construido y mostrado dinámicamente por scripts.
<table id = "grid" cellPadding = "0" cellPacing = "0"> <thhead id = "grid_head"> <tr> <th> <input type = "checkbox" onClick = "selectAll (this)"> </th> <th> Nombre de visual icono de menú </th> <th> Número de sistema </th> <th> Operation </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </table> <div> <ul id = 'grid_paging'> </ul> </div>
La pantalla de datos se procesa a través de la función de script de búsqueda después de que la página esté lista. Al procesar, primero pase las condiciones del formulario de número de serie y la información de la condición de paginación en el controlador MVC para obtener los datos de la lista correspondientes, y vincularlo dinámicamente en la interfaz para completar todo el proceso de procesamiento. La captura de pantalla del código específico se muestra a continuación.
Y el código interior
tr += getActionHtml (item.id);
Luego, algunos botones de operación se generan a través de scripts, la interfaz es la siguiente.
2) Procesamiento de paginación de datos
Los datos que se muestran en nuestra página generalmente no son un registro fijo, por lo que la paginación también es un procesamiento necesario, lo que puede mejorar el rendimiento y mejorar la experiencia fácil de usar. La paginación de datos se procesa utilizando el Paginator Bootstrap de Bootstrap. Este control se usa mucho y es un complemento de paginación muy potente.
Bootstrap Paginator Su dirección de código GitHub es: https://github.com/lyonlai/bootstrap-paginator
Se pueden introducir sus ejemplos de uso, consulte: http://lyonlai.github.io/bootstrap-paginator/
Al usar este control, después de introducir estilos de jQuery y Bootstrap y bibliotecas de clase, puede agregarlos y usarlos a través de la siguiente línea de código.
<script src = "/js/bootstrap-paginator.min.js"> </script>
Esta paginación de control se puede implementar manejando eventos con la página y el cambio de página.
Para mostrar contenido en la página, agregamos un DIV al código HTML y declaramos un elemento UL con ID Grid_Paging. El código es el siguiente.
<div> <ul id = 'grid_paging'> </ul> </div>
Entonces el código de procesamiento JS específico es el siguiente.
En el fondo de MVC, necesitamos obtener las condiciones de paginación y las condiciones de datos de formulario aprobadas por el usuario en la página front-end, para que podamos obtener los datos correspondientes en función de estos parámetros y devolverlos al cliente.
Dado que este procesamiento es muy común, podemos ponerlo en el controlador de clase base para el procesamiento. Si se requiere un procesamiento especial, reescribe la función de paginación FindWithPager en el controlador de subclase.
/// <summary> /// consulta la base de datos de acuerdo con las condiciones y devuelve la recopilación de objetos (para la pantalla de datos de paginación) /// </summary> /// <<devuelve> Especifique la recopilación de Object </Devuelve> Public Virtual ActionResSessTWithPager () {// Compruebe si el usuario tiene permiso, de lo contrario lanza un myDenyaccessesseSexception Exception. cadena donde = getPagerCondition (); PagerInfo PagerInfo = getPagerInfo (); List <t> list = basebll.findwithpager (Where, PagerInfo); // Requisitos de formato JSON {Total: 22, filas: {}} // Construye el formato de JSON para pasar el resultado var = new {Total = PagerInfo.RecordCount, Row = List}; return tojsonContentDate (resultado); }Entre ellos, GetPagerInfo es obtener los parámetros de paginación pasados por el usuario. ¿Todavía recuerda los parámetros de URL procesados por la página frontal arriba, como se muestra a continuación?
url = "/menú/findwithpager? Page =" + Page + "& Rows =" + Rows;
El código de implementación de la función GetPagerInfo de controlador MVC específica es el siguiente.
/// <summary> /// Obtener datos de objetos de paginación de acuerdo con los parámetros de solicitud /// </summary> /// <<churns> </devuelve> protegido virtual PagerInfo getPagerInfo () {int pageIndex = request ["Page"] == NULL? 1: int.parse (solicitud ["página"]); int pageSize = request ["filas"] == nulo? 10: int.parse (solicitud ["filas"]); PagerInfo PagerInfo = new PagerInfo (); PagerInfo.CurrenetPageIndex = PageIndex; PagerInfo.pagesize = PageSize; devolver PagerInfo; }Luego, después de obtener las condiciones de formulario y las condiciones de paginación, la clase de lógica comercial pasada al marco es suficiente. Esta ya es la categoría de soporte en la parte inferior del marco y no continuará expandiéndose.
List <t> list = basebll.findwithpager (Where, PagerInfo);
El efecto de la interfaz final es el siguiente
2. Complemento jstree
La sección anterior también mejora la visualización de listas de árboles. En general, si los datos son jerárquicos, la visualización de listas de árboles puede mostrar intuitivamente su estructura. Por lo tanto, en muchos casos, las listas de árboles pueden ayudarnos en la visualización de datos de clasificación.
Por ejemplo, para los datos del usuario, podemos clasificar la estructura o rol organizacional del usuario, y pueden mostrarse visualmente a través de listas de árboles, de modo que cuando buscamos diferentes tipos de listas de usuarios, es fácil de encontrar.
O para los datos del diccionario o los datos de la provincia y la ciudad, también se puede mostrar a través de una lista de árboles.
La dirección oficial del control jstree es https://www.jstree.com/
El sitio web ya ha dejado en claro las instrucciones y las explicaciones de casos de los controles de Jstree. En términos generales, podemos usarlos referiéndolos directamente a los ejemplos.
El código de uso simple de Jstree es el siguiente
$ (function () {$ ('#jstree_demo_div'). jstree ();});Para los eventos de Jstree, generalmente podemos vincular los eventos a través del siguiente código.
$ ('#jstree_demo_div'). on ("cambiando.jstree", function (e, data) {console.log (data.selected);});Para Jstree, generalmente usamos datos JSON para unirse dinámicamente. La definición del formato de datos de este JSON es la siguiente.
{id: "String" // requirió parent: "string" // text requerido: "string" // icono de texto nodo: "cadena" // string para estado personalizado: {abierto: boolean // es el nodo abierto: boolean // es el nodo seleccionado: boolean // es el nodo seleccionado}, li_attr: {} // atributas para el nodo generado A_ATTR: {{} /{{{{} /{{} // atributas para el nodo generado atributos para el nodo generado}En términos generales, usamos el siguiente script para borrar y vincular datos.
$ ('#jstree_demo_div'). data ('jstree', false); // borrar los datos, debe // unir los datos JSON asíncronamente $ .getJson (url, function (data) {$ ('#jstree_demo_div'). jstree ({'' core ': {' data: data, "themes": "" "Levantivos". }). bind ('Loaded.jstree', LoadedFunction);});Si necesitamos proporcionar al usuario una casilla de verificación y establecer el estado seleccionado de Jstree, el efecto de interfaz es el siguiente.
Entonces la función de inicialización general debe cambiarse, como se muestra en el siguiente código
// El código de inicialización de Jstree con CheckBox $ .getJson (url, function (data) {control.jstree ({'plugins': ["checkbox"], // El cuadro de selección 'casilla de verificación': {cascade: "", tres_state: falso}, // no cásico 'core': {'data: "data", ":": "" apazos ". }). bind ('Loaded.jstree', LoadedFunction);Combinando los dos, podemos refinar aún más la unión de inicialización del control JStree en una función pública JS BindJstree.
// Inicializa el control JStee con los datos JSON especificados // Treename es el nombre del árbol Div, URL es la dirección de origen de datos, la casilla de verificación es si se muestra la casilla de verificación, LoadedFunction es la función de devolución de llamada cargada bindjstree (treeName, url, checkbox, cargedfunction) {var control = $ (#' + treename) control.data (' jstree ', falso, falso); 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": { "Responsivo": False}}}). Bind ('Loaded.jstree', LoadedFunction); } else {// Inicialización de la lista de árboles ordinarios $ .getjson (url, function (data) {control.jstree ({'core': {'data': data, "themes": {"receptive": false}}}). bind ('loaded.jstree', carnada de carga);}); }}Por lo tanto, cuando la página vincula Jstree, el código se puede simplificar
// Inicializar la función de la lista de organización initDeptTreeView () {var treeurl = '/user/getMyDeptjStreejson? UserId =@session ["userId"]'; bindjstree ("jstree_div", treeurl); // Cambiar el procesamiento de eventos del control de árbol $ ('#jstree_div'). On ("cambiante.jstree", function (e, data) {var icon = data.node.icon; loadDatabyou (data.selected);}); }Para una lista de casillas de verificación, el código de inicialización es el siguiente.
// Inicializar todos los conjuntos de funciones de todos los usuarios var treeurl = '/function/getroleFunctionJstreyUser? UserId =@session ["userId"]'; bindjstree ("tree_function", treeurl, true); // Permisos de datos de roles, inicialice todos los departamentos First Treeurl = '/user/getMyDeptjStreejson? UserId =@session ["userId"]'; bindjstree ("tree_roledata", treeurl, true);Para las casillas de verificación, generalmente inicializamos los datos y luego establecemos el estado seleccionado de la lista de árboles según sea necesario. Esto no requiere una inicialización frecuente del árbol, lo que puede mejorar efectivamente la experiencia de rendimiento y respuesta.
Después de inicializar la lista de árboles, necesitamos borrar los elementos de selección y luego establecer los elementos de selección que necesitamos. El código específico es el siguiente, preste atención al procesamiento de los eventos Uncheck_All y Check_Node.
// Inicializar la función de permiso de datos de roles (organización) initroledata (id) {if (id! = "") {Var treemenu = "tree_roledata"; $ ('#' + Treemenu) .jstree ("uncheck_all"); // desmarque toda selección // marque el contenido especificado $ .getjson ("/roledata/getroledatalist? r =" + math.random () + "&" + id, function (json) {$ .each (json, function (i, item) {$ ('##' Treemenu) .jstree ('check_node', item); // Seleccionar nodo}); }}Al guardar datos, obtenemos la lista de selección del nodo JStee y luego guardamos los datos. El código específico es el siguiente.
// Guardar la función de permiso de datos de roles Saveroledata (rolyId) {var oUlist = $ ('#tree_roledata'). Jstree ('get_selected'); var url = '/roledata/updatedata? r =' + math.random (); var postdata = {rolyId: rolyId, oUlist: oUlist.Join (',')}; $ .post (url, postdata, function (json) {initroledata (rolyId);}). error (function () {showTips ("No está autorizado a usar esta función, comuníquese con el administrador para manejarlo");}); }De acuerdo, después de todo, he introducido la pantalla de datos regular y la paginación de datos; Jstree Binking, Procesamiento de eventos, almacenamiento de datos y otras operaciones. Espero obtener su continuo apoyo. Continuaré introduciendo los puntos clave involucrados en el desarrollo de bootstrap y el uso de varios complementos para que el aprendizaje sea más concreto y práctico, y puede proporcionarnos referencias útiles a proyectos de desarrollo de precios reales.
El contenido anterior es el resumen de la experiencia del marco de desarrollo metrónico de Bootstrap basado en el procesamiento de la paginación de la lista Bootstrap [2] y el uso de Jstree enchufable, espero que sea útil para todos. Me gustaría agradecerle por su apoyo al sitio web de Wulin.com. ¡Creo que lo haremos mejor!