ext.tree动态加载

来源：互联网发布：云南旅游攻略知乎编辑：程序博客网时间：2024/05/16 04:35

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

<!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>