jquery ztree实现下拉树形框使用到了json数据_Javascript教程-查字典教程网
jquery ztree实现下拉树形框使用到了json数据
jquery ztree实现下拉树形框使用到了json数据
发布时间:2016-12-30 来源:查字典编辑
摘要:公司最近的项目需要用到树形下拉框,在网上找了挺多源码,最后还是采用了zTree来实现,因为代码的移植性比较高,而且数据的获取比较容易。废话不...

公司最近的项目需要用到树形下拉框,在网上找了挺多源码,最后还是采用了zTree来实现,因为代码的移植性比较高,而且数据的获取比较容易。废话不多说,直接上代码。

index.jsp

复制代码 代码如下:

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<html>

<head>

<link rel="stylesheet" href="<c:url value='/js/ztree/css/demo.css'/>" type="text/css"></link>

<link rel="stylesheet" href="<c:url value='/js/ztree/css/zTreeStyle/zTreeStyle.css'/>" type="text/css"></link>

<script type="text/javascript" src="<c:url value='/js/ztree/js/jquery-1.4.4.min.js'/>"></script>

<script type="text/javascript" src="<c:url value='/js/ztree/js/jquery.ztree.core-3.5.js'/>"></script>

<SCRIPT type="text/javascript">

<>

</SCRIPT>

</head>

<body>

<div>

<ul>

<li> <span>选择城市时,按下 Ctrl 或 Cmd 键可以进行多选</span></li>

<li> 城市:<input id="citySel" type="text" readonly value=""/>

<a id="menuBtn" href="#">选择</a></li>

</ul>

</div>

<div id="menuContent">

<ul id="treeDemo"></ul>

</div>

</body>

</html>

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<EquipTypeJson> 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);

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类