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">
<!--Script and CSS includes for YUI dependencies on this page-->
<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>