1、ul li的多级列表的html代码tree

2、利用jquery

  <ul id="tt"></ul>
$('#tt').tree({
url:'tree_data.json' //会发送异步请求返回tree数据
});
tree实体类:
public class Tree {
private int id ;
private String name ;
private String url ;
private int checked ;
private String icon ;
private int parent_id ;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getChecked() {
return checked;
}
public void setChecked(int checked) {
this.checked = checked;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public int getParent_id() {
return parent_id;
}
public void setParent_id(int parent_id) {
this.parent_id = parent_id;
}
treeVO 返回jsontree格式,必须这种形式tree,才能渲染成树:
public class TreeVO {
private int id;
private String text;
private int parent_id;
private String icon ;
private String state ;
private Map<String,Object> map=new HashMap<String ,Object>(); //用个map接收自定义属性,必须map,转为json后,是{"a":"","b":..}这种格式,同时具有可扩展性
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
} public int getParent_id() {
return parent_id;
}
public void setParent_id(int parent_id) {
this.parent_id = parent_id;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
} public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public Map<String, Object> getMap() {
return map;
}
public void setMap(Map<String, Object> map) {
this.map = map;
} }
import com.bjsxt.dto.TreeVO;

public interface TreeDao {

    List<TreeVO> getTreeByParentId(String id);

}
public class TreeDaoImpl implements TreeDao {

