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. vmware vSphere 5.5的14个新功能

    摘录自:http://www.networkworld.com/slideshow/117304/12-terrific-new-updates-in-vmware-vsphere-55.html#s ...

  2. oracle decode()函数的参数原来可以为sql语句!

      1.情景展示 判断某个字段的值,如果以APP开头,需查询APP表里对应的数据:如果是以JG开头,就查询机构对应的表. 2.原因分析 如果使用CASE WHEN THEN或者IF ELSIF 太麻烦 ...

  3. 最新整合maven+SSM+Tomcat 实现注册登录

    mybatis学习 http://www.mybatis.org/mybatis-3/zh/index.html Spring学习:http://blog.csdn.net/king1425/arti ...

  4. unix缓冲

    目的:尽量减少read,write调用的次数. 标准IO提供3种IO: 1.全缓冲.在填满IO缓冲区后才进行实际的IO操作. 2.行缓冲.当输入和输出遇到换行符时,执行IO操作.(设计终端) 3.不带 ...

  5. AirServer for Mac(Airplay 终端实用工具)破解版安装

    1.软件简介    AirServer 是一款 Mac 上的 AirPlay 终端,通过这款软件,利用 AirPlay 技术,iPhone 或 iPad 就可以无线连接到 Mac 上,不需要在 iPh ...

  6. export / import 温故而知新

    认知一: 导出的对象被修改,依然会影响原来的对象. 仔细想想这是理所当然的事(说明导出的依然是对象指向内存的地址,所以通常还需要结合深拷贝使用) /** export const state = { ...

  7. JAVA(三)JAVA常用类库/JAVA IO

    成鹏致远 | lcw.cnblog.com |2014-02-01 JAVA常用类库 1.StringBuffer StringBuffer是使用缓冲区的,本身也是操作字符串的,但是与String类不 ...

  8. Mac下不显示设备

    使用命令行adb devices 试了下,没设备列表. 第一步: 查看usb设备信息 在 终端输入:system_profiler SPUSBDataType     可以查看连接的usb设备的信息 ...

  9. 【iCore4 双核心板_ARM】例程二十一:LWIP_TCP_SERVER实验——以太网数据传输

    实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...

  10. 【emWin】例程十一:GIF图像显示

    介绍: 本例程介绍gif格式图像显示的方法以及在GMT70,iCore3_ADP,7寸液晶模块.4.3寸液晶模块, VGA模块上的移植. 实验指导书及代码包下载: 链接:http://pan.baid ...