jquery-easyui学习(7)_tree

最新推荐文章于 2019-06-21 10:44:35 发布

原创最新推荐文章于 2019-06-21 10:44:35 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easyui 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI Tree控件实现数据展示、拖拽操作及节点增删改等功能，并提供了丰富的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                        <ul id="t1" class="easyui-tree">
  					<li>
  						<span>根节点</span>
  						<ul>
  							<li><span>节点1</span></li>
  							<li><span>节点2</span></li>
  							<li><span>节点3</span></li>
  						</ul>	
  					</li>
  			</ul>

* html形式渲染tree

* tree是一ul和li为基础构建的

$(function(){
	$('#t2').tree({
	url:'jsp/013_tree.json' , 
	animate:true ,
	checkbox:true ,
	cascadeCheck : false ,
	onlyLeafCheck: true ,
	dnd: true
		     });
	});

* animate 动画效果不然很生硬

* dnd 可以手动拖拽现在只是浏览器可以看到拖拽过去后台实现了才能真正实现拖拽

* $(function(){}) 方法不可少等页面加载完才执行没有的话就先执行了 $('#t2')找不到

	//获取子节点
	function getChildren(){
		var root = $('#t2').tree('getRoot');		//object
		console.info($('#t2').tree('getChildren',root.target));
			      }

* tree里面每一个对象都有一个target属性 target属性是tree对象对应的dom对象

* 要通过jquery id选择器选择id的时候就要放在$(function(){}) 像这种function getChildren() 是等待别人调用的方法可以不用放在$(function(){})

               if("".equals(id) || id == null){
			sql = "select * from resource where parent_id = 999999";
		} else {
			sql = "select * from resource where parent_id = " + id ;
		}

* 第一次访问时 id为null 查询的只有根节点

* 每点击一次父节点就会把父节点的id带过去

                List<Resource> rlist = new ArrayList<Resource>();
		while(rs.next()){
			Resource r = new Resource();
			r.setId(rs.getInt("id"));
			r.setIcon(rs.getString("icon"));
			r.setChecked(rs.getInt("checked"));
			r.setName(rs.getString("name"));
			r.setUrl(rs.getString("url"));
			r.setParent_id(rs.getInt("parent_id"));
			rlist.add(r);
		}
		
		List<TreeDTO> tlist = new ArrayList<TreeDTO>();
		for (Iterator iterator = rlist.iterator(); iterator.hasNext();) {
			Resource resource = (Resource) iterator.next();
			TreeDTO tree = new TreeDTO();
			tree.setId(resource.getId());
			tree.setText(resource.getName());
			tree.setChecked(resource.getChecked());
			tree.setIconCls(resource.getIcon());
			tree.setParent_id(resource.getParent_id());
			if(getChildren(resource.getId()).size() > 0){
				tree.setState("closed");
			} else {
				tree.setState("open");
			}
			Map<String, Object>  map = new HashMap<String, Object>();
			map.put("url", resource.getUrl());
			tree.setAttributes(map);
			tlist.add(tree);
		}

* 数据库对应的实体类与tree要求的json格式不对应所以需要一个中间对象TreeDTO进行转化

* for (Iterator iterator = rlist.iterator(); iterator.hasNext();) for(int i=0;i<10;i++) 少了后面i++ 这个条件

* api里好像没有parent_id这个属性

* url为null 所以 rs.getString("url") 为null

                 $(function(){
					$('#t1').tree({
							url:'ResourceServlet?method=loadTree' , 
							dnd:true,
							onDrop:function(target , source , point){
							    var tar = $('#t1').tree('getNode' , target);
							    //console.info(tar);
								//console.info(source);
								//console.info(point);
								$.ajax({
									type:'post',
									url:'ResourceServlet?method=changeLevel' , 
									data:{
										targetId:tar.id , 
										sourceId:source.id , 
										point:point
									} , 
									dataType:'json' , 
									cache:false , 
									success:function(result){
										$.messager.show({
											title:'提示信息' ,
											msg:'操作成功!'
										});
									}
								});
							}
					});
				});

