根据小道消息,公司要在原来产品基础上,引用AJAX框架 EXT,所以最近闲来没事的时候,小小研究了一下,特此拿来与大家分享,不多废话,看代码asd
reorder.js 文件的代码:
/* * Ext JS Library 1.0.1 * Copyright(c) 2006-2007, Ext JS, LLC. * licensing@extjs.com * * http://www.extjs.com/license */ Ext.onReady(function(){ // shorthand var Tree = Ext.tree; //关于TreeLoader的原始API定义,来自EXT DOC // Ext.tree.TreeLoader = function(config){ // this.baseParams = {}; // this.requestMethod = "POST"; // Ext.apply(this, config); // // this.addEvents({ // "beforeload" : true, // "load" : true, // "loadexception" : true // }); // }; //定义一个Loader,设置他的后台php页面为get-nodes.php var myTreeLoader = new Tree.TreeLoader({dataUrl: 'get-nodes.php'}); //为Loader添加一个事件,目的是用于树与后台交互的时候传递我想要的参数 myTreeLoader.on("beforeload", function(treeLoader, node) { //这里我传递了两个参数,一个是该节点的ID,一个是该节点显示的文本 treeLoader.baseParams.node_id = node.id; treeLoader.baseParams.node_text = node.text; //appParams.pzuserdm=node.attributes.text; }); //这里实例化咱具体想要的那种类型的tree,EXT提供很多种不同的tree //咱刚开始学,搞个简单的玩玩先 var tree = new Tree.TreePanel('tree-div', { //下面是对咱的TreePanel属性的一些设置 //俺的英文也不怎么好,所以还是不出来献丑了,直接把DOC的内容COPY过来好了 //animate //animate : Boolean //true to enable animated expand/collapse //This config option is defined by TreePanel. animate:true, //containerScroll //containerScroll : Boolean //true to register this container with ScrollManager //This config option is defined by TreePanel. loader:myTreeLoader, //enableDD //enableDD : Boolean //true to enable drag and drop //This config option is defined by TreePanel. enableDD:true, //loader //loader : Boolean //A TreeLoader for use with this TreePanel //This config option is defined by TreePanel. containerScroll: true }); //给树定义一个单击事件,其实本例中没什么用,俺这么写是为了调试方便,呵呵~~ tree.on('click', function(node, event) { //alert(this.loader.dataUrl); //alert(node.text); }); //定义树的根节点 var root = new Tree.AsyncTreeNode({ text: '公司总部图', draggable:false, id:'-100' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(); });
reorder.html 代码如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Reorder TreePanel</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="reorder.js"></script> </script> <link rel="stylesheet" type="text/css" href="../examples.css" /> </head> <body> <script type="text/javascript" src="../examples.js"></script> <div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div> </body> </html>
get-nodes.php 代码 就不写这里了。。。单开一篇写,彻底拜服于 FCK~~~