    @Override
public List<TreeVO> getTreeByParentId(String id) {
String sql;
if(id==null || id==""){ //刚开始页面加载完成之后,页面出现根节点,这时,前台不带参数id,只有点击closed的节点才会发送一个请求,携带id


            int pid=;
sql ="select * from tree where parent_id ="+;
System.out.println(sql); }else{ //点击这些关闭的节点时才会发送一个url,同时携带这个节点的id,为什么easyui树高效,dtree不行,dtree是一打开页面加载所有的节点,而easyUi是点击节点才会异步发送一个请求,获取该节点下直接子节点渲染成树
            int pid=Integer.valueOf(id);
sql ="select * from tree where parent_id ="+pid;
System.out.println(sql);
}
Connection conn = DBUtils.createConn();
PreparedStatement ps = DBUtils.getPs(conn, sql);
try {
ResultSet rs = ps.executeQuery();
List<Tree> treeList =new ArrayList<Tree>();
while(rs.next()){
Tree tree=new Tree();
tree.setId(rs.getInt("id"));
tree.setChecked(rs.getInt("checked"));
tree.setIcon(rs.getString("icon"));
tree.setName(rs.getString("name"));
tree.setParent_id(rs.getInt("parent_id"));
tree.setUrl(rs.getString("url"));
treeList.add(tree);
}
List<TreeVO> treeVOlist = this.tochange(treeList);
System.out.println(treeList+"treelist");
return treeVOlist; } catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
} private List<TreeVO> tochange(List<Tree> treeList){ List<TreeVO> treeVOlist =new ArrayList<TreeVO>();
for (Tree tree : treeList) {
TreeVO treeVO =new TreeVO();
treeVO.setId(tree.getId());
List<Tree> tls = this.distinguish(tree.getId());
if(tls.isEmpty()){
treeVO.setState("open");
}else{
treeVO.setState("closed");
} treeVO.setIcon(tree.getIcon());
treeVO.setParent_id(tree.getParent_id());
treeVO.setText(tree.getName());
Map<String,Object> hashMap=new HashMap<String,Object>();
hashMap.put("url", "");
treeVO.setMap(hashMap);
treeVOlist.add(treeVO);
}
System.out.println(treeList+"treelist1");
return treeVOlist;
} private List<Tree> distinguish(int id){//判断节点下面有没有子节点,有的话,下面的子节点不为空,没有的话就是叶子节点,这时会自动渲染成
            String sql ="select * from tree where parent_id ="+id;

        Connection conn = DBUtils.createConn();
PreparedStatement ps = DBUtils.getPs(conn, sql);
try {
ResultSet rs = ps.executeQuery();
List<Tree> treeList =new ArrayList<Tree>();
while(rs.next()){
Tree tree=new Tree();
tree.setId(rs.getInt("id"));
tree.setChecked(rs.getInt("checked"));
tree.setIcon(rs.getString("icon"));
tree.setName(rs.getString("name"));
tree.setParent_id(rs.getInt("parent_id"));
tree.setUrl(rs.getString("url"));
treeList.add(tree);
} return treeList; } catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
@WebServlet("/tree")
public class Tree extends HttpServlet {
private static final long serialVersionUID = 1L;
private TreeDao treeDao =new TreeDaoImpl();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String method = request.getParameter("method");
if(method.equals("getTree")){
getTree(request,response); } } private void getTree(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("id");
List<TreeVO> treeList=treeDao.getTreeByParentId(id);
response.setContentType("text/html;charset=utf-8");
try {
response.getWriter().write(JSONArray.fromObject(treeList).toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }

下面的代码多余的:

不需要转化int,拼接的sql,就是按照就是按照int,如果用字符串还需要在sql中''

    if(id==null || id==""){
int pid=; //不需要
sql ="select * from tree where parent_id ="+;
System.out.println(sql); }else{
int pid=Integer.valueOf(id);//不需要
sql ="select * from tree where parent_id ="+pid;
System.out.println(sql);
}

-----

easyui---tree异步加载的更多相关文章

  1. spring mvc easyui tree 异步加载树

    使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...

  2. jquery easyui tree异步加载子节点

    easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id=& ...

  3. MVC4中EasyUI Tree异步加载JSON数据生成树

      1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...

  4. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  5. EasyUI实现异步加载tree(整合Struts2)

    首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 加载Tree <script type="text/ja ...

  6. jquery easyui tree动态加载子节点

    1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...

  7. 后台返回平铺数据,如何转换成树形json并渲染树形结构,ant tree 异步加载

    如何后台返回对象数组(平铺式) 1.根据字段标识(板块)获取根节点 ### initTreeData(dataOrg){ var resultArr=dataOrg[0] var secArr=[]; ...

  8. 【EasyUI学习-2】Easyui Tree的异步加载

    作者:ssslinppp       1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...

  9. 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)

    关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...

  10. EasyUI ComboTree无限层级异步加载示例

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...

随机推荐

  1. 利用ConcurrentHashMap来实现一个ConcurrentHashSet

    利用ConcurrentHashMap来实现一个ConcurrentHashSet package hashset; import java.io.Serializable; import java. ...

  2. eclipse spring 配置文件xml校验时,xsd报错

      1.情景展示 eclipse中,spring配置文件报错信息如下: 配置文件头部引用信息为: <?xml version="1.0" encoding="UTF ...

  3. Android在开发中的使用技巧之解决ScrollView嵌套RecyclerView出现的系列问题

    根据已上线的app里总结出来的实用小技巧 相信大家都遇到过ScrollView嵌套RecyclerView或者RecyclerView嵌套RecyclerView来使用, 也会遇到一堆奇奇怪怪的问题, ...

  4. 并发和多线程-八面玲珑的synchronized

    上篇<并发和多线程-说说面试常考平时少用的volatile>主要介绍的是volatile的可见性.原子性等特性,同时也通过一些实例简单与synchronized做了对比. 相比较volat ...

  5. react学习笔记1之声明组件的两种方式

    //定义组件有两种方式,函数和类 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class ...

  6. Forward+ Shading架构

    Forward+ = Tile based Light Culling + Tile based Forward Rendering 整体渲染架构分为如下3大步骤: 1.PrePass将场景的min ...

  7. 在Centos 6 64bit 上安装 Hyperic HQ 5.8.2.1 中文版

    原文:https://my.oschina.net/hyperichq/blog/306791 环境描述: [test@tester ~]$ cat /etc/issue CentOS release ...

  8. Python3自定义json逐层解析器

    [本文出自天外归云的博客园] 用python3对json内容逐层进行解析,拿中国天气网的接口返回数据测试,代码如下: # -*- coding: utf-8 -*- import operator a ...

  9. 【iCore1S 双核心板_FPGA】例程九:锁相环实验——锁相环的使用

    实验现象: 利用Quartus内部组件生成锁相环,用SignalTap II进行校验. 核心代码: //--------------------Module_PLL------------------ ...

  10. [C#] 一款代码注释清理工具

    [C#] 一款代码注释清理工具   在程序开发过程中,很多时候我们都会在代码中进行注释,以便大家更容易理解或能更直观明白某个类或方法是用来做什么的,我们就会用注释 就以C#为列子,注释符大致为'//' ...