<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fileioé…ç½®</title>

<link rel="stylesheet" href="../../css/tree.css" />
<link rel="stylesheet" href="../../css/card.css" />

<script type="text/javascript" src="../../js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="../../js/extend.js" ></script>
<script type="text/javascript" src="../../js/core.js" ></script>
<script type="text/javascript" src="../../js/control.js" ></script>
<script type="text/javascript" src="../../js/tree.js" ></script>
<script type="text/javascript" src="../../js/card.js" ></script>

<script type="text/javascript">
	var tree, grid;	
	var treeData = [
		{id:3, parentid:3, position:"categrorycode", name:"category3"},
		{id:2, parentid:2, position:"categrorycode", name:"category2"},
		{id:1, parentid:1, position:"categrorycode", name:"category1"},
		{id:31, parentid:3, position:"code", name:"code3"},
		{id:11, parentid:1, position:"code", name:"code1"},
		{id:12, parentid:1, position:"code", name:"code12"},
		{id:21, parentid:2, position:"code", name:"code2"},
		{id:111, parentid:11, position:"id", name:"A1"},
		{id:112, parentid:11, position:"id", name:"A2"},
	];
	
	var departmentdatas = [
		{code: "PMO", name: "PMO"},
		{code: "OPC", name: "OPC"},
		{code: "ASD", name: "ASD"},
		{code: "other", name: "å…¶ä»–"}
	];
	var captiondatas = [
		{code: "éƒ¨é—¨é¢†å¯¼", name: "éƒ¨é—¨é¢†å¯¼"},
		{code: "æ™®é€šç”¨æˆ·", name: "æ™®é€šç”¨æˆ·"},
		{code: "ç³»ç»Ÿç®¡ç†å‘˜", name: "ç³»ç»Ÿç®¡ç†å‘˜"},
		{code: "other", name: "å…¶ä»–"}
	];	
	var activedatas = [
		{code: "T", name: "æ¿€æ´»"},
		{code: "F", name: "å†»ç»“"},
	];	
	var positiondatas = [
		{code: "VGM", name: "VGM"},
		{code: "GM", name: "GM"},
		{code: "admin", name: "ç³»ç»Ÿç®¡ç†å‘˜"},
		{code: "ASD", name: "å®¢æˆ·æœåŠ¡äº‹ä¸šéƒ¨"},
		{code: "PMD1", name: "é¡¹ç›®ç®¡ç†ä¸€éƒ¨"},
		{code: "PMD2", name: "é¡¹ç›®ç®¡ç†äºŒéƒ¨"},
		{code: "PMD3", name: "é¡¹ç›®ç®¡ç†ä¸‰éƒ¨"},
		{code: "PMD4", name: "é¡¹ç›®ç®¡ç†å››éƒ¨"},
		{code: "PMD5", name: "é¡¹ç›®ç®¡ç†äº”éƒ¨"},
		{code: "PMD6", name: "é¡¹ç›®ç®¡ç†å…éƒ¨"},
		{code: "PMO1", name: "é¡¹ç›®ç®¡ç†åŠžå…¬ä¸€å®¤"},
		{code: "PMO2", name: "é¡¹ç›®ç®¡ç†åŠžå…¬ä¸€å®¤"},
		{code: "PMO", name: "é¡¹ç›®ç®¡ç†åŠžå…¬å®¤"},
		{code: "other", name: "å…¶ä»–"}
	];
	$(document).ready(function() {
		tree = new Tree({
			element: "tree",
			data: treeData,
			autoExpended: true,
			renderNodeText: function(element, record) {
				element.html(record.position + "--" + record.name);
			},
			onNodeSelect: function(node) {
				
			}
		});
		
		card = new Card({
			element: "card",
			columns: [
				{field: "fromname", caption: "fromname", type: "text", readonly:true},
				{field: "fromrowno", caption: "no", type: "text"},
				{field: "toname", caption: "toname", type: "text"},
				{field: "torowno", caption: "å¯†ç ", type: "text"},
				{field: "XX",caption: "typecode", type: "select"},
				{field: "XX+",caption: "è§’è‰²:",type: "select"},
				{field: "XX++",caption: "ç›´æŠ¥éƒ¨é—¨:",type: "select", datas: positiondatas},
				{field: "xx+++",caption: "ç›´æŠ¥:",type: "select"},
				{field: "active", caption: "å†»ç»“/æ¿€æ´»",datas: activedatas,type: "select"}
			]
		}); 
	});
</script>

</head>

<body>
	<div style="position:absolute; top: 10px; left: 2%; bottom: 10px; border: 0px solid #ddd; width: 25%;">
		<div  id="tree" style="border: 1px solid #ddd; width: 100%; height: 80%"></div>
	</div>
	
	<div style="position:absolute; top: 10px; left: 29%; right:4%; bottom: 10px;">
		<div style="position:absolute; border: 1px solid #ddd; width: 100%; height: 10%">
			<div id="current_data" style="float: left; height: 45%; font-size: 20px; margin-top: 15px">
				code
			</div>
		</div>
		
		<div style="position:absolute; width: 100%; height: 90%; top: 10%; border: 1px solid #ddd;">
			<div id="card" style="text-align: left;"></div>
		</div>
	</div>
	<div style="position: absolute; left: 40%; bottom: 30%; height: 30px; line-height: 30px; margin-top: 15px;" align="center" >
	</div>	
</body>
</html>