jquery 异步treeTable树形插件

<@fkMacros.pageHeaderBegin  />

<script language="javascript">
	window.SITE_URL ='${resourcePath}';
</script>

<link rel="stylesheet" type="text/css" href="${resourcePath}/js/treeTable/vsStyle/jquery.treeTable.css" />
<script src="${resourcePath}/js/treeTable/jquery.treeTable.js" type="text/javascript"></script>

<@fkMacros.pageHeaderEnd />

<@fkMacros.lhgDialog />

<script language="javascript">

var $treeTable=null;
$(document).ready(function(){
       
       $treeTable=$('#tableList').treeTable({
        	theme:'vsStyle',
        	expandLevel : 1,
        	url:'lawCalling_loadTree.xhtml?fatherId=',
        	callback:function(item) {
        	  
	           var result= '<td style="text-align:left">'+item.name+'</td>'+
						   '<td >'+(item.modifyTime).replace("T"," ")+'</td>'+
						   '<td class="align-left" >'+
					       '【<a href="javascript:openURL(\'${contextPath}/lawCalling/lawCalling_info.xhtml?lawCalling.fatherId='+item.id+'\',\'新建【'+item.name+'】子模块\',\'addson'+item.id+'\',400,150)">添加子分类</a>】'+
					       '【<a href="javascript:openURL(\'${contextPath}/lawCalling/lawCalling_info.xhtml?lawCalling.id='+item.id+'\',\'编辑行业分类\',\'modify'+item.id+'\',400,150)">修改</a>】'+
					       '【<a onclick="del('+item.id+',this)" href="javascript:;">删除</a>】'+
					       '<a href="javascript:;" onclick="sort('+item.id+',true);">向上</a>'+
					       '<a href="javascript:;" onclick="sort('+item.id+',false);">向下</a>'+
						   '</td>';
				return result;				   
        	},
        	beforeClick: function($treeTable, id) {
        		//异步获取数据 这里模拟替换处理
        		$treeTable.refreshPoint(id);
        	},
        	beforeExpand : function($treeTable, id) {   
        	
            },
            beforeClose : function($treeTable, id) {  
          
            }
        });

});


function del(id,con){
	if(confirm(' 确认要删除吗？')){
	   $.ajax({
	    	  url:'lawCalling_del.xhtml',
	    	  data:"lawCalling.id="+id,
	    	  type:"GET",
	    	  cache:false,
	    	  async:false,
	    	  dateType:"json",
	    	  error:function(XMLHttpRequest,textStatus) {
	              alert('服务器连接失败，请稍候重试！');
	    	  },
	  		  success: function(response){
	  		  	  if(!response.success){
	  		  	  		alert(response.message);
	  		  	  		return;
	  		  	  }
	  		      var pId=$(con).parents('tr').attr("pId");
			  	  var $t=$(con).parents('table').find("tr[id='"+pId+"']");
			  	  $($(con).parents('tr')[0]).remove();
				  $treeTable.initMap($t.parents('table').find("tr"));
			  	  $treeTable.initChild($t,true);
			  	  $treeTable.open($t.attr("pId"));
			  	  $treeTable.expand($t);
			  }
		});	
	}
}


var reload=function(id) {
	if(id)
		$treeTable.refreshPoint(id);
}

