`

js table tree

 
阅读更多
<!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>
	<meta http-equiv="Content-Type" content="utf-8" /> 
	<title>ja table tree</title>
	<link href="${resourcePath}/css/manage.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="${resourcePath}/js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="${resourcePath}/js/easyui/themes/icon.css" />
	<script type="text/javascript" src="${resourcePath}/js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="${resourcePath}/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${resourcePath}/js/easyui/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="${resourcePath}/fixedHeaderTable/css/defaultTheme.css" />
	<script type="text/javascript" src="${resourcePath}/fixedHeaderTable/jquery.fixedheadertable.js"></script>
	<style>
	  .trbg {background:#CCFFFF}
    </style>
    <script>
	 	 var _img ='${resourcePath}/images/_1.gif';
		 var  img ='${resourcePath}/images/1.gif';
		 var  fimg = '${resourcePath}/images/file.gif';
		 var loadimg ='${resourcePath}/images/loading.gif';
	</script>
	<script type="text/javascript" src="${resourcePath}/js/area.js"></script>
	
	
	<script>
	
	function windowHeight() {
	    var de = document.documentElement;
	    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
    }
	
	$(function(){
	      var p = $("#ddbody").position();
	      var wh = $("#operate").width();//可视化宽度,需要绑定一个页面中的元素来动态获取
	      var ht= windowHeight() - p.top;//可视化高度
	      var pobj = new Object();
	      pobj.width = wh;
	      pobj.height = ht;
	      pobj.themeClass ='table_list';//表格样式,需要时替换自己的
	      $('#table_color').fixedHeaderTable(pobj);//注意jquery的版本必须为1.5以上
	    
	
	});
	
	</script>
	</head>
	<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="content">
  <tr>
   
    <td valign="top">
	
	<div class="con_box">
		<div class="Current_bg margin2">
			<div class="Current">当前功能:区域定义管理</div>
			<div class="Version">版面号:301103</div>
			<div id="clear"></div>
		</div>
		
		<div class="operate" id="operate">
			<div class="operate_left">
				<ul>
				
				 <li><a href="#" onclick="addTopArea();"><span>添加顶级区域</span></li>   
				 
				 <li><a href="#" onclick="release();"><span>静态发布</span></li>   
				 
				 <li><a href="#" onclick="moveDown(-1);"><span>向下排序</span></li>   
				 
				 <li><a href="#" onclick="moveUp();"><span>向上排序</span></li>   
				  
				 
				    
				</ul>
			</div>
			<div class="operate_right"><a href="#" onclick="window.location.reload();"><img src="${resourcePath}/images/reload.gif"  alt="刷新"/></a> </div>
		</div>

      
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_list" id="table_color" >
		   <thead id="ddthead" >
		    <tr>
			     <th width="2%">选择</th>
			     <th width="20%">区域名称</th>
			     <th width="10%">区域编码</th>
		     </tr>
		   </thead>
		   <tbody id="ddbody" > 
		   </tbody> 
		  </table>
				
				
			</div>
			</td>
		  </tr>
		</table>


<!-- 默认,整个初始化工作区隐藏    -->
<div  id="allDis" style="display:none;">


<!--  鼠标右键配置        -->
<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="appendArea()">增加子区域</div>
	<div onclick="modifyArea()">编辑</div>
	<div onclick="removeArea()">删除</div>
</div>


<!--  新增,修改区域   -->
 <div id="areaDiv" style="padding: 20px; width: 350px; height: 220px;">
 <form action="${contextPath}/arealocal/createArea.xhtml" name="areaForm" id="areaForm" method="post">
 <table id="areaFormTable" cellspacing="5" cellpadding="0">
	
	<tr>
		<td>上级区域:</td>
		<td id="td_father">&nbsp;</td>
	</tr>
	
	<tr>
		<td align="right"><span style="font-size: 12px">区域名称:</span></td>
		<td><input type="text" class="easyui-validatebox" id="areaName" name='fkArea.areaName' style="width:200px;" maxlength="20"  required="true" missingMessage="请输入区域名称"></input></td>
	</tr>
	
	<tr>
		<td align="right"><span style="font-size: 12px">区域编码:</span></td>
		<td><input type="text" class="easyui-validatebox" id="areaCode" name='fkArea.areaCode' style="width:200px;" maxlength="20" required="true" missingMessage="请输入区域编码" validType="positive_int"></input></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	
	<tr>
		<td colspan="2" align="center">
			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="doSubmit();">确定</a>
			<a href="#" class="easyui-linkbutton" icon="icon-redo" onclick="doReset();">重置</a>
		</td>
	</tr>
</table>
 
  <input type="hidden" name="fkArea.id" id="fkAreaId" value="" />
  <input type="hidden" name="fkArea.fatherId" id="fatherId" value="" />
  <input type="hidden" name="fkArea.sortNum" id="sortNum" value="" />
  <input type="hidden" name="fkArea.gradePath" id="gradePath" value="" />
</form>
</div>

 <input type="hidden" name="nodeId" id="nodeId" value="" />
 
 
 
 <div id="releaseDiv" style="padding: 20px; width: 350px; height: 220px;" >
 <form action="${contextPath}/arealocal/updateReleaseArea.xhtml" name="releaseForm" id="releaseForm" method="post">
 <table id="releaseFormTable" cellspacing="6" cellpadding="0">
	
	
	<tr>
		<td align="right"><span style="font-size: 12px">顶级区划代码:</span></td>
		<td><input type="text" class="easyui-validatebox" id="areaCodeBegin" name='areaCodeBegin' style="width:150px;" maxlength="20"  required="true" missingMessage="请输入顶级区划代码"  validType="positive_int"></input></td>
	</tr>
	
	<tr>
		<td align="right"><span style="font-size: 12px">向下深度:</span></td>
		<td><input type="text" class="easyui-validatebox" id="releaseDeep" name='releaseDeep' style="width:150px;" maxlength="20" required="true" missingMessage="请输入区域向下深度" validType="positive_int"></input></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	
	<tr>
		<td colspan="2" align="center">
			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="doRelease();">确定</a> &nbsp;&nbsp;
			<a href="#" class="easyui-linkbutton" icon="icon-redo" onclick="doRReset();">重置</a>
		</td>
	</tr>
</table>
 
</form>
</div>
 
<!-- loading  -->
 <div id="confirm-dialog-modal" style="height:160px;width:320px;">
		<p align="center" style="font-size:12px">正在处理中,请稍后...</p>
		<p align="center"><img src='${resourcePath}/images/b_loading.gif' style='width:100px;height:80px'/></p>
 </div> 
 
</div>

</body>
</html>


	 // js cookie 设置
	 var Cookie={
		set:function(name,value,expires,path,domain){
			if(typeof expires=="undefined"){
				expires=new Date(new Date().getTime()+10*24*3600*1000);
			}
			document.cookie=name+"="+escape(value)+((expires)?"; expires="+expires.toUTCString ():"")+((path)?"; path="+path:"; path=/")+((domain)?";domain="+domain:"");
		},
		get:function(name){
			var arr=document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
			if(arr!=null){
				return unescape(arr[2]);
			}
			return null;
		},
		clear:function(name,path,domain){
			if(this.get(name)){
				document.cookie=name+"="+((path)?"; path="+path:"; path=/")+((domain)?"; domain="+domain:"")+";expires=Thu, 01-Jan-1970 00:00:01 UTC ";
			}
		}
      };
      
      //扩展easyui验证
      $.extend($.fn.validatebox.defaults.rules, {   
		    positive_int:{   
		        validator:function(value,param){   
		            if (value){   
		                return /^[0-9]*[0-9][0-9]*$/.test(value);   
		            } else {   
		                return true;   
		            }   
		        },   
		        message:'请输入整数!'  
		    } 
       }); 
      
      
	 //初始化根节点json获取
	  function getSonJson(pid){
		    return $.ajax({
				  url: 'loadAreaByFatherId.xhtml',
				  data:'id='+pid,
				  type:"get",
				  cache:false,
				  async:false,
				  error:function(XMLHttpRequest,textStatus) {
					  alert('获取数据出错');
				  }
			}).responseText;
	    
	    }
	   //收缩、展开表格树操作 
	   function addAjaxTreeTr(obj,id){
	         var trid = $('#tr_'+id);
	         var b_name = trid.attr("name")+"/";
	         if($(obj).attr('src').indexOf(_img)>-1){//收缩表格树
	           $("[name^='"+b_name+"']").not(trid).each(function(){ //记录收缩前的表格状态
	               if($(this).is(':visible')){
	                   Cookie.set(trid.attr('id') + $(this).attr('id'),"visible");
	               }else{
	                   Cookie.set(trid.attr('id') + $(this).attr('id'),"hidden");
	               }
	               $(this).hide();
	           });
	           $(obj).attr('src',img);
	            
	         }
	         else if($(obj).attr('src').indexOf(img)>-1){ //展开表格树
	             var isNotload = false; //是否已经延迟加载
	             if(trid.next().length == 0){
	                  isNotload = true;
	             } else{
		             if($("[name^='"+b_name+"']").not(trid).length ==0){
		                isNotload = true;
		             }else{//若已经加载过了无需再次加载,展开时需要从cookies中判断收缩前的状态
		                $("[name^='"+b_name+"']").not(trid).each(function(){
		                    var tr_cook = Cookie.get(trid.attr('id') + $(this).attr('id'));
		                    if(tr_cook == null || tr_cook == "visible"){
		                        $(this).show();
		                    }
		                });
			            $(obj).attr('src',_img);
			           
		             }
	             }
	             if(isNotload){//异步加载表格树
	                  $(obj).attr('src',loadimg);
			          $.ajax({
					      url: 'loadAreaByFatherId.xhtml',
						  data:'id='+id,
						  type:"get",
						  cache:false,
						  success: function(data){
							 trid.after(parseJsonToHtml(data));
							 $(obj).attr('src',_img); 
							 contextMenu();
						  },
						  error: function(){
							alert('没有查询权限!');
						  }
				       });
	             }
	         }
	      
	    }
	    
	    function parseJsonToHtml(J){
	       var j_length = $(eval(J)).length;
	       if(j_length == 0) return '';
	       var html='';
	       $(eval(J)).each(function(i){
	            var id = this[0];
	            var fatherId = this[1];
	            var areaName = this[2];
	            var areaCode = this[3];
	            var gradePath = this[4];
	            var level = gradePath.split('/').length -1;
	            var sortNum = this[5];
	            var sonnum = Number(this[6]);
	           
	            html +='<tr id="tr_'+id+'"  level="'+level+'"  name="'+gradePath+'"  onclick="setBgColor(this);">';
	            html +='<td><input type="checkbox" name="check_'+gradePath+'"  onclick="setCheck(this)"></td>';
	            if(sonnum > 0){
	               html +='<td  id="name_'+id+'" > <input type="hidden" id="num_'+id+'" value="'+sortNum+'" /><span style="margin-left:'+(level*20)+'px;"></span><img id="img_'+id+'"  src="'+img+'" style="cursor:pointer;" onclick="addAjaxTreeTr(this,'+id+');" border="0"/>  '+areaName+'</td>';
	            }else{
	               html +='<td  id="name_'+id+'" > <input type="hidden" id="num_'+id+'" value="'+sortNum+'" /><span style="margin-left:'+(level*20)+'px;"></span><img id="" src="'+fimg+'" border="0" />  '+areaName+'</td>';
	            }
	            html +='<td>'+areaCode+'</td>';
	            html +='</tr>';
	       });
	      
	       return html;
	    }
	    
	  function setCheck(obj){
	      var _thisName = $(obj).attr('name')+'/';
	      if($(obj).attr("checked")){
	          $("[name^='"+_thisName+"']").attr("checked",true);
	      }else{
	         $("[name^='"+_thisName+"']").attr("checked",false);
	      }
	   
	   }
	   
	  function setBgColor(obj){
	       $("#ddbody tr").removeClass("trbg");
           $(obj).addClass("trbg");
	   }
	    
	  $(function(){
	     $('#ddbody').append(parseJsonToHtml(getSonJson(-1)));  //初始化根节点
	     contextMenu(); //初始化右键菜单
	     setDialogInit(); //dialog 初始化
	  });
	  
	  
	  //绑定右键操作
	  function contextMenu(){
	  
		  $('#ddbody tr').bind('contextmenu',function(e){
				$('#nodeId').val($(e.target).parent('tr').eq(0).attr('id').replace('tr_',''));
				$('#mm').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
				return false;
			});
	  
	  }
	  
	  //增加顶级区域
	  function addTopArea(){
	      doReset();
	      $('#areaDiv').dialog('setTitle','添加顶级区域');
	      $('#fatherId').val(-1); //顶级区域默认父级 -1
	      $('#td_father').html('<font color="#666666">顶级区域</font>');
	       $('#areaForm').attr('action','createArea.xhtml');
	      $('#areaDiv').dialog('open');
	  
	  }
	  
	  //增加子区域
	  function appendArea(){
	           doReset();
	           $('#areaDiv').dialog('setTitle','添加子区域');
	           var fatherId = $('#nodeId').val();
	           var fname= $('#name_'+fatherId).text();
	           $('#td_father').html('<font color="#666666">'+fname+'</font>');
	           $('#fatherId').val(fatherId);
	           $('#areaForm').attr('action','createArea.xhtml');
	           $('#areaDiv').dialog('open');
	           
	  }
	  
	  //修改区域
	  function modifyArea(){
	      doReset();
	      $('#areaDiv').dialog('setTitle','修改区域');
	      var id = $('#nodeId').val();
	      $.ajax({
			  url: 'loadTreeNode.xhtml',
			  data:'nodeId='+id,
			  type:"get",
			  cache:false,
			  dateType:"json",
			  async:false,
			  error:function(XMLHttpRequest,textStatus) {
				  alert('你没有查询的权限!');
			  },
			  success: function(res){
				var aid = res.nodeId;
				var areaName = res.areaName;
				var fatherId = res.fatherId;
				var areaCode = res.areaCode;
				var sortNum = res.sortNum;
				var gradePath = res.gradePath;
				var fname ='';
				if(fatherId == -1)fname ='顶级区域';
				else fname= $('#name_'+fatherId).text();
	            $('#td_father').html('<font color="#666666">'+fname+'</font>');
				$('#fkAreaId').val(aid);
				$('#areaName').val(areaName);
				$('#fatherId').val(fatherId);
				$('#areaCode').val(areaCode);
				$('#sortNum').val(sortNum);
				$('#gradePath').val(gradePath);
				$('#areaForm').attr('action','updateTreeNode.xhtml');
				$('#areaDiv').dialog('open');
				
			  }
			});
	     
	  }
	  
	  //删除区域
	  function removeArea(){
	       var id = $('#nodeId').val();
		   $.messager.confirm('操作提示', '你确认要删除此区域吗?', function(r) {
	            if (r) {
	               $.ajax({
					  url: 'deleteTreeNode.xhtml',
					  data:'nodeId='+id,
					  type:"post",
					  cache:false,
					  dateType:"json",
					  async:false,//false=同步调用
					  error:function(XMLHttpRequest,textStatus) {
						  alert('你没有删除的权限!');
					  },
					  success: function(response){
						if(response){
						   $.messager.alert('操作提示','删除成功!','info'); 
						   window.location.href="loadAreas.xhtml";
						} else{
						    $.messager.alert('操作提示','请先删除子区域!','info'); 
						}
					  }
					});
	                
	            }
	        });
	  }
	  
	  
	  //弹出窗口初始化
	  function setDialogInit(){
	  	  
		    $('#releaseDiv,#areaDiv,#confirm-dialog-modal').dialog({
				title : '新增区域',
				modal: true,         //模式窗口:窗口背景不可操作
				collapsible : true,  //可折叠,点击窗口右上角折叠图标将内容折叠起来
				resizable : true,    //可拖动边框大小
				closed: true,        //默认隐藏dialog
				draggable:false,
				closable : true     //不提供关闭窗口按钮
		});
	  }
	  
	  
	  //同级节点向上移动
	  function moveUp(){
	      
	      var trid = $('.trbg');
	      
	      if(trid.length ==0 ){
	          $.messager.alert('操作提示','请选择要移动的行!','info'); 
	          return;
	      }
	      
	      var level = trid.attr('level');
	      var tsonAll = trid.prevUntil("tr[level='"+level+"']"); //遇到同级别的level为止
	      var ptr;
	      if(tsonAll.length == 0){
	          ptr = trid.prev();
	      }else{
	          ptr = tsonAll.last().prev();
	      } 
	    
	      if(ptr.length ==0 ){
	          $.messager.alert('操作提示','已经到头了!','info'); 
	          return;
	      }
	      moveDown(ptr.attr('id').replace('tr_',''));
	  }
	  
	  
	  //同级节点向下移动
	  function moveDown(val){
	  	  var id = -1;
	      if(val == -1)
	      {
	  	    var trid = $('.trbg');
	  	    if(trid.length ==0 ){
	            $.messager.alert('操作提示','请选择要移动的行!','info'); 
	            return;
	        }
	        id= trid.attr('id').replace('tr_','');
	      }else{
      	    id =val;
      	    var trid = $('#tr_'+id);
	      }
	      var level = trid.attr('level');
	      var tsonAll = trid.nextUntil("tr[level='"+level+"']"); //遇到同级别的level为止(可能已经延迟加载过)
	      var ntr;
	      if(tsonAll.length == 0){ //没有异步加载过该节点
	          ntr = trid.next();
	      }else{
	          ntr = tsonAll.last().next();
	      }
	      if(ntr.length ==0 ){
	          $.messager.alert('操作提示','已经到头了!','info'); 
	          return;
	      }
	      var nid = ntr.attr('id').replace('tr_','');
	      var num_id = $('#num_'+id).val();
	      var num_nid = $('#num_'+nid).val();
	      var swapnum = id +','+num_id+'|'+nid+','+num_nid;
	     $.ajax({
			      url: 'updateSwapNum.xhtml',
				  data:'swapnum='+swapnum,
				  type:"post",
				  cache:false,
				  success: function(res){
					if(eval(res)){
					
					     $('#num_'+id).val(num_nid); //由于是异步,交换隐藏sortnum
	                     $('#num_'+nid).val(num_id);
					     
					     var nsonAll = ntr.nextUntil("tr[level='"+level+"']");//判断被交换的节点是否已经异步加载过子节点,交换时子节点一同交换移动
					      if(tsonAll.length == 0 && nsonAll.length == 0 ){
					           ntr.insertBefore(trid);
					      } else if( tsonAll.length>0 && nsonAll.length == 0){
					            tsonAll.each(function(){
					                ntr.insertBefore($(this));
					            });
					            ntr.insertBefore(trid);
					      } else if(tsonAll.length == 0 && nsonAll.length > 0){
					             ntr.insertBefore(trid);
					             nsonAll.each(function(){
					                $(this).insertBefore(trid);
					             });
					      } else if(tsonAll.length > 0 && nsonAll.length > 0){
					            tsonAll.each(function(){
					                ntr.insertBefore($(this));
					            });
					            ntr.insertBefore(trid);
					            nsonAll.each(function(){
					                $pthis = $(this);
					                tsonAll.each(function(){
					                    $pthis.insertBefore($(this));
					                });
					                $pthis.insertBefore(trid);
					            });
					      }
					
					}else{
					   alert('更新顺序出错!');
					}
					
				  },
				  error: function(){
					alert('没有更新顺序权限!');
				  }
		   });
	      
	  }
	 
	 function doSubmit(){
	    var validateResult = true;
		$('#areaFormTable input').each(function () {
			if ($(this).attr('required') || $(this).attr('validType')) {
				if (!$(this).validatebox('isValid')) {
					//如果验证不通过,则返回false
					validateResult = false;
					return;
			    }
			}
	    });
		if(validateResult==false){
			return;
		}
	    document.getElementById("areaForm").submit();
	 }
	 
	 function doReset(){
	    $("#areaName").val("");
	    $("#areaCode").val("");
	 }
	 
	 function release(){
	      doRReset();
	      $('#releaseDiv').dialog('setTitle','静态发布');
	      $('#releaseDiv').dialog('open');
	 }
	 
	 function doRelease(){
	    var validateResult = true;
	      $('#releaseFormTable input').each(function () {
		  if ($(this).attr('required') || $(this).attr('validType')) {
				if (!$(this).validatebox('isValid')) {
					validateResult = false;
					return;
			    }
			}
	    });
		if(validateResult==false){
			return;
		}
		$('#confirm-dialog-modal').dialog('setTitle','发布区域');
		$('#confirm-dialog-modal').dialog('open');
		$.ajax({
			  url: 'updateReleaseArea.xhtml',
			  data:{"areaCodeBegin":$('#areaCodeBegin').val(),"releaseDeep":$('#releaseDeep').val()},
			  type:"post",
			  cache:false,
			  error:function(XMLHttpRequest,textStatus) {
			       $.messager.alert('操作提示','你没有发布的权限!','info'); 
				   $('#confirm-dialog-modal').dialog('close');
				   $('#releaseDiv').dialog('close');
			  },
			  success: function(response){
				if(eval(response)){
				    $.messager.alert('操作提示','发布成功!','info'); 
				    $('#confirm-dialog-modal').dialog('close');
				    $('#releaseDiv').dialog('close');
				} else{
				    $.messager.alert('操作提示','发布失败!','info'); 
				    $('#confirm-dialog-modal').dialog('close');
				     $('#releaseDiv').dialog('close');
				}
				
				
			  }
			});
		
	 }
	 
	 function doRReset(){
	     $("#areaCodeBegin").val("");
	     $("#releaseDeep").val("");
	 }


jquery 表头固定插件
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics