Extjs 的Tree动态加载
2010-10-04 16:59
387 查看
经过几天的努力,终于搞定了,动态连接数据库加载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;
数据库表设计
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;
相关文章推荐
- extjs treepanel 动态的加载节点,选中父节点时,同时选中下面的子节点
- Extjs4.2 TreePanel+Asp.net mvc 动态加载节点
- Extjs中左边treepanel右边panel动态加载jsp页面
- ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页
- Extjs中左边treepanel右边panel动态加载jsp页面
- 动态异步加载树 ExtJS2,以JSON(JavaScript Object Notation)TreeLoader
- (更新版)ExtJS Tree利用json(直接传List TreeNode,不需要转化为JSONArray)在Struts 2实现Ajax动态加载树结点
- extjs4 如何动态加载带有复选框的tree
- Extjs中通过Tree加载右侧TabPanel
- ExtJs4 动态加载
- ExtJS 4中动态加载的路径设置
- 关于EXT 动态异步加载Tree
- Extjs 动态加载ComboBox数据
- Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现
- ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法
- Easy UI Tree 动态加载tree、异步加载
- ligerui中的tree的异步动态加载数据库例子
- Extjs treePanel 的treestore重复加载问题解决
- ExtJS 4 组件化编程,动态加载,面向对象,Direct结合成功,目前为止我的最佳实践
- Extjs创建多个application实现多模块MVC动态加载。。