js/jq基础（日常整理记录）-4-一个简单的自定义tree插件
2024-09-04 17:41:52
一、一个简单的自定义tree插件
上一篇是之前自定义的table插件，这一篇也是之前同期尝试做的一个tree插件。
话不多说，先看看长什么样子哈！
现在来看确实不好看，以后在优化吧！
数据源：ajax请求的挡板数据
[
{"id":"1","name":"安徽","url":"www.baidu.com","pid":"0"},
{"id":"2","name":"江苏","url":"","pid":"0"},
{"id":"3","name":"合肥","url":"","pid":"1"},
{"id":"4","name":"庐阳区","url":"","pid":"3"},
{"id":"5","name":"大杨镇","url":"","pid":"4"},
{"id":"6","name":"南京","url":"","pid":"2"},
{"id":"7","name":"玄武区","url":"","pid":"6"},
{"id":"8","name":"梅园新村街道","url":"","pid":"7"},
{"id":"9","name":"上海","url":"","pid":"0"},
{"id":"10","name":"黄浦区","url":"","pid":"9"},
{"id":"11","name":"外滩","url":"","pid":"10"},
{"id":"12","name":"安庆","url":"","pid":"1"},
{"id":"13","name":"阜阳","url":"","pid":"1"},
{"id":"14","name":"湖南","url":"","pid":"0"}
]
js插件源码：还不完善，以后优化
/**
* JS自执行函数
* @param {Object} $
* @param {Object} undefined
*/
;(function($,undefined){ /**
* 设置tree默认属性
*/
var MyTree=function(ele,opt){
_defaults={
id:'',
data:null,
url:null,
params:null
}
//装配设置
this.Property=$.extend({},_defaults,opt);
}
/**
* 公共资源
*/
var imgPublicDefault='<img class="lj-ul-li-img" src="./img/trees/tree-ul3.jpg">';
var spacePulicDefault='<div class="lj-ul-li-space">-</div>';
var spacePulicDefault2='<div class="lj-ul-li-space"><img class="lj-ul-li-img" src="./img/trees/tree-split1.jpg"></div>'; /**
* 设置tree原型
*/
MyTree.prototype={
//初始化tree
init:function(){
//初始化数据
var datas=this.initData(this);
//统一注册事件
this.bindEvent(this,datas);
},
//初始化数据
initData:function($this){
var _data=$this.Property.data;
//如果有数据，则直接使用，没有则根据url去获取数据 使用优先级： data > url
if(_data!=null){
$this.createTree(_data);
}else{
$.ajax({
url:$this.Property.url,
data:$this.Property.params,
type:'get',
async:false,
dataType:'json',
success:function(responseData){
_data=responseData;
$this.createTree($this,responseData);
}
});
}
return _data;
},
//开始生成tree
createTree:function($this,datas){
var $ul=$('#'+$this.Property.id);
var $lis='';
$('<ul id="lj-tree-ul" class="lj-tree-ul-container"></ul>').appendTo($ul);
//拿到处理之后的数据
var dealedDatas=$this.sortTreeDatasFn($this,datas);
//开始生产tree结构
$.each(dealedDatas, function(index,node) {
//生成tree每个节点
$lis+=$this.creatTreeNodes($this,index,node);
});
$($lis).appendTo($('#lj-tree-ul'));
return dealedDatas;
},
//递归生产父节点以及包含的子节点
creatTreeNodes:function($tree,index,node){
var $lis='';
//只有父节点时：直接添加
if(node.childs.length==0){
$lis='<li class="lj-tree-li" id="fold_'+node.id+'">'+spacePulicDefault+'<input id="fold_radio_'+node.id+'" type="checkbox"/>'+node.name+'</li>';
}else{
//含有子节点时：递归处理
$lis='<li class="lj-tree-li" id="fold_'+node.id+'"><img id="fold_img_'+node.id+'" class="lj-ul-li-img" src="./img/trees/tree-ul3.jpg"><input id="fold_ck_'+node.id+'" type="checkbox"/>'+node.name;
$lis+=$tree.creatNodesByChilds($tree,node);
}
return $lis;
},
//递归生成带有子节点的父节点
creatNodesByChilds:function($tree,node){
//递归处理:
var $lis=$tree.forFnByChilds($tree,node,node.childs);
return $lis;
},
forFnByChilds:function($tree,parentNode,childNodes){
var $lis='<ul class="lj-tree-ul">';
$.each(childNodes, function(index,node) {
if(node.childs.length==0){
$lis+='<li class="lj-tree-li" id="fold_'+node.id+'">'+spacePulicDefault+'<input id="fold_ck_'+node.id+'" type="checkbox"/>'+node.name+'</li>';
}else{
$lis+='<li class="lj-tree-li" id="fold_'+node.id+'"><img id="fold_img_'+node.id+'" class="lj-ul-li-img" src="./img/trees/tree-ul3.jpg"><input id="fold_ck_'+node.id+'" type="checkbox"/>'+node.name;
$lis+=$tree.forFnByChilds($tree,node,node.childs);
}
});
return $lis+='</ul></li>';
},
//递归处理json数据
sortTreeDatasFn:function($this,arr){
return $this.forFn($this,arr,'0');
},
forFn:function($this,arr,id){
var temp=[];
var count=0;
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.pid==id) {
temp[count]=item;
temp[count].childs=$this.forFn($this,arr,item.id);
count++;
}
}
return temp;
},
//统一注册事件
bindEvent:function($this,$datas){
//折叠选择更换
$this.treeFoldChanged($datas);
//全选、全消
$this.treeSelectByNode($datas); },
//折叠按钮触发事件
treeFoldChanged:function($datas){
$.each($datas,function(index,node){
var nodeId='fold_img_'+node.id;
$('#'+nodeId).bind('click',function(){
$('#fold_'+node.id+'>ul').toggle( function(){
if($(this).css('display')=='none'){
$('#'+nodeId).attr("src","img/trees/tree-ul2.jpg");
}else{
$('#'+nodeId).attr("src","img/trees/tree-ul3.jpg");
}
});
});
});
},
//全选
treeSelectByNode:function($datas){
$.each($datas,function(index,node){
var radioId='fold_ck_'+node.id;
$('#'+radioId).bind('click',function(){
var radios=$(this).parent().find('input');
$.each(radios,function(i,node){
node.checked=radios[0].checked;
});
});
});
} } /**
* 创建tree实例
* @param {Object} options
*/
$.fn.mytree=function(options){
//实例化tree对象
var tree=new MyTree(this,options);
//初始化tree
tree.init();
//返回tree对象
return tree;
} })(jQuery);
看看如何使用：
<script type="text/javascript">
$(function() {
$('#treeData').mytree({
id:'treeData',
data:null,
url:'json/tree_learn_02.json',
params:null
});
});
</script>
最新文章
- C#代码示例_定义类
- Mybatis多参传递的四种解决方案
- 通过全局设置过滤器，就能让所有窗口都可移动，而不是都要继承指定QDialog
- poj1811 Prime Test
- Python数据类型之列表
- NOIP2009 靶形数独
- JS 函数调用
- linux操作Oracle导入导出dmp数据命令
- C语言递归分析
- javascript中base64和Gzip的使用
- JavaScript检测之basevalidate.js
- Hadoop经典面试题（转）
- openstack 装逼之路~openstack各组件关系
- ExpandableListView实现手风琴效果
- PHP操作MySQL数据库之天龙八部 -- 七贱下天山 -- 六脉神剑
- VS2010安装OpenGL
- iOS推送：Java服务器端发送表情(绘文字)
- Ubuntu16.04下安装Hyperledger Fabric 1.0.0
- SNORT入侵检测系统
- linux服务器，发现大量TIME_WAIT