Recentemente, como o trabalho requer um componente de caixa suspensa de árvores, geralmente existem dois métodos de implementação após a busca de informações. Primeiro, ele é implementado usando o Ztree; Segundo, ele é implementado usando o easyui. Como o front-end da empresa não foi projetado usando o easyui, escolhi o Ztree para implementar a árvore suspensa aqui.
Aqui, um formato de dados simples (ou seja, um formato JSON simples) é usado semelhante ao seguinte JSON:
var znodes = [{id: 1, pid: 0, nome: "beijing"}, {id: 2, pid: 0, nome: "tianjin"}, {id: 3, pid: 0, nome: "shanghai"}, {id: 6, pid: 0, nome: "chongqing"}, {}, {id: 6, pid: 0, nome: "chongqing"}, {}, {id: 6, pid: 0, name: "pid:" pid: "pid:" pid: "pid:" pid: "shanghai",}, {id: 6, pid: 0, name: "chongqing"}, {}, {id: 6, pid: 0, name: "chongqing"}, {}, {id: 6, pid: 0, nome: "pid:" pid: "pid:" pid: "Pid:" open:true, nocheck:true}, {id:41, pId:4, name:"Shijiazhuang"}, {id:42, pId:4, name:"Baoding"}, {id:43, pId:4, name:"Handan"}, {id:44, pId:4, name:"Chengde"}, {id:5, pId:0, name:"Guangdong Province", open:true, nocheck:true}, {id:51, pId:5, name:"Guangzhou"}, {id:52, pId:5, name:"Shenzhen"}, {id:53, pId:5, name:"Dongguan"}, {id:54, pId:5, name:"Foshan"}, {id: 6, PID: 0, Nome: "Província de Fujian", Open: True, Nocheck: true}, {id: 61, pid: 6, nome: "fuzhou"}, {id: 62, pid: 6, name: "xiamen"}, {id: 63: pid: 6, name: "fat: Nome: "Sanming"}];Aqui, é necessário um feijão de entidade para encapsular os dados encontrados correspondentes, como segue:
classe pública ztreenode {// id private string id; // PID de string privado de identificação pai; // Nome de exibição Nome da sequência privada; // se deve abrir (o padrão não é aberto aqui, se precisar ser aberto, definido como true) // private boolean aberto; // você pode selecionar (defina se o nó pode ser selecionado por padrão, e o nó correspondente como definido como true não pode ser selecionado) // private boolean nocheck; /** getter e setter*/}Deve -se notar aqui que a segunda letra no PID está capitalizada. Se escrito em minúsculas, não pode ser construído em uma estrutura de árvore. Todos são nós raiz.
Em seguida, converta os dados encontrados no banco de dados nos grãos correspondentes exigidos pela ZTree e convertem -os no JSON correspondente. O código é o seguinte:
// Obtenha a árvore de classificação do produto e retorne JSON public String getGoodScategoryTreejson () {List <AlodScategory> AllgoodScategoryList = GoodScategoryService.getGoodScategoryTreejson (); List <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); } retornar Ajax (ztreelist); }Converta a lista no método JSON correspondente, como segue:
O JSON Toolkit usado:
importar org.springframework.base.util.jsonutil; private static final string header_encoding = "utf-8"; private estático final boolean header_no_cache = true; private estático string kider_json_text_content_type = "text/simples"; ajax (conteúdo da string, string contentType) {try {httpServletResponse resposta = initResponse (contentType); Response.getWriter (). Write (Content); resposta.getWriter (). Flush (); } catch (ioexception e) {e.printStackTrace (); } retornar nenhum; } // Saída String protegida AJAX AJAX (String text) {return ajax (text, header_text_content_type); } // Saída String protegida AJAX AJAX (status do status) {httpServletResponse resposta = initResponse (header_json_content_type); Mapa <string, string> jsonmap = new hashmap <string, string> (); jsonmap.put (status_parameter_name, status.toString ()); Jsonutil.tojson (resposta, jsonmap); retornar nenhum; } // Saída String protegida AJAX AJAX (status de status, mensagem de string) {httpServletResponse resposta = initResponse (header_json_content_type); Mapa <string, string> jsonmap = new hashmap <string, string> (); jsonmap.put (status_parameter_name, status.toString ()); jsonmap.put (message_parameter_name, mensagem); Jsonutil.tojson (resposta, jsonmap); retornar nenhum; } // Stração protegida de saída AJAX De acordo com o objeto ajax (objeto objeto) {httpServletResponse resposta = initResponse (header_json_content_type); Jsonutil.tojson (resposta, objeto); retornar nenhum; } // Saída de acordo com o status booleano Ajax String protegida ajax (boolean booleanstatus) {httpServletResponse resposta = initResponse (header_json_content_type); Mapa <string, objeto> jsonmap = new hashmap <string, object> (); jsonmap.put (status_parameter_name, booleanstatus); Jsonutil.tojson (resposta, jsonmap); retornar nenhum; } private httpServletResponse initResponse (string contenttype) {httpServletResponse resposta = servletActionContext.getResponse (); Response.setContentType (contentType + "; charset =" + header_encoding); if (header_no_cache) {Response.SetDateHeader ("Expira", 1L); Response.AddHeader ("Pragma", "sem cache"); Response.setheader ("Cache-Control", "No-Cache, No Store, Max-Ara = 0"); } resposta de retorno; }Dessa forma, os dados exigidos pela recepção são retirados da biblioteca e encapsulados no JSON correspondente.
Em seguida, é a implementação da recepção. Os JS e CSs que a recepção precisa importar são os seguintes:
<link rel = "Stylesheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "stylesheet" href = "$ {base} /template/ztree/css/ztreesthelestyle/ztrestyle." $ {base} /template/ztree/css/ztreesthelestyle/ztrestheLe. " type = "text/javascript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>Aqui, apenas o Demo.css é adicionado por si só, e os outros são oficialmente formulados. O Demo.CSS é usado para modificar o CSS usado pela demonstração oficial, como segue (existem estilos redundantes aqui que não foram excluídos);
div.content_wrap {width: 400px;} div.content_wrap div.left {float: left;} div.content_wrap div.right {float: direita; largura: 340px;} div.ztroEdemobackground {text-align: esquerdo; #617775; Antecedentes: #fefefe; largura: 220px; altura: 360px; Overflow-y: roll; Overflow-x: Auto;} ul.log {borda: 1px Solid #617775; Antecedentes: #f0f6e4; largura: 300px; altura: 170px; Overflow; {altura: 45px;} ul.log li {color: #666666; Largura: 220px; Background-Color: #f0f6e4; borda: 1px Solid #333; Bottom de margem: 5px; Cursor: ponteiro} div.ruler div.cursor {altura: 20px; Largura: 30px; Background-Color:#3C6E31; Cor: Branco; Alinhamento de texto: à direita; Right-right: 5px; Cursor: Ponteiro}Então, a caixa suspensa correspondente:
<div> <input id = "citySel" type = "text" onclick = "showmenu (); retornar false;" readonly value = ""/> <input id = "TreeIds" type = "Hidden" name = "Goods.goodScategory.id"> <input type = "Button" onclick = "showMenu ();" value = "∨"> </div> </div> 8 <div id = "menuContent" style = "display: nenhuma; posição: absoluto;"> <ul id = "Treedemo" style = "margin-top: 0;"> </ul> </liv>
Aqui está uma caixa de texto oculta para armazenar o ID correspondente do conteúdo de seleção de caixa suspensa.
Os scripts correspondentes são os seguintes:
<Script type = "text/javaScript"> var configuring = {view: {dblclicKexpand: false}, dados: {simpledata: {enable: true}}, retorno de chamada: {onclick: onclick}, view: {// O ícone correspondente não é exibido showicon: false}; função onclick (e, árvore, treenode) {var ztree = $ .fn.ztree.getztreeobj ("Treedemo"), nós = ztree.getSelectedNodes (), v = ""; ids = ""; modes.sort (função compare (a, b) {return a.id-b.id;}); for (var i = 0, l = nós.length; i <l; i ++) {v += nós [i] .name +","; ids + = nós [i] .id + ","; } if (v.length> 0) v = v.substring (0, v.Length-1); var cityObj = $ ("#citySel"); cityObj.attr ("value", v); // Coloque o ID selecionado no campo de texto oculto se (ids.length> 0) ids = ids.substring (0, ids.length-1); var TreeIds = $ ("#TreeIds"); treesids.attr ("value", ids); } função showMenu () {var cityObj = $ ("#citySel"); var CountyOffSet = $ ("#CitySel"). Offset (); $ ("#menuContent"). CSS ({esquerda: Cityoffset.left + "px", topo: Cityoffset.top + cityObj.outerHeight () + "px"}). $ ("corpo"). Bind ("Mousedown", OnBodybodydown); } função hidemenu () {$ ("#menuContent"). Fadeout ("Fast"); $ ("corpo"). Unbind ("Mousedown", Onbodydown); } função onBodyDown (event) {if (! (event.target.id == "menubtn" || event.target.id == "menuContent" || $ (event.target) .parents ("#menuContent"). length> 0)) {hidemenu (); }} var znodes; $ (document) .ready (function () {// Carregar dados $ .ajax ({assíncrono: false, cache: false, tipo: 'post', datatype: 'json', url: '$ {base} /admin/Goods!getGoodScategoryTreeJson.Action, e erro: function () {alert (alert (' ''; }}); </Script>Dessa forma, uma caixa suspensa está concluída.
Como mostrado na figura abaixo:
Se você precisar escrever de volta os dados da lista suspensa correspondentes na página de modificação, adicione o seguinte script:
<script type = "text/javascript"> $ (document) .ready (function () {if ("$ {Goods.goodsCategory.id}"! = "") {var Treeobj = $ .fn.ztree.getztreeobj ("Treedemo"); var node = Treeobj.getNodeByByMaram ("idiota"; nulo);O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem o plug-in do Ztree.