В последнее время, поскольку работа требует компонента раскрывающейся коробки деревьев, обычно существует два метода реализации после поиска информации. Во -первых, он реализован с использованием Ztree; Во -вторых, он реализован с использованием easyui. Поскольку передний конец компании не разработан с использованием EasyUI, я выбрал Ztree для реализации раскрывающегося дерева здесь.
Здесь простой формат данных (то есть простой формат JSON) используется аналогично следующему JSON:
var znodes = [{id: 1, pid: 0, name: "beijing"}, {id: 2, pid: 0, name: "tianjin"}, {id: 3, pid: 0, name: "shanghai"}, {id: 6, pid: 0, имя: "chongqing"}, {id: 4, pid: ". Open: true, noCheck: true}, {id: 41, pid: 4, имя: "shijiazhuang"}, {id: 42, pid: 4, имя: "baoding"}, {id: 43, pid: 4, имя: "Хандэн"}, {id: 44, pid: 4, name: "chengd", pid: {id: {id: {id: pid: pid: {id: {id: {id: {id: {id: {id: pid: 5, й: Имя: «Гуандонская провинция», Open: true, nocheck: true}, {id: 51, pid: 5, имя: «guangzhou»}, {id: 52, pid: 5, name: «shenzhen»}, {id: 53, pid: 5, имя: «dongguan»,}, {id: 54, pid: «54, pid:»: «54, PID:». {id: 6, pid: 0, имя: «провинция Фуцзянь», Open: True, NoCheck: True}, {id: 61, PID: 6, имя: "fuzhou"}, {id: 62, pid: 6, имя: "xiamen"}, {id: 63, pid: 6, name: "wanhou", {id: 64, pid: 6, name: "wanhou", {id: 64, pid: 6, name: ". имя: "sanming"}];Здесь сначала необходимо инкапсулировать соответствующие найденные данные, следующим образом:
открытый класс ZtreeNode {// ID Private String Id; // родительский идентификатор частной строки pid; // отображать имя частное имя строки; // Будь то открыть (по умолчанию здесь не открывается, если его нужно открыть, установить на TRUE) // Private Boolean Open; // Можете ли вы выбрать (установить, можно ли выбрать узел по умолчанию, и узел, соответствующий установке, не может быть выбран) // Private Boolean Nocheck; /** Getter и Setter*/}Здесь следует отметить, что вторая буква в PID заглаживается. Если написано в нижнем регистре, он не может быть построен в структуру дерева. Все это корневые узлы.
Затем преобразуйте данные, найденные из базы данных в соответствующие бобы, необходимые Ztree, а затем преобразовать их в соответствующий JSON. Код заключается в следующем:
// Получить дерево классификации продуктов и вернуть json public String getGoodscategorytreejson () {list <goodscategory> allgoodscategorylist = goodscategoryservice.getgoodscategorytreejson (); Список <ZtreeNode> Ztreelist = new ArrayList <ZtreeNode> (); для (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); } вернуть ajax (Ztreelist); }Конвертировать список в соответствующий метод JSON, следующим образом:
Используется инструментарий JSON:
Import org.springframework.base.util.jsonutil; частная статическая конечная строка header_encoding = "utf-8"; частная статическая конечная логическая головка header_no_cache = true; private static final header_text_content_type = "text/plain"; private Static header_json_content_type = "text/plain"; private Static station_json_content_type = "text/plain"; Ajax (String Content, String contentype) {try {httpservletresponse response = initresponse (contentype); response.getWriter (). написать (content); response.getWriter (). flush (); } catch (ioException e) {e.printstackTrace (); } вернуть нет; } // Выход AJAX Protected String Ajax (String Text) {return ajax (text, header_text_content_type); } // Выход AJAX Protected String Ajax (Status) {httpservletresponse response = initresponse (header_json_content_type); Map <string, string> jsonmap = new hashmap <string, string> (); jsonmap.put (status_parameter_name, status.tostring ()); Jsonutil.tojson (ответ, jsonmap); вернуть нет; } // Выход AJAX Protected String Ajax (статус состояния, строковое сообщение) {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, message); Jsonutil.tojson (ответ, jsonmap); вернуть нет; } // Выход Ajax защищенная строка в соответствии с объектом ajax (объект объекта) {httpservletresponse response = initresponse (header_json_content_type); Jsonutil.tojson (ответ, объект); вернуть нет; } // Вывод в соответствии с логическим статусом Ajax Protected String Ajax (boolean booleanstatus) {httpservletresponse response = initresponse (header_json_content_type); Map <string, object> jsonmap = new hashmap <string, object> (); jsonmap.put (status_parameter_name, booleanstatus); Jsonutil.tojson (ответ, jsonmap); вернуть нет; } private httpservletresponse initresponse (string contentType) {httpservletresponse response = servletactionContext.getResponse (); response.setContentType (contentType + "; charset =" + header_encoding); if (header_no_cache) {response.setDateHeader ("истекает", 1L); ответ. response.setheader ("Cache-Control", "No-Cache, No Store, Max-Age = 0"); } return response; }Таким образом, данные, требуемые стойкой регистрации, выведены из библиотеки и инкапсулируются в соответствующий JSON.
Далее следует реализация стойки регистрации. JS и CSS, которые необходимо импортировать стойке регистрации, следующие:
<link rel = "styleSheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "stylesheet" href = "$ {base} /template/ztree/css/ztreestyle/ztreesty.cssssss ="> ">"> "cyptreeSs/cyptreess/cyptreess/" cyptreess/ctepreesty. type = "text/javascript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>Здесь только Demo.css добавляется сама по себе, а другие официально сформулированы. Demo.css используется для изменения CSS, используемого официальной демонстрацией, следующим образом (здесь есть избыточные стили, которые не были удалены);
div.content_wrap {width: 400px;} div.content_wrap div.left {float: left;} div.content_wrap div.right {float: right; width: 340px;} div.ztreedemobacgrough #617775; фон: #Fefe; ширина: 220px; высота: 360px; overflow-y: scroll; overflow-x: auto;} ul.log {border: 1px solid #617775; фон: #f0f6e4; Width: 300px; высота: 170px; {height: 45px;} ul.log li {color: #666666; list-style: none; padding-left: 10px;} ul.log li.dark {фоновый цвет: #e3e3e3;}/ * roler */div.ruler {height: 20px; Ширина: 220px; Фоно-цвета: #F0F6E4; граница: 1PX SOLID #333; маржинальный бат: 5px; Курсор: указатель} div.ruler div.cursor {высота: 20px; Ширина: 30px; фоновый цвет:#3C6E31; Цвет: белый; Текст-альбом: верно; Право накладки: 5px; курсор: указатель}Затем соответствующая раскрывающаяся коробка:
<div> <input id = "citysel" type = "text" onclick = "showmenu (); вернуть false;" readonly value = ""/> <input id = "treeids" type = "hidden" name = "goods.goodscategory.id"> <input type = "кнопка" onclick = "showmenu ();" value = "∨"> </div> </div> 8 <div id = "menucontent" style = "display: none; position: absolute;"> <ul id = "triedemo" style = "margin-top: 0;"> </ul> </div>
Вот скрытое текстовое поле для хранения соответствующего идентификатора контента выбора раскрывающейся коробки.
Соответствующие сценарии следующие:
<Script type = "text/javascript"> var future = {view: {dblclickexpand: false}, data: {simpledata: {enable: true}}, обратный вызов: {onclick: onclick}, view: {// Соответствующий значок не отображается Showicon: false}; Функция OnClick (e, treeId, treeNode) {var ztree = $ .fn.ztree.getztreeobj ("triedemo"), nodes = ztree.getSelectedNodes (), v = ""; ids = ""; nodes.sort (функция сравнить (a, b) {return a.id-b.id;}); for (var i = 0, l = nodes.length; i <l; i ++) {v += узлы [i] .name +","; ids + = узлы [i] .id + ","; } if (v.length> 0) v = v.substring (0, v.length-1); var CityObj = $ ("#CitySel"); CityObj.attr ("Value", V); // Поместите выбранный идентификатор в скрытое текстовое поле if (ids.length> 0) ids = ids.substring (0, ids.length-1); var treeids = $ ("#treeids"); reesIds.attr ("value", ids); } function showmenu () {var cityobj = $ ("#citysel"); var cityoffset = $ ("#citysel"). offset (); $ ("#menucontent"). CSS ({слева: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight () + "px"}). Слейундаун ("быстро"); $ ("тело"). Bind ("Mousedown", на BodyDown); } function hidemenu () {$ ("#menucontent"). Fadeout ("Fast"); $ («тело»). Бесспинку («Муседаун», на куботе); } Функция на Cobytydown (event) {if (! (Event.target.id == "menubtn" || event.target.id == "menucontent" || $ (event.target) .parents ("#menucontent"). Length> 0)) {hidemenu (); }} var Znodes; $ (document) .ready (function () {// загружать данные $ .ajax ({async: false, cache: false, type: 'post', dataType: 'json', url: '$ {base}/admin/goods!getgoodscegorytreejson.action', error: function () {alert ('reflect'); }}); </Script>Таким образом, выпадающая коробка закончена.
Как показано на рисунке ниже:
Если вам нужно написать соответствующие данные раскрывающегося списка на странице модификации, добавьте следующий скрипт:
<script type = "text/javascript"> $ (document) .ready (function () {if ("$ {goods.goodscategory.id}"! = "") {var treeObj = $. null);Выше приведено все об этой статье, я надеюсь, что для всех будет полезно изучить плагин Ztree.