返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery.simple.tree插件 更简单，兼容性更好的无限树插件

2020-05-22 16:41:08易采站长站整理

效果如下：
选择：

拖拽：

jquery.simple.tree.官网地址： http://news.kg/wp-content/uploads/tree/（貌似已经打不开），不过因为操作比较简单，所以我们暂且用之。
前面讲过jquery EasyUI Tree插件，简单易用，但经过测试仍有诸多缺点，
　　例如：
　　1、兼容IE8的AJAX有问题。
　　2、如果异步返回数据较慢，将可能导致加载失败。
　　3、我们只使用其中的Tree功能，但其体积实在有点庞大。…
而我们需要的是，兼容性好，异步，体积小（用Tree的场景实在比较少，所以还是专用的代码文件比较好。）
好了，我们开始jquery.simple.tree之旅：
首先，要加载文件，一共三个：CSS、Jquery主文件、还有其本身的js文件；
然后，是定义Tree的代码；
最后，写出这根树的根节点HTML代码；
前台代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>区域选择</title>
<link rel=”stylesheet” href=”/js/simpletree/jquery.simple.tree.css” />
<script type=”text/javascript” src=”/js/jquery1.4.2.min.js”></script>
<script type=”text/javascript” src=”/js/simpletree/jquery.simple.tree.js”></script>
<script type=”text/javascript”>
var simpleTreeCollection;
$(document).ready(function(){
simpleTreeCollection = $(‘.simpleTree’).simpleTree({
autoclose: true,
afterClick:function(node){
alert(“您选择了：” + $(‘span:first’,node).text() + “id为：” + $(‘span:first’,node).attr(“id”).substr(2));//此处为何要“.substr(2)”，是因为特殊原因，稍后可以得到解释.如果你仅仅需要取文字，这里可以不取ID。
},
afterDblClick:function(node){
//alert(“text-“+$(‘span:first’,node).text());//双击事件
},
afterMove:function(destination, source, pos){
//alert(“destination-“+destination.attr(‘id’)+” source-“+source.attr(‘id’)+” pos-“+pos);//拖拽事件
},
afterAjax:function()
{
//alert(‘Loaded’);
},
animate:true
//,docToFolderConvert:true
});
});
</script>
</head>
<body>
<ul class=”simpleTree”>
<li class=”root”><span>区域选择</span>

相关文章 大家在看