Exitjs tree动态连接数据库加载Node

经过几天的努力,终于搞定了,动态连接数据库加载tree莱单中Node,这个也在网上查了不少资料,可惜啊,基本上都是转载一人之手。看上去很麻烦。咋一看就头晕,功夫不负有心人,我终于找到一个算是简单的方法,但是,还是不好用,还得靠自己啊,最后我把它们的代码综合参考一下,整理之后还算可以,虽然有点乱慢慢看。
数据库表设计
DROP TABLE treenode;
CREATE TABLE treenode (
tid  int  NOT NULL PRIMARY KEY,
parentid  int ,
text char(16) NOT NULL,
href  char(32)
);
INSERT INTO treenode (tid, parentid, text, href) VALUES(-100, -100,'01','hello.html');
INSERT INTO treenode (tid, parentid, text, href) VALUES(1, -100,'01','hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(2, -100,'02', 'hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(3, -100,'03', 'hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(4, 1,'04','hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(5, 1,'05','hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(6, 2,'02-01','hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(7, 2,'02-01', 'hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(8, 3,'03-01','hello.html')
INSERT INTO treenode (tid, parentid, text, href) VALUES(9, 3,'03-02','hello.html')
INSERT INTO treenode (tid, parentid, text,href) VALUES(10, 3,'03-03', 'hello.html')
Extjs代码:
Ext.onReady(function(){
   var Tree = Ext.tree;
   var treeloader=new Tree.TreeLoader({dataUrl:'servlet/TreeAction?TID=-100'});
      //定义树的跟节点
      var root=new Ext.tree.AsyncTreeNode({
            id:"-100",//根节点id
            draggable:false,
            expanded :true,
            text:"后台管理"
      });    
  
      //生成树形面板
      var tree=new Ext.tree.TreePanel({
        renderTo:'Tree',
        root:root,//定位到根节点       
        width:150,
        height:300,
        animate:true,//开启动画效果
        enableDD:false,//不允许子节点拖动
        autoScroll:true,
        loader:treeloader
  //    border:false,//没有边框
  //    rootVisible:false//设为false将隐藏根节点,
     });
    
     tree.setRootNode(root);  
      tree.on('beforeload',
     function(node){
     tree.loader.dataUrl='servlet/TreeAction?TID='+node.id; //定义子节点的Loader
  });   
     tree.render(); 
  root.expand();
 
});
java代码:

//从数据库中返回父节点id号
String sql="SELECT parentid FROM treenode WHERE parentid>0 Group By parentid Order By parentid";
  StringBuilder s= new StringBuilder();
  PreparedStatement pst = null;
  ResultSet rs = null;
  try{
   pst = conn.prepareStatement(sql); 
   rs = pst.executeQuery();
  
   while(rs.next())
   {
   s.append('|');
   s.append(rs.getInt("parentid"));
   }
   }catch(SQLException e){
    e.printStackTrace();
   }
   return s;
   }
//从数据库返回JSONArray字符串对象类
StringBuilder s=this.getResulsetRow(conn);
  ArrayList al=new ArrayList();
  StringBuilder node=new StringBuilder("[");
  String sql="SELECT * FROM treenode WHERE parentid="+pid+" ORDER BY tid";
  Statement pst = null;
  ResultSet rs = null;
  try{
   pst = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY); 
   rs = pst.executeQuery(sql);
   rs.last();
   int i=rs.getRow();
   System.out.println(i);
   rs.first();
   while(rs.next())
   {

   String p=String.valueOf(rs.getInt("tid"));
   node.append("{id:'"+p+"',text:'"+rs.getString("text").trim()+"',href:'"+rs.getString("href").trim()+"',");
//没有用set和get方法,好像不太好用,这里用了我自己的写法, 
//   TreeNode td=new TreeNode();
//   td.setTid(rs.getInt("tid"));
//   td.setText(rs.getString("text").trim());
//   td.setHref(rs.getString("href").trim());
   if(s.indexOf("|"+p+"|")!=-1){
    node.append("cls:'folder',leaf:"+false+"}");
//    td.setCls("folder");
//    td.setLeaf(false);
 
   }else{
   
    node.append("cls:'file',leaf:"+true+"}");
//    td.setCls("file");
//    td.setLeaf(true);
       }
   int row=rs.getRow();
   System.out.println(row);
   if(row<i){
    node.append(",");
   
   }
  
//     al.add(td);
         }
  
  } catch(SQLException e){
   e.printStackTrace();
  }
  node.append("]");
  return node;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElTree 是 Element UI 中的一个树形组件,它支持动态数据,也就是懒。通过设置 `lazy` 属性为 `true`,可以实现动态子节点的功能。 要实现动态数据懒,需要使用 `load` 事件来自定义子节点的方式。当某个节点展开时,ElTree 会触发 `load` 事件,并将该节点的数据对象作为参数传递给事件处理函数。在事件处理函数中,我们可以根据该节点的数据对象来动态子节点的数据。 下面是一个简单的示例代码,演示了如何使用 ElTree 实现动态数据懒: ```html <template> <el-tree :data="treeData" :lazy="true" :load="loadChildren" ></el-tree> </template> <script> export default { data() { return { treeData: [ { label: '节点1', loading: false, children: [] }, { label: '节点2', loading: false, children: [] } ] }; }, methods: { loadChildren(node, resolve) { // 模拟异步子节点数据 node.loading = true; setTimeout(() => { // 获取子节点数据 const childrenData = [ { label: '子节点1' }, { label: '子节点2' } ]; // 更新节点的子节点数据 node.children = childrenData; node.loading = false; // 解析子节点数据,告诉 ElTree 数据已完成 resolve(childrenData); }, 1000); } } }; </script> ``` 在上述代码中,`loadChildren` 方法用于子节点数据。在该方法内部,我们可以执行异步操作来获取子节点数据,然后将数据赋值给节点的 `children` 属性,并调用 `resolve` 函数来告知 ElTree 数据已完成。 这样,当用户展开某个节点时,会触发 `load` 事件,然后调用 `loadChildren` 方法来子节点数据并显示在树形组件中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值