📄 infoclass.htm

📁 利用AJAX实现目录树
💻 HTM
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
		<meta content="C#" name="CODE_LANGUAGE">
		<meta content="Javascript" name="vs_defaultClientscript">
		<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
		<script src="js/dhtmlXCommon.js"></script>
		<script src="js/dhtmlXTree.js"></script>
		<script src="js/xml.js"></script>
		<link href="css/myStyle.css" type="text/css" rel="stylesheet">
		<script src="/HttpForAjax/ajax/common.ashx" type="text/javascript"></script>
		<script src="/HttpForAjax/ajax/Ttyu.AjaxData,HttpForAjax.ashx" type="text/javascript"></script>
		<script>
	var DomTree = null;//组织机构树DOM
	var TableName="tInfoClass";//当前结点ID
	var ID;            //当前结点的班级ID
	var CurrNodeID;    //当前结点ID
	var CanAdd=false;
	
   function Init( )
   {
		DomTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0);
		DomTree.setImagePath("imgs/");
		DomTree.enableDragAndDrop(true)
		DomTree.setDragHandler(myDragHandler);
		DomTree.setOnClickHandler(SelectTreeNode);
		var s= AjaxData.GetXmlTree().value;
		
		DomTree.loadXMLString(s);
		DomTree.openItem("R_1");
		SelectTreeNode("R_1");
		divToolbar.innerHTML=AjaxData.GetToolBarTable(TableName).value;
	//	alert(divToolbar.innerHTML);
		divDataGrid.innerHTML=GetTableOuterHTML(TableName);		
	}
	
 
	function myDragHandler(idFrom,idTo)
	{	
    }

	function SelectTreeNode(id)
	{ 
	    CurrNodeID=id;
		var NodeID=id.split('_');
		this.ID=NodeID[1];
		//alert(this.ID);	
		var Type=NodeID[0];
		var Table;
		if(Type=="R")//选择根
		   {
		      var Filter="ID >=0";
		      CanAdd=false;
		   }
		if(Type=="G")//选择年级
		{
		    var Filter="年级ID ="+this.ID;
		    CanAdd=true;
		}
		if(Type=="C")//选择班级
		{//alert(this.ID);	
		    var Filter="ID ="+this.ID;
		    CanAdd=false;
		}
		Find(Filter);	
	}
	
			function Find(Filter)
			{//alert(this.ID);	
				var Table=AjaxData.GetXmlFindTable(Filter);//"班级名称 like '%"+txtName.value +"%'"
				divDataGrid.innerHTML=Table.value;
				
			}
			function FindX()
			{
			   var Filter="班级名称 like '%"+txtName.value+"%'";
			   Find(Filter);
			}
			
			function OpenAddWeb()
			{
			   if(CanAdd==false)
			   {
			      alert("不能在根或者班级下增加新班级，请选择年级！");
			      return;
			    }
			   var RetID =OpenAddWin("InfoClass_edit.aspx?ID="+this.ID+"&IsAdd=true",370,450);
			
			   if(RetID==-1) return;
			   //在表的最后一行插入一行，当表是查询表时，最后一行不是实际的最大行
			  // alert(RetID);
			   InsertRow(DataGrid1,RetID);
			   
			   var NewTxt=DataGrid1.rows[DataGrid1.rows.length-1].cells[3].innerText;	
			   //var ID=DataGrid1.rows[RowCount].cells[1].innerText;	
			  // alert(CurrNodeID+" "+ ID+ "NewTxt");
			   DomTree.insertNewItem(CurrNodeID, RetID,NewTxt,0,0,0,0,'');
			}
			
			function OpenEditWeb(ThisCell)
			{
			   this.ID=ThisCell.previousSibling.previousSibling.innerText;		
 			   var RetID =OpenAddWin("InfoClass_edit.aspx?ID="+ID+"&IsAdd=false",370,450);
			  if(RetID==-1) return;
			  //有更新行
			  var CurrRow=ThisCell.parentElement
			  SetRowText(CurrRow);	
			  var NewTxt=CurrRow.cells[3].innerText;	
			 /// alert(this.ID);
			  DomTree.setItemText("C_"+this.ID,NewTxt);	
			}

		</script>
	</HEAD>
	<body class="BodyStyle1"scroll=no  onload="Init()" >
		<TABLE id="Table1" class="TableBody">
			<TR>
				<TD class="TDdivTree">
					<DIV class="divTree" id="divTree"></DIV>
				</TD>
				<TD vAlign="top" width="*">
					<TABLE ID="Table2">
						<TR>
							<TD style="HEIGHT: 40px">
							  <DIV id="divFindTable" class="Toolbar">	 	
					            <TABLE class="FindTable" id="FindTable">
									<TR>
										<TD style="WIDTH: 86px" align="right">班级名称：</TD>
										<TD style="WIDTH: 209px"><input id="txtName" style="WIDTH: 179px" type="text" NAME="txtName">
										</TD>
										<TD><input id=imgFind onclick="FindX()" type="image" src="images/find.gif" NAME="imgFind">&nbsp;</TD>
										<TD align="right" width="*"></TD>
									</TR>
								</TABLE>
								</DIV>
							</TD>
						</TR>
						<TR>
							<TD style="HEIGHT: 35px">
								<div id="divToolbar" class="Toolbar">
								</div>
							</TD>
						</TR>
						<TR>
							<TD align=left><IMG class="imgBox" id="imgBox"> <IMG class="imgPail" id="imgPail">
								<DIV class="divDataGridTree" id="divDataGrid"></DIV>
							</TD>
						</TR>
					</TABLE>
				</TD>
			</TR>
		</TABLE>
	</body>
</HTML>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -