YUI tree的兑现 _Web前端

YUI tree的实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>RTTs</title>

<link rel="stylesheet" type="text/css" href="../../assets/yui.css">

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc {
??? width: 95%;
??? min-width: 950px;
}

#pagetitle {
??? background-image: url(yui/assets/bg_hd.gif);
}
</style>

<link rel="stylesheet" type="text/css"
??? href="yui/assets/dpSyntaxHighlighter.css">

<link rel="stylesheet" type="text/css"
??? href="yui/build/logger/assets/skins/sam/logger.css" />

<link rel="stylesheet" type="text/css"
??? href="yui/build/treeview/assets/skins/sam/treeview.css" />
<link rel="stylesheet" type="text/css"
??? href="yui/build/button/assets/skins/sam/button.css" />
<script
??? src="${pageContext.request.contextPath }/dwr/interface/InvocationManager.js"
??? type="text/javascript"></script>
<script
??? src="${pageContext.request.contextPath }/dwr/interface/InvocationResult.js"
??? type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/dwr/engine.js"
??? type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/dwr/util.js"
??? type="text/javascript"></script>
<script type="text/javascript"
??? src="yui/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="yui/build/event/event-min.js"></script>
<script type="text/javascript" src="yui/build/dom/dom-min.js"></script>
<script type="text/javascript" src="yui/build/logger/logger-min.js"></script>
<script type="text/javascript"
??? src="yui/build/treeview/treeview-debug.js"></script>
<script type="text/javascript" src="yui/build/element/element-min.js"></script>
<script type="text/javascript" src="yui/build/button/button-min.js"></script>
<style type="text/css">
.ygtvcheck0 {
??? background: url(yui/build/treeview/assets/img/check/check0.gif) 0 0
??? ??? no-repeat;
??? width: 16px;
??? height: 20px;
??? float: left;
??? cursor: pointer;
}

.ygtvcheck1 {
??? background: url(yui/build/treeview/assets/img/check/check1.gif) 0 0
??? ??? no-repeat;
??? width: 16px;
??? height: 20px;
??? float: left;
??? cursor: pointer;
}

.ygtvcheck2 {
??? background: url(yui/build/treeview/assets/img/check/check2.gif) 0 0
??? ??? no-repeat;
??? width: 16px;
??? height: 20px;
??? float: left;
??? cursor: pointer;
}

.ygtv-edit-TaskNode {
??? width: 190px;
}

.ygtv-edit-TaskNode .ygtvcancel,.ygtv-edit-TextNode .ygtvok {
??? border: none;
}

.ygtv-edit-TaskNode .ygtv-button-container {
??? float: right;
}

.ygtv-edit-TaskNode .ygtv-input? input {
??? width: 140px;
}