function sort(id,isUpSort){
        var success=ajax('lawCalling_sortNum.xhtml',"lawCalling.id="+id+"&upSort="+isUpSort);
		if(success){
	  	 
	  	 	 var $ctr=$("tr[id='"+id+"']",$treeTable);
	  	 	 var $trs=null;
	  	 	 if($ctr.attr("pId")!=null)
	  	 	 	$trs=$("tr[pId='"+$ctr.attr("pId")+"']",$treeTable);
	  	 	 else
	  	 	 	$trs=$("tr[depth='1']",$treeTable);	
	  	 	 if($trs.size()>1) {
	  	 	 	  //递归深度
		  	 	 if(isUpSort) {
		  	 	 	if($trs[0].id==$ctr[0].id){alert("已经置顶了！"); return;}
		  	 	 	var i=0;
		  	 	 	$trs.each(function(k){
		  	 	 		if(this.id==$ctr[0].id) i=k;
		  	 	 	});
		  	 	 	var $ptr=$($trs[i-1]);
		  	 	 	
		  	 	 	
		  	 	 	//封装
		  	 	 	var indexB=0,indexE=0,depth=parseInt($ctr.attr("depth"),10);
		  	 	 	
		  	 	 	var $alltrs=$("tr",$treeTable);
		  	 	 	for(var k=0;k<$alltrs.size();k++)
		  	 	 	{
		  	 	 		if($alltrs[k].id==$ctr[0].id) {
		  	 	 			indexB=k;
		  	 	 		} else if(indexB>0&&parseInt($($alltrs[k]).attr("depth"),10)>depth) {
		  	 	 			indexE=k;
		  	 	 		} else if(indexB>0&&parseInt($($alltrs[k]).attr("depth"),10)<=depth) {
		  	 	 			break;
		  	 	 		}
		  	 	 	}
		  	 	 	
		  	 	 	var selector="tr:eq("+indexB+")";
		  	 	 	indexB++;
		  	 	 	while(indexB<=indexE) {
		  	 	 		selector+=",tr:eq("+indexB+")";
		  	 	 		indexB++;
		  	 	 	}
		  	 		//交换
		  	 	 	$(selector,$treeTable).insertBefore($ptr);
		  	 	 }else {
		  	 	 	if($trs[$trs.size()-1].id==$ctr[0].id){alert("已经末端了！"); return;}
		  	 	 	var i=0;
		  	 	 	$trs.each(function(k){
		  	 	 		if(this.id==$ctr[0].id) i=k;
		  	 	 	});
		  	 	 	var $ntr=$($trs[i+1]);
		  	 	
		  	 	 	//封装
		  	 	 	var indexB=0,indexE=0,depth=parseInt($ntr.attr("depth"),10);
		  	 	 	
		  	 	 	var $alltrs=$("tr",$treeTable);
		  	 	 	for(var k=0;k<$alltrs.size();k++)
		  	 	 	{
		  	 	 		if($alltrs[k].id==$ntr[0].id) {
		  	 	 			indexB=k;
		  	 	 		} else if(indexB>0&&parseInt($($alltrs[k]).attr("depth"),10)>depth) {
		  	 	 			indexE=k;
		  	 	 		} else if(indexB>0&&parseInt($($alltrs[k]).attr("depth"),10)<=depth) {
		  	 	 			break;
		  	 	 		}
		  	 	 	}
		  	 	 	
		  	 	 	var selector="tr:eq("+indexB+")";
		  	 	 	indexB++;
		  	 	 	while(indexB<=indexE) {
		  	 	 		selector+=",tr:eq("+indexB+")";
		  	 	 		indexB++;
		  	 	 	}
		  	 	 	//交换
		  	 	 	$(selector,$treeTable).insertBefore($ctr);
		  	 	 } 
		  	 	 
		  	 	//$treeTable.initMap($treeTable.find("tr"));
	  	 	 }
	  	} else {
	  		alert("移动失败！"); 
	  	}
}


function ajax(url,data){
		var success;
		$.ajax({
	    	  url:url,
	    	  data:data,
	    	  type:"GET",
	    	  cache:false,
	    	  async:false,
	    	  dateType:"json",
	    	  error:function(XMLHttpRequest,textStatus) {
	              alert('服务器连接失败，请稍候重试！');
	              success=false;
	    	  },
	  		  success: function(response){
	  		      if(response.message!==null){
	  		      	//alert(response.msg);
	  		      }
	  		  	  if(!response.success){
	  		  	  		success=false;
	  		  	  		return;
	  		  	  }
                  success=true;
			  }
		});	
		return success;
}

</SCRIPT>

<#escape x as (x)!> 

<div class="Current_bg"><div class="Current">行业分类管理</div></div>


<table width="98%" border="0" cellpadding="0" cellspacing="0" class="list_menu margin" height="30" align="center">
  <tr>
    <td align="right"><a href="javascript:openURL('${contextPath}/lawCalling/lawCalling_info.xhtml?lawCalling.fatherId=-1','添加顶级行业','top',400,150)">添加顶级行业</a></td>
	<td width="30"></td>
  </tr>
</table>


<table width="98%" id="tableList" border="0" cellspacing="0" cellpadding="0" class="list" align="center">
   <thead>
	  <tr>
	    <th width="32%">行业名称</th>
	    <th width="13%">创建时间</th>
	    <th width="55%">操作</th>
	  </tr>
   </thead>
   <tbody>
   </tbody>
    <tfoot>
       <#if lawCallingList?size==0>
    	   <tr>
    	      <td colspan="4" style="text-align:center;">此列表没有任何数据!</td>
    	   </tr>
		</#if>
    </tfoot>
</table>

</#escape> 

<@fkMacros.pageFooter />

public List<LawCalling> loadLawCallingTreeByFatherId(Long id){
		String hql = "select new LawCalling(id,fatherId,name,modifyTime,(select case when count(*) = 0 then 'false' else 'true' end from LawCalling " +
	           "where fatherId = f.id and deleted=0) as haschild ) from LawCalling f where f.fatherId="+id+" and f.deleted=0 order by f.sortNum asc ";
		
		return lawCallingPersistence.findByHql(hql,null);
	}
	

评论

6 楼 fjyuxuebin 2017-12-30  

怎么调用，有调用demo吗？

5 楼 anyone 2015-12-03  

非常不错的插件

4 楼 孤心随云 2015-11-03  

看起来不错！试一下先！

3 楼 iwq1990512 2014-11-06  

最后Java代码，返回的不是json数据吧

2 楼 dengli19881102 2014-09-29  

可以把整个代码提供么？

1 楼 songguozhi 2014-03-31  

添加 、修改能异步刷新吗？