easyui---tree异步加载
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异步加载的更多相关文章
- spring mvc easyui tree 异步加载树
使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...
- jquery easyui tree异步加载子节点
easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id=& ...
- MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- EasyUI实现异步加载tree(整合Struts2)
首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 加载Tree <script type="text/ja ...
- jquery easyui tree动态加载子节点
1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...
- 后台返回平铺数据,如何转换成树形json并渲染树形结构,ant tree 异步加载
如何后台返回对象数组(平铺式) 1.根据字段标识(板块)获取根节点 ### initTreeData(dataOrg){ var resultArr=dataOrg[0] var secArr=[]; ...
- 【EasyUI学习-2】Easyui Tree的异步加载
作者:ssslinppp 1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...
- EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...
随机推荐
- Centos或Windows中部署Zookeeper集群及其简单用法
一.简介 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件 ...
- 我是陌生人 Java中导入、导出Excel
我是陌生人 Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是: ...
- HTML中input type="text"和type="password" 显示的长度不一样
在CSS里边加上input {width:100px;}能把所有input标签的控件宽度改为相同! 加上这个属性 style="width:180px;"
- html元素不可见的三种方式
html中使元素不可见有三种方法: 使用hidden属性 使用style中的display=none 使用style中的visibility=false 显然,使元素不可见有两类方式: 元素彻底不可见 ...
- 【LeetCode】242. Valid Anagram (2 solutions)
Valid Anagram Given two strings s and t, write a function to determine if t is an anagram of s. For ...
- 基于CentOS 搭建 Seafile 专属网盘
系统要求:CentOS 7.2 64 位操作系统 安装 Seafile 安装依赖环境 使用 yum 安装 Python 及 MySQL: yum install python python-setup ...
- C++11 并发指南九(综合运用: C++11 多线程下生产者消费者模型详解)
前面八章介绍了 C++11 并发编程的基础(抱歉哈,第五章-第八章还在草稿中),本文将综合运用 C++11 中的新的基础设施(主要是多线程.锁.条件变量)来阐述一个经典问题——生产者消费者模型,并给出 ...
- Windows Media Player 的文件格式支持情况
唔,官方文档:https://support.microsoft.com/zh-cn/help/316992/file-types-supported-by-windows-media-player ...
- 如何让vue文件中的代码在Sublime Text 3中高亮和智能提示
大家写在Sublime Text 3中编写vue文件时,会发现没有代码智能提示,清一色的黑底白字,不会像html.js一样变成彩色,给我们带来了很大的不便.所以需要安装一款叫作Vue Syntax H ...
- Python3自定义json逐层解析器
[本文出自天外归云的博客园] 用python3对json内容逐层进行解析,拿中国天气网的接口返回数据测试,代码如下: # -*- coding: utf-8 -*- import operator a ...