投放本站广告请联系:
extjscn#126.com
拖放排列(Drag and Drop Reordering)
演示(demo)地址在文章最后.
效果图如下:
主要文件reorder.html,reorder.js和get-nodes.php。
演示(demo)地址在文章最后.
效果图如下:
主要文件reorder.html,reorder.js和get-nodes.php。
reorder.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Reorder TreePanel</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="reorder.js"></script> <!-- Common Styles for the examples --> <link rel="stylesheet" type="text/css" href="../examples.css" /> </head> <body> <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --> <h1>Drag and Drop ordering in a TreePanel</h1> <p>This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked "leaf" (the files).</p> <p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p> <p>In order to demonstrate drag and drop insertion points, sorting was <b>not</b> enabled.</p> <p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p> <p>The js is not minified so it is readable. See <a href="reorder.js">reorder.js</a>.</p> <div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div> </body> </html>
reorder.js
/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com * * extjs.com/license */ Ext.onReady(function(){ // shorthand var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div', useArrows:true, autoScroll:true, animate:true, enableDD:true, containerScroll: true, loader: new Tree.TreeLoader({ dataUrl:'get-nodes.php' }) }); // set the root node var root = new Tree.AsyncTreeNode({ text: 'Ext JS', draggable:false, id:'source' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(); });
get-nodes.php
<?php // from php manual page function formatBytes($val, $digits = 3, $mode = "SI", $bB = "B"){ //$mode == "SI"|"IEC", $bB == "b"|"B" $si = array("", "K", "M", "G", "T", "P", "E", "Z", "Y"); $iec = array("", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi"); switch(strtoupper($mode)) { case "SI" : $factor = 1000; $symbols = $si; break; case "IEC" : $factor = 1024; $symbols = $iec; break; default : $factor = 1000; $symbols = $si; break; } switch($bB) { case "b" : $val *= 8; break; default : $bB = "B"; break; } for($i=0;$i<count($symbols)-1 && $val>=$factor;$i++) $val /= $factor; $p = strpos($val, "."); if($p !== false && $p > $digits) $val = round($val); elseif($p !== false) $val = round($val, $digits-$p); return round($val, $digits) . " " . $symbols[$i] . $bB; } $dir = isset($_REQUEST['lib'])&&$_REQUEST['lib'] == 'yui' ? '../../../' : '../../'; $node = isset($_REQUEST['node'])?$_REQUEST['node']:""; if(strpos($node, '..') !== false){ die('Nice try buddy.'); } $nodes = array(); $d = dir($dir.$node); while($f = $d->read()){ if($f == '.' || $f == '..' || substr($f, 0, 1) == '.')continue; $lastmod = date('M j, Y, g:i a',filemtime($dir.$node.'/'.$f)); if(is_dir($dir.$node.'/'.$f)){ $qtip = 'Type: Folder<br />Last Modified: '.$lastmod; $nodes[] = array('text'=>$f, 'id'=>$node.'/'.$f/*, 'qtip'=>$qtip*/, 'cls'=>'folder'); }else{ $size = formatBytes(filesize($dir.$node.'/'.$f), 2); $qtip = 'Type: JavaScript File<br />Last Modified: '.$lastmod.'<br />Size: '.$size; $nodes[] = array('text'=>$f, 'id'=>$node.'/'.$f, 'leaf'=>true/*, 'qtip'=>$qtip, 'qtipTitle'=>$f */, 'cls'=>'file'); } } $d->close(); echo json_encode($nodes); ?>
注意例子中开头是<?,有时候PHP不会解析,把它变为 <?php 即可。
- 关键字:
- 要发表评论,请先登录
评论
疑问
我怎么看着这个节点拖动不像啊