jquery ztree 드롭다운 트리 상자, json 데이터 구현

4442 단어 jsp
회사의 최근 프로젝트는 트리 밑에 있는 상자를 사용해야 하기 때문에 인터넷에서 많은 원본 코드를 찾았는데 결국은 zTree를 사용해서 실현했다. 코드의 이식성이 비교적 높고 데이터의 획득이 비교적 쉽기 때문이다.잔말 말고 코드로 바로 올라가세요.
index.jsp




 
	
	
	
	
	
		<!--
		var setting = {
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick
			}
		};

		//json   ,        json   ,    json  ,    
		//var strNodes = '${jsonList}';
		//var zNodes = eval("("+strNodes+")"); // json      json    ,strNode    "()",      
		var zNodes =[
			{id:1, pId:0, name:"  "},
			{id:2, pId:0, name:"  "},
			{id:3, pId:0, name:"  "},
			{id:6, pId:0, name:"  "},
			{id:4, pId:0, name:"   ", open:true},
			{id:41, pId:4, name:"   "},
			{id:42, pId:4, name:"  "},
			{id:43, pId:4, name:"  "},
			{id:44, pId:4, name:"  "},
			{id:5, pId:0, name:"   ", open:true},
			{id:51, pId:5, name:"  "},
			{id:52, pId:5, name:"  "},
			{id:53, pId:5, name:"  "},
			{id:54, pId:5, name:"  "},
			{id:6, pId:0, name:"   ", open:true},
			{id:61, pId:6, name:"  "},
			{id:62, pId:6, name:"  "},
			{id:63, pId:6, name:"  "},
			{id:64, pId:6, name:"  "}
		 ];

		function beforeClick(treeId, treeNode) {
			var check = (treeNode && !treeNode.isParent);
			if (!check) alert("      ...");
			return check;
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			v = "";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#citySel");
			cityObj.attr("value", v);
		}

		function showMenu() {
			var cityObj = $("#citySel");
			var cityOffset = $("#citySel").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		//-->
	
 
 
	

spring 백그라운드
json 데이터 클래스
public class EquipTypeJson {
	private String id;
	private String pId;
	private String name;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPId() {
		return pId;
	}
	public void setPId(String pId) {
		this.pId = pId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	
}

controller 페이지
	public ModelAndView List(HttpServletRequest request, HttpServletResponse response,Product prod) throws Exception {
		Map map=new HashMap();
		List list = testService.getAllEquipType();//         
		JSONArray jsonArray = JSONArray.fromObject(list);	// list    json  
		String json = jsonArray.toString();			// json       
		map.put("jsonList", json);
		return new ModelAndView("equip/List").addAllObjects(map);
	}

좋은 웹페이지 즐겨찾기