* target为dom对象目标对象 source 源对象 point 3个值 append top bottom

* cache:false 不要缓存

* getNode 获取指定节点对象

* 要做一个节点的子节点就是append top和bottom是随机的不确定

* 拖拽完排列的顺序有可能和刷新后的不一样刷新后的顺序是按数据库的顺序来排列的

<div id="mm" class="easyui-menu" style="width:150px;">
			<div onclick="append()">Append</div>
			<div onclick="editor()">editor</div>
			<div onclick="remove()">Remove</div>
</div>

* menu是以div为基础的

onContextMenu: function(e,node){
								//禁止浏览器的菜单打开
								e.preventDefault();
								$(this).tree('select',node.target);
								$('#mm').menu('show', {
									left: e.pageX,
									top: e.pageY
								});
}

* e.preventDefault(); 禁止浏览器的菜单打开

* $(this).tree('select',node.target); $(this)相当于$('#t1') 在$('#t1').tree里面用

//取消按钮
		$('#cancelbtn').click(function(){
			$('#mydiv').dialog('close'); 
		});

* 像这种取id的一定要放到$(function(){}) 里面

if(flag == 'add'){
	 //1 做前台更新   
	 //	(1)获取所选中的节点,也就是父节点
	var node = $('#t1').tree('getSelected');
	//  (2)调用追加节点的方法
        $('#t1').tree('append' , {
		parent:node.target ,
		data:[{
			text: $('#myform').find('input[name=name]').val() ,
			attributes:{
				url:$('#myform').find('input[name=url]').val()
						}
				}]
		});
										
	//2 后台同步更新 
	$.ajax({
		type:'post' ,
		url:'ResourceServlet?method=save' ,
		cache:false , 
		data:{
		    parentId:node.id ,
		    name:$('#myform').find('input[name=name]').val() ,
		    url:$('#myform').find('input[name=url]').val()
		} ,
		dataType:'json' ,
		success:function(result){
			//刷新节点 
			var parent = $('#t1').tree('getParent' , node.target);
			$('#t1').tree('reload',parent.target);								
			$.messager.show({
				title:'提示信息',
				msg:'操作成功!'
					});
				}
			});
			//3 关闭dialog
			$('#mydiv').dialog('close'); 
			}

* name:$('#myform').find('input[name=name]').val() 找到id为myform的表单下input标签属性name属性为name的值

* 不要前台更新也可以直接刷新了的

function editor(){
	 flag = 'edit';
	 //清空表单数据 ,重新填充选中的节点里的id ,name , url属性
	 $('#myform').form('clear');
	 var node = $('#t1').tree('getSelected');
	 $('#myform').form('load',{
		id:node.id ,
		name:node.text ,
		url:node.attributes.url
			  });
	 //打开dialog
	$('#mydiv').dialog('open');
			}

* $('#myform').form('load',{
id:node.id ,
name:node.text ,
url:node.attributes.url
});

对这条记录修改回显

* $('#myform').form('clear'); 清除表单会把单选按钮也给清除

function remove(){
					//前台删除
					var node = $('#t1').tree('getSelected');
					$('#t1').tree('remove' , node.target);
					
					//后台删除
					$.post('ResourceServlet?method=delete' , {id:node.id} , function(reuslt){
								//给出提示信息 
								$.messager.show({
									title:'提示信息',
									msg:'操作成功!'
								});
					});
			}

* 火狐谷歌不能删除 360急速 ie 可以删除 remove某个关键字换成remove1 就可以了

	private void deletenodes(int id) throws Exception{
		//获取当前要删除的节点下面所有的孩子 
		List<Resource> rlist = this.rdao.getChildren(id);
		for(int i = 0 ; i < rlist.size();i++){
					int cid = rlist.get(i).getId();
					this.rdao.delete(cid);	//删除操作 
					deletenodes(cid);
		}
		this.rdao.delete(id);
	}

* 递归删除如果下面有子节点子节点一起删了