xloadtree demo

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<!-- The xtree script file -->
<script src="xtree2.js"></script>
<script src="xloadtree2.js"></script>
<!-- Modify this file to change the way the tree looks -->
<link type="text/css" rel="stylesheet" href="xtree2.links.css">
<script type="text/javascript">

	var tree = new WebFXLoadTree("default", "tree.xml");
	//var tree = new WebFXTree('aaa');
	$(document).ready(function(){
		/* Change the behavior of the tree */
		tree.setBehavior('explorer');
		$('#deviceCategory').html(tree.toHtml());
		//document.write(tree);
	});

	function addNode() {
		var value = trim($('#insertedGroup').val());
		if(value == null || value == ""){
			alert(" ");
			return;
		}
		if(!tree.getSelected()){
			alert(" ");
			return;
		}
		if (tree.getSelected()) {
			tree.getSelected().add(new WebFXTreeItem(value));
		}
	}
	function delNode() {
		if(!tree.getSelected()){
			alert(" ， ");
			return;
		}
		if (tree.getSelected()) {
			tree.getSelected().remove();
		}
	}
	function trim(string){
		return string.replace(/(^\s*)|(\s*$)/g, "");
	}
</script>
	
</head>
<body>
	<div style="float: left;">
		group
		<div id="deviceCategory">
		</div>
	
		<input type="text" id="insertedGroup" /><br>
		<input type="button" onclick="addNode();" value="add" />
		<input type="button" onclick="delNode();" value="del" /><br>
		<input type="button" value="expandAll" onclick="tree.expandAll();">
		<input type="button" value="collaspseAll" onclick="tree.collapseAll();"><br>
	</div>
	<div style="float: left;">
		list
	</div>
	
	
	<div id="alertBox" style="display: none;">
		<div style="margin: 20px;">group name：<label class="smallInput"><input id="tempalteName" class="inputS validate[required,maxSize[20]]" type="text" size="28" name="tempalteName"></label></div>
		<div style="margin: 20px;">father groupt name：<label class="textareaDiv"><textarea id="tempalteRemark" class="textarea validate[required,maxSize[30]]" rows="5" cols="80" name="remark"></textarea><br></label></div>
				
		<div style="position: relative;left:30px;cursor: pointer;">
			<span id="addSave">save</span>
		</div>
	</div>
</body>
</html>

xtree

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<!-- The xtree script file -->
<script src="xtree.js"></script>
<script src="xloadtree.js"></script>
<script src="xmlextras.js"></script>
<!-- Modify this file to change the way the tree looks -->
<link type="text/css" rel="stylesheet" href="xtree.css">
<script type="text/javascript">

	var tree = new WebFXLoadTree("default", "tree.xml");
	//tree.write();
	//var tree = new WebFXTree('aaa');
	$(document).ready(function(){
		/* Change the behavior of the tree */
		tree.setBehavior('explorer');
		
		$('#deviceCategory').html(tree.toString());
		//document.write(tree);
	});

	function addNode() {
		var value = trim($('#insertedGroup').val());
		if(value == null || value == ""){
			alert(" ");
			return;
		}
		if(!tree.getSelected()){
			alert(" ");
			return;
		}
		if (tree.getSelected()) {
			tree.getSelected().add(new WebFXTreeItem(value));
		}
	}
	function delNode() {
		if(!tree.getSelected()){
			alert(" ， ");
			return;
		}
		if (tree.getSelected()) {
			tree.getSelected().remove();
		}
	}
	function trim(string){
		return string.replace(/(^\s*)|(\s*$)/g, "");
	}
</script>
	
</head>
<body>
	<div style="float: left;">
		group
		<div id="deviceCategory">
		</div>
	
		<input type="text" id="insertedGroup" /><br>
		<input type="button" onclick="addNode();" value="add" />
		<input type="button" onclick="delNode();" value="del" /><br>
		<input type="button" value="expandAll" onclick="tree.expandAll();">
		<input type="button" value="collaspseAll" onclick="tree.collapseAll();"><br>
	</div>
	<div style="float: left;">
		list
	</div>
	
	
	<div id="alertBox" style="display: none;">
		<div style="margin: 20px;">group name：<label class="smallInput"><input id="tempalteName" class="inputS validate[required,maxSize[20]]" type="text" size="28" name="tempalteName"></label></div>
		<div style="margin: 20px;">father groupt name：<label class="textareaDiv"><textarea id="tempalteRemark" class="textarea validate[required,maxSize[30]]" rows="5" cols="80" name="remark"></textarea><br></label></div>
				
		<div style="position: relative;left:30px;cursor: pointer;">
			<span id="addSave">save</span>
		</div>
	</div>
</body>
</html>

tree.xml

<?xml version="1.0"?>

<tree>
	<tree text="Load "tree1.xml" (Should raise error)" src="tree1.xml" toolTip="Tool Tip"/>
	<tree text="Load "tree2.xml" (Should raise error)" src="tree2.xml"
		  onerror="this.setText('Load "tree2.xml" (Raised error)')"/>
	<tree text="Loaded Item 1" action="http://webfx.eae.net" />
	<tree text="Loaded Item 2" expanded="true">
		<tree text="Loaded Item 2.1" expanded="true">
			<tree text="Loaded Item 2.1.1" action="javascript:alert( tree.getSelected().getId() )" id="custom-id" />
		</tree>
	</tree>
	<tree text="Loaded Item 3 (click to set src)" onaction="this.setSrc(this.getSrc() ? null : 'tree3.xml')"
		  onload="this.setText('Loaded Item 3 (changed onload)')"/>
	<tree text="Load treeLARGE.xml" src="treeLARGE.xml" toolTip="XML file with 500 items"/>
	<tree text="Deep nesting" src="nest.xml.pl" />
</tree>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

xloadtree demo

좋은 웹페이지 즐겨찾기