ext.tree动态加载

前些天把静态的写完,总觉得还是应该弄成动态的加载比较好。所以就又花了天时间弄了下,把动态加载的弄完了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.1.0/ext-all.js"></script>

<SCRIPT LANGUAGE="JavaScript">
<!--

//定义动态取得加载树的数据的url,注意url返回的必须是数组,如[{"id":"1","text":"邮件登记","leaf":false},{"id":"2","text":"客户管理","leaf":false}]
var dataLoader = new Ext.tree.TreeLoader({
dataUrl:'你的url' //此处是向后台的数据请求,返回的是数组。

});

//设置url的参数,定义传递参数id的值为节点id,后台取得id的值后执行相应的查询

//"select id,module_name as text from SYS_MANAGER_MODULE where parent_module_id = "+formDto.getId()


dataLoader.on("beforeload", function(dataLoader, node) {
dataLoader.baseParams.id = node.attributes.id;
}, dataLoader);

//新建root node
var root = new Ext.tree.AsyncTreeNode({
nodeType: 'async',
text:"MSIP信息系统",
qtip:"MSIP信息系统",//鼠标选中提示内容
draggable:false,
expanded:true,
id:'11'
});

//新建tree
var tree = new Ext.tree.TreePanel({
id:'tree',
height: 350,
animate:true,
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true},
autoScroll:true,
useArrows:true,
loader: dataLoader
});

//加载
Ext.onReady(function(){

tree.setRootNode(root);

// render the tree
tree.render('tree-div');

});

//树的刷新功能
function tree_refresh(){
var tree = Ext.getCmp('tree');
tree.body.mask('loading...','x-mask-loading');
tree.root.reload();
tree.root.collapse(true,true);
setTimeout(function(){
tree.body.unmask();
tree.root.expand(false,true);
},1000);
};

//-->
</SCRIPT>

</head>
<body>
<div id="tree_div"></div>
</body>
</html>

你可能感兴趣的:(tree)