Recientemente, debido a que el trabajo requiere un componente de cuadro desplegable de árbol, generalmente hay dos métodos de implementación después de buscar información. Primero, se implementa usando ZTree; En segundo lugar, se implementa usando EasyUI. Debido a que el front-end de la compañía no está diseñado con EasyUi, elegí Ztree para implementar el árbol desplegable aquí.
Aquí, un formato de datos simple (es decir, un formato JSON simple) se usa similar al siguiente JSON:
var znodes = [{id: 1, pid: 0, nombre: "Beijing"}, {id: 2, pid: 0, nombre: "Tianjin"}, {id: 3, pid: 0, nombre: "Shanghai"}, {id: 6, pid: 0, nombre: "Chongqqing"}, {Id: 4, pid: 0, nombre: ", name: Abrir: True, NoCheck: True}, {id: 41, Pid: 4, nombre: "Shijiazhuang"}, {id: 42, pid: 4, nombre: "baoding"}, {id: 43, pid: 4, nombre: "handan"}, {id: 44, pid: 4, name: "Chengde"},},}: 5, 5, 5, pid: 0, pid: 0, pid: 0, pid: 0, pid: 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, Pid: 5, Pid: 5, Pid: 0, Pid: 0, Pid: 0, Pid: 0, Pid: 5, PiD Nombre: "Provincia de Guangdong", Open: True, NoCheck: True}, {id: 51, pid: 5, nombre: "Guangzhou"}, {id: 52, pid: 5, name: "shenzhen"}, {id: 53, pid: 5, nombre: "dongguan"}, {id: 54, pid: 5, nombre " {id:6, pId:0, name:"Fujian Province", open:true, nocheck:true}, {id:61, pId:6, name:"Fuzhou"}, {id:62, pId:6, name:"Xiamen"}, {id:63, pId:6, name:"Quanzhou"}, {id:64, pId:6, Nombre: "sanming"}];Aquí, primero se necesita un bean de entidad para encapsular los datos encontrados correspondientes, de la siguiente manera:
clase pública ZTreeNode {// ID Private String ID; // ID de padre String private String PID; // Nombre de visualización Nombre de cadena privada; // si se debe abrir (el valor predeterminado no se abre aquí, si es necesario abrir, establecido en verdadero) // Private Boolean Open; // ¿Puede seleccionar (establecer si el nodo se puede seleccionar de forma predeterminada y no se puede seleccionar el nodo correspondiente a SET en True) // nocheck booleano privado; /** Getter y Setter*/}Cabe señalar aquí que la segunda letra en PID está capitalizada. Si se escribe en minúsculas, no se puede construir en una estructura de árbol. Todos son nodos raíz.
Luego, convierta los datos encontrados desde la base de datos en los frijoles correspondientes requeridos por Ztree, y luego conviértelo en el JSON correspondiente. El código es el siguiente:
// Obtenga el árbol de clasificación de productos y return JSON public String getGoodScategoryTreeJson () {List <GoodScategory> AllGoodScategoryList = GoodScategoryService.getGoodScateRyTreeJson (); Lista <ZtreeNode> ZTreeList = new ArrayList <ZTreeNode> (); para (GoodScategory gcty: AllGoodScategoryList) {zTreeNode treeNADE = new ZTreeNode (); treeNADE.SetId (gcty.getId ()); treeNade.setPid (gcty.getParent () == null? "": gcty.getParent (). getId ()); treeNADE.SetName (gcty.getName ()); ztreelist.add (treeNade); } return aJax (zTreeList); }Convertir la lista al método JSON correspondiente, como sigue:
El kit de herramientas JSON utilizado:
importar org.springframework.base.util.jsonutil; encabezado de cadena final estática privada_encoding = "utf-8"; private static final boolean encabezado_no_no_cache = true; static final static string encabezado_text_content_type = "text/sencillo"; private string string string string_json_content_type = "text/" outy//outy//outtle "stated string string string string string_json_content_ctype =" text/"outy////outtle" stated string string string string string strit AJAX (String Content, String ContentType) {try {httpservletResponse respuesta = initResponse (contentType); Response.getWriter (). Write (Content); Response.getWriter (). Flush (); } catch (ioException e) {E.PrintStackTrace (); } devolver ninguno; } // Salida AJAX String protegido Ajax (Texto de cadena) {return aJax (text, header_text_content_type); } // Salida AJAX Cadena protegida Ajax (estado de estado) {httpservletResponse respuesta = initResponse (Header_JSON_CONTENT_TYPE); Map <string, string> jsonmap = new Hashmap <String, String> (); jsonmap.put (status_parameter_name, status.toString ()); Jsonutil.tojson (respuesta, jsonmap); no devuelve ninguno; } // Salida Ajax String protegido Ajax (estado de estado, mensaje de cadena) {HttpServletResponse Response = initResponse (Header_Json_Content_Type); Map <string, string> jsonmap = new Hashmap <String, String> (); jsonmap.put (status_parameter_name, status.toString ()); jsonmap.put (message_parameter_name, mensaje); Jsonutil.tojson (respuesta, jsonmap); no devuelve ninguno; } // Salida AJAX Cadena protegida según el objeto Ajax (objeto Object) {httpservletResponse respuesta = initResponse (header_json_content_type); Jsonutil.tojson (respuesta, objeto); no devuelve ninguno; } // Salida de acuerdo con el estado booleano Ajax String protegido Ajax (boolean booleanStatus) {httpServletResponse respuesta = initResponse (Header_Json_Content_Type); Map <string, object> jsonmap = new Hashmap <String, Object> (); jsonmap.put (status_parameter_name, booleanStatus); Jsonutil.tojson (respuesta, jsonmap); no devuelve ninguno; } private httpServletResponse InitResponse (String ContentType) {httpServletResponse respuesta = servletactionContext.getResponse (); respuesta.setContentType (contentType + "; charset =" + header_encoding); if (header_no_cache) {Response.SetDateHeader ("expiros", 1l); respuesta.AddHeader ("Pragma", "No-Cache"); Response.setheader ("Cache-Control", "No-Cache, no-store, max-edad = 0"); } Respuesta de retorno; }De esta manera, los datos requeridos por la recepción se sacan de la biblioteca y se encapsan en el JSON correspondiente.
La siguiente es la implementación de la recepción. Los JS y CSS que la recepción necesita importar son los siguientes:
<link rel = "stylesheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "stylesheet" href = "$ {base} /template/ztree/css/ztreestyle/ztreestyle.css" types " type = "text/javaScript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>Aquí, solo demo.css se agrega solo, y los otros están oficialmente formulados. Demo.css se usa para modificar el CSS utilizado por la demostración oficial, de la siguiente manera (hay estilos redundantes aquí que no se han eliminado);
div.content_wrap {ancho: 400px;} div.content_wrap div.left {float: left;} div.content_wrap div.right {float: right; width: 340px;} Div.zTreedeMoback {text-align: izquierda;} ul.ztree {margen-top: 10px; border; #6177775; fondo: #fefefe; ancho: 220px; altura: 360px; overflow-y: scroll; overflow-x: auto;} ul.log {border: 1px sólido #6177755; fondo: #f0f6e4; ancho: 300px; altura: 170px; overflow: hidden;} ul {altura: 45px;} ul.log li {color: #6666666; list-style: none; padding-left: 10px;} ul.log li.dark {background-color: #e3e3e3;}/ * regla */div.ruler {altura: 20px; Ancho: 220px; Color de fondo: #f0f6e4; borde: 1px sólido #333; margen de fondo: 5px; cursor: puntero} div.ruler div.cursor {altura: 20px; Ancho: 30px; Color de fondo:#3C6E31; Color: blanco; Text-Align: Right; Right de relleno: 5px; cursor: puntero}Luego, el cuadro desplegable correspondiente:
<Div> <input id = "citysel" type = "text" onClick = "showmenu (); return false;" Readonly value = ""/> <input id = "treeids" type = "Hidden" name = "Goods.goodscategory.id"> <input type = "button" onClick = "showmenu ();" valor = "∨"> </div> </div> 8 <div id = "menucontent" style = "Display: None; Position: Absolute;"> <ul id = "Treedemo" style = "Margin-top: 0;"> </ul> </div>
Aquí hay un cuadro de texto oculto para almacenar la ID correspondiente del contenido de selección de cuadro desplegable.
Los scripts correspondientes son los siguientes:
<Script type = "text/javascript"> var shind = {ver: {dblClICKExPand: false}, data: {simpledata: {enable: true}}, llamado: {onClick: onClick}, ver: {// El icon correspondiente no se muestra showicon: falso}}; function onClick (e, treeId, treeNode) {var ztree = $ .fn.ztree.getztreeobj ("Treedemo"), nodos = ztree.getSelectedNodes (), v = ""; ids = ""; nodos.sort (función compare (a, b) {return a.id-b.id;}); for (var i = 0, l = nodo.length; i <l; i ++) {v += nodos [i] .name +","; ids + = nodos [i] .id + ","; } if (v.length> 0) v = v.substring (0, v.length-1); var cityObj = $ ("#citysel"); CityObj.Attr ("Valor", V); // Ponga la ID seleccionada en el campo de texto oculto si (id.length> 0) ids = id.substring (0, id.length-1); var treeids = $ ("#treeids"); TreeSids.Attr ("Valor", IDS); } function showMenu () {var cityObj = $ ("#citysel"); var cityOffset = $ ("#citysel"). offset (); $ ("#menucontent"). CSS ({izquierda: cityoffset.left + "Px", top: cityoffset.top + cityObj.outerHeight () + "px"}). Slidtewn ("rápido"); $ ("Body"). Bind ("MouseDown", Onbodydown); } function hidemenu () {$ ("#menucontent"). fadeout ("rápido"); $ ("Body"). Desvantar ("Mousedown", Onbodydown); } function OnBodyDown (Event) {if (! (Event.target.id == "Menubtn" || Event.target.id == "menucontent" || $ (event.target) .parents ("#menucontent"). longitud> 0)) {hidemenu (); }} var znodes; $ (documento) .Ready (function () {// Cargar datos $ .AJAX ({async: false, cache: false, type: 'post', dataType: 'json', url: '$ {base} /admin/goods )getgoodscrereeJson.action', error: function () {solicitud fallida ');}, exitoso: s. }); </script>De esta manera, un cuadro desplegable está terminado.
Como se muestra en la figura a continuación:
Si necesita volver a escribir los datos de la lista desplegable correspondiente en la página de modificación, agregue el siguiente script:
<script type = "text/javaScript"> $ (documento) .Ready (function () {if ("$ {Goods.goodscategory.id}"! = "") {var treeobj = $ .fn.ztree.getztreeObj ("Treedemo"); var node = treeobj.getNodeByParam ("Id", "$ {biens.Goodscatateo nulo);Lo anterior se trata de este artículo, espero que sea útil para todos aprender el complemento Ztree.