.whitebg {
??? background-color: white;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table height=650 width=98%>
??? <tr>
??? ??? <td width=20% align=left valign=top><br>

??? ??? <br>
??? ??? <div id="tDiv" class="whitebg ygtv-checkbox"></div>
??? ??? <br>
??? ??? <input type="button" name="Submit" value="RUN TEST"
??? ??? ??? id="createContent" /></td>
??? ??? <td width=50% align=left valign=top><br>
??? ??? <br>
??? ??? <div><strong>Content</strong></div>
??? ??? <div id="conDiv"></div>
??? ??? <table cellspacing="1">
??? ??? </table>
??? ??? </td>
??? </tr>
</table>

<script>

??? window.onload = getMap;???
??? var testcase = null;
??? var funName = null;
???
??? //-------DWR-----------------
??? var tree1;

??? function getMap() {??? ???
??? ??? InvocationManager.getTestCases(getMap_callback);

??? }

??? function getMap_callback(funMap) {??? ???
??? ??? treeInit(funMap);
??? }

??? function a_callback(funMap) {
??? ??? var root = tree1.getRoot();
??? ??? for (funName in funMap) {
??? ??? ??? var myobj = {
??? ??? ??? ??? label : funName,
??? ??? ??? ??? myNodeId : '1:' + funName
??? ??? ??? };
??? ??? ??? var node1 = new YAHOO.widget.TextNode(myobj, root, 3);
??? ??? ??? var langMap = funMap[funName];??? ??? ???
??? ??? ??? if (funName != "JobStatusQuery") {
??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? label : "English to others languages",
??? ??? ??? ??? ??? ??? myNodeId : "5000"
??? ??? ??? ??? ??? };
??? ??? ??? ??? var node2 = new YAHOO.widget.TextNode(myobj, node1);
??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? label : "Others languages to english",
??? ??? ??? ??? ??? ??? myNodeId : "5000"
??? ??? ??? ??? ??? };
??? ??? ??? ??? var node7 = new YAHOO.widget.TextNode(myobj, node1);
??? ??? ??? ??? var langNameAry = new Array();
??? ??? ??? ??? var k = 0;
??? ??? ??? ??? for ( var langName in langMap) {??? ??? ??? ??? ???
??? ??? ??? ??? ??? langNameAry[k] = langName;
??? ??? ??? ??? ??? k++;
??? ??? ??? ??? }
??? ??? ??? ??? langNameAry = langNameAry.sort();
??? ??? ??? ??? //alert(langNameAry);
??? ??? ??? ??? for ( var i=0;i<langNameAry.length;i++) {
??? ??? ??? ??? ??? var sortname = langNameAry[i].substring(0, 2);
??? ??? ??? ??? ??? if (sortname == 'en') {
??? ??? ??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? ??? label : langNameAry[i],
??? ??? ??? ??? ??? ??? ??? myNodeId : "3:" + langNameAry[i]
??? ??? ??? ??? ??? ??? };
??? ??? ??? ??? ??? ??? var node3 = new YAHOO.widget.TextNode(myobj, node2);??? ??? ??? ??? ??? ???
??? ??? ??? ??? ??? }else{
??? ??? ??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? ??? label : langNameAry[i],
??? ??? ??? ??? ??? ??? ??? myNodeId : "3:" + langNameAry[i]
??? ??? ??? ??? ??? ??? };
??? ??? ??? ??? ??? ??? var node3 = new YAHOO.widget.TextNode(myobj, node7);
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? var caseMap = langMap[langNameAry[i]];
??? ??? ??? ??? ??? for ( var caseName in caseMap) {
??? ??? ??? ??? ??? ??? testcase = caseMap[caseName];
??? ??? ??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? ??? label : testcase.caseName,
??? ??? ??? ??? ??? ??? ??? isLeaf : true,
??? ??? ??? ??? ??? ??? ??? myNodeId : funName + ":" + langNameAry[i] + ":"
??? ??? ??? ??? ??? ??? ??? ??? ??? + testcase.caseName
??? ??? ??? ??? ??? ??? };
??? ??? ??? ??? ??? ??? var node4 = new YAHOO.widget.TextNode(
??? ??? ??? ??? ??? ??? ??? ??? myobj, node3, 1);

??? ??? ??? ??? ??? }??? ??? ??? ??? ??? ?
??? ??? ??? ??? }??? ??? ??? ???
??? ??? ??? }else{
??? ??? ??? ??? for ( var langName in langMap) {
??? ??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? label : langName,
??? ??? ??? ??? ??? ??? myNodeId : "3:" + langName
??? ??? ??? ??? ??? };
??? ??? ??? ??? ??? var node3 = new YAHOO.widget.TextNode(myobj, node1);

??? ??? ??? ??? ??? var caseMap = langMap[langName];
??? ??? ??? ??? ??? for ( var caseName in caseMap) {
??? ??? ??? ??? ??? ??? testcase = caseMap[caseName];
??? ??? ??? ??? ??? ??? myobj = {
??? ??? ??? ??? ??? ??? ??? label : testcase.caseName,
??? ??? ??? ??? ??? ??? ??? isLeaf : true,
??? ??? ??? ??? ??? ??? ??? myNodeId : funName + ":" + langName + ":"
??? ??? ??? ??? ??? ??? ??? ??? ??? + testcase.caseName
??? ??? ??? ??? ??? ??? };
??? ??? ??? ??? ??? ??? var node4 = new YAHOO.widget.TextNode(
??? ??? ??? ??? ??? ??? ??? ??? myobj, node3, 1);
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? }
??? ??? }
??? }
???
??? //--------------YUI treeview---------
??? function treeInit(funMap) {
??? ??? tree1 = new YAHOO.widget.TreeView("tDiv");
??? ??? a_callback(funMap);
??? ??? tree1.setNodesProperty('propagateHighlightUp', true);
??? ??? tree1.setNodesProperty('propagateHighlightDown', true);
??? ??? tree1.subscribe('clickEvent', tree1.onEventToggleHighlight);
??? ??? tree1.render();??? ???

??? ??? YAHOO.util.Event.on('createContent', 'click', function() {
??? ??? ??? var hiLit = tree1.getNodesByProperty('highlightState', 1);
??? ??? ??? if (YAHOO.lang.isNull(hiLit)) {
??? ??? ??? ??? YAHOO.log("None selected");
??? ??? ??? } else {
??? ??? ??? ??? var labels = new Array();
??? ??? ??? ??? var n = 0;
??? ??? ??? ??? for ( var i = 0; i < hiLit.length; i++) {??? ??? ??? ??? ???
??? ??? ??? ??? ??? if (hiLit[i].isLeaf){??? ??? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? labels[n] = hiLit[i].data.myNodeId;
??? ??? ??? ??? ??? ??? n++;
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? ??? createContent(labels);
??? ??? ??? ??? YAHOO.log("Highlighted nodes:\n" + labels.join("\n"), "info",
??? ??? ??? ??? ??? ??? "example");
??? ??? ??? }
??? ??? });
??? }
???
??? //-------------content-----------
??? var resultG = "";
???
??? function createContent(a) {
??? ??? var ar1 = "";??? ??? ??? ???
??? ??? for ( var i = 0; i < a.length; i++) {
??? ??? ??? ar1 = ar1 + "," + a[i];??? ??? ???
??? ??? }
??? ??? var arry1 = new Array();
??? ??? var pAr0 = "";
??? ??? var pAr1 = "";
??? ??? for ( var i = 0; i < a.length; i++) {
??? ??? ??? var arry = a[i].split(":");
??? ??? ??? var ar0N = eval("ar1.match(/(" + arry[0] + ")/g).length");
??? ??? ??? if (arry[0] == pAr0) {
??? ??? ??? ??? var str = ",";
??? ??? ??? } else {
??? ??? ??? ??? var str = arry[0] + ",";
??? ??? ??? }
??? ??? ??? str = str + ar0N + ",";
??? ??? ?
??? ??? ??? pAr0 = arry[0];

??? ??? ??? var ar1N = eval("ar1.match(/(" + arry[0] + ":" + arry[1]
??? ??? ??? ??? ??? + ")/g).length");
??? ??? ??? if (arry[1] == pAr1) {
??? ??? ??? ??? var str = str + ",";
??? ??? ??? } else {
??? ??? ??? ??? var str = str + arry[1] + ",";
??? ??? ??? }
??? ??? ??? str = str + ar1N + ",";
??? ??? ??? pAr1 = arry[1];??? ??? ?
??? ??? ??? str = str + arry[2] + ",";
??? ??? ??? dwr.engine.setAsync(false);
??? ??? ??? InvocationManager.invocateByNamePair(a[i], b_callback);??? ??? ???
??? ??? ??? str = str + resultG;
??? ??? ??? arry1[i] = str;
??? ??? }??? ?
???????
??? ??? var funDiv = document.getElementById("conDiv");
??? ??? funDiv.innerText = "<table width=98%? border='1' style='border-collapse:collapse;border-color:#cccccc' > <tr> <td>Action Type</td><td>Language Pair</td><td>Test Case Name</td><td>Result</td></tr>";
??? ??? for ( var i = 0; i < arry1.length; i++) {
??? ??? ??? funDiv.innerText = funDiv.innerText + "<tr valign=top>";
??? ??? ??? //alert("arry1[i]"+arry1[i]);
??? ??? ??? var tdar = arry1[i].split(",");
???
??? ??? ??? for ( var j = 0; j < tdar.length; j++) {
??? ??? ??? ??? if (tdar[j] != "" && j != 1 && j != 3) {
??? ??? ??? ??? ??? ?
??? ??? ??? ??? ??? funDiv.innerText = funDiv.innerText + "<td width=20%";
??? ??? ??? ??? ??? if (tdar[0] != "" && j == 0) {
??? ??? ??? ??? ??? ??? funDiv.innerText = funDiv.innerText + " rowspan="
??? ??? ??? ??? ??? ??? ??? ??? + tdar[1];
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? if (tdar[2] != "" && j == 2) {
??? ??? ??? ??? ??? ??? funDiv.innerText = funDiv.innerText + " rowspan="
??? ??? ??? ??? ??? ??? ??? ??? + tdar[3];
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? if (j != 1 && j != 3)
??? ??? ??? ??? ??? ??? funDiv.innerText = funDiv.innerText + ">" + tdar[j]
??? ??? ??? ??? ??? ??? ??? ??? + "</td>";
??? ??? ??? ??? }
??? ??? ??? }
??? ???? ??? funDiv.innerText = funDiv.innerText + "</tr>";
??? ??? }
??? ??? funDiv.innerText = funDiv.innerText + "</table>";
??? ??? funDiv.innerHTML = funDiv.innerText;
??? ??? //alert(funDiv.innerText);
??? }
??? function b_callback(result) {??? ???
??? ??? resultG = "";
??? ???? var strSuccess= new String(result.success);
??? ???? if (strSuccess == "true"){
??? ???? ??? resultG = "<a href='#' onclick='window.open(\"YUITest.jsp?req="+result.requestText+
??? ??? ???? ??? ??? ? "&res="+result.responseText+"\");'>Pass</a>";
??? ???? }else{
??? ???? ??? resultG = "<a href='#' onclick='window.open(\"YUITest.jsp?req="+result.requestText+
??? ??? ???? ??? ??? ? "&res="+result.responseText+"\");'>Fail</a>";
??? ???? }??? ????
??? }
</script>
<p> </p>
</form>
</body>
</html>