📄 demo_bounding.html

📁 Absolutely wonderful features you may never imagine before, Skytree v2.0 takes you into a new era of
💻 HTML
字号:
<!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="text/html; charset=utf-8" />
<title>SkyTree v2.0 Demo - Data Bounding</title>
<link href="Demo.css" rel="stylesheet" type="text/css" />
<link href="../Theme/Default/Tree.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="../Script/SkyTree.js"></script>
<script language="javascript" type="text/javascript" src="Demo.js"></script>
</head>

<body>
<h3>Skytree v2.0 Demo</h3>
<h4>Data Bounding</h4>
<div class="Note"><span class="HighLight">SkyTree</span> also supports asynchronous loading content from database,and skyTree use <span class="HighLight">JSON</span> for transferring  data from server-side instead of <span class="HighLight">XML</span>. <br />
  The only thing you should do is to configure some properties and fields for server-side tree object,such as UniqueId,ParentId,TextField and IconField.<br />
  SkyTree also support synchronizing between client and server,such as add,delete,update display text,drag&amp;drop(move).<br />
  To perform these action normally,some relative properties must be assigned.<br />
  You can create a tree in minutes, easily, with the data yourself!<br />
The tree below shows you how skyTree works in database asynchronous mode(Full synchronizing enabled). <br />
This demo uses <strong>ASP</strong> as server side support, in fact skytree supports <strong>ASP</strong>,<strong>PHP</strong> and <strong>.Net(C#)</strong> for data bounding so far, and more server side will be supported by Skytree in future.</div>
<div id="Demo"></div>
<div><input id="showCode" name="showCode" type="checkbox" onclick="with(document.getElementById('Code')){style.display=this.checked?'':'none';}">
<label for="showCode">Click here to view <strong>client code</strong> for the tree above.</label>
</div>
<div id="Code" style="display:none;"><pre><img src="Images/Code_Bounding_Client.gif" /></pre></div>
<div><input id="showServer" name="showServer" type="checkbox" onclick="with(document.getElementById('Server')){style.display=this.checked?'':'none';}">
<label for="showServer">Click here to view <strong>server code </strong> for the tree above.</label>
</div>
<div id="Server" style="display:none;"><pre><img src="Images/Code_Bounding_Server.gif" /></pre></div>
<script language="javascript" type="text/javascript">
//Configuration
var cfgBounding = {
	id : 'Permit',
	requestURL : '../Lib/ASP/RequestHandle.asp',
	basePath : '../',
	checkName : 'Pmt',
	autoCheck : true,
	singleExpand : false,
	expandLevel : 2,
	focusExecute : true
}

var objTree = new SkyTree('objTree','Demo');
//Initialize tree object
objTree.initialize(cfgBounding);
//Transfer data from Database
objTree.serverGetData(0,'');

//Customized function
function showMore(aNode){
	alert('Display text : ' + aNode.data['Text'] + '\n'
				+ 'Node value : ' + aNode.data['Value'] + '\n');
}
</script>
</body>
</html>
⌨️ 快捷键说明

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