在上一次建好的树中加个checkbox，即：
加载checkbox容易，就是在构造json的时候在title下多加一行<input type=’checkbox’ dojoType=’checkbox’ id=’ ‘>对应的json写法请看源代码。
现在界面是有了，但如何让checkbox工作确实一个复杂的问题，目前已经知道的方法是可以访问到form中静态的创建的树的每一个checkbox。关键的问题就是这里的树是动态创建的，且没有form。
解决方法：
加入form，这个就很有趣了，form的每一个元素（即，树的每一项对应的checkbox）都是动态创建的，所以form也必须动态创建。通过这次编程体验确实加强了我对document的理解，不过还是有个问题。问题和理解精华我都写在了程序的注释中。
额外的问题：发现没有出现dojo树的checkbox效果，即：
Tree.html（这个和昨天那个程序合在一起就可以工作了）
<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Tree Widget Test (dynamic node creation)</title>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>
<script type="text/javascript" src="../dojoAjax/dojo.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeNodeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.require("dojo.json");
dojo.require("dojo.widget.Checkbox");
dojo.hostenv.writeIncludes();
function outputValues(){
var str = "";
var form=dojo.byId("form");
for(var i=0;i<form.elements.length;i++){
var e = form.elements[i];
//if(e.type=="button") {break;}
str += "submit: name="+e.name+" id="+e.id+" value="+e.value +" disabled="+e.disabled+" checked=" + e.checked + "<br>";
}
dojo.byId("result").innerHTML = str;
return false;
}
function helloCallback(type, data, evt)
{
if (type == 'error')
{ alert('从服务器端读数据错!');}
else
{ alert(data);
dojo.addOnLoad(function(){
var controller = dojo.widget.createWidget("TreeBasicControllerV3");
/* var treeNodes = [
{
title: "<input type='checkbox' class='TreeIcon' />Node 1" ,
children: [
{title: "<input type=/"checkbox/" name=/"cb2/" id=/"cb2/" dojoType=/"Checkbox/"/>Node 1.1" },
{title: "<input type='checkbox' class='TreeIcon' />Node 1.2"}
]
},
{title: "<input type='checkbox' class='TreeIcon' />Node 2"}
];*/
//document.write(data);
// var treeNodes=data.parseJSON();
var treeNodes = eval("("+data+")");//将传回来的字符串转化为json对象
var tree = dojo.widget.createWidget("TreeV3", {listeners: [controller.widgetId]});
/**
lazy initialization is in effect
only root-level widgets will be created
*/
tree.setChildren(treeNodes);
//tree.setChildren(data);
var Form = document.createElement("FORM");//动态创建form
document.body.appendChild(Form);//将Form加入到页面中
Form.method = "GET";//设置form的属性
Form.id="form";
Form.appendChild(tree.domNode);//把tree加入到form中，由document.body.appendChild(tree.domNode)联想而来
var newelement = document.createElement("<input type=/"button/" value=/"动态查看结果/" onClick=/"outputValues()/">");
//Form.appendChild(newelement);//不知道我动态的button为什么不能放在表单中？
document.body.appendChild(newelement);//只能加到body中了
var result = document.createElement("<div id=/"result/"></div>");
document.body.appendChild(result);
//Form.onSubmit="return outputValues(this)";
//document.body.appendChild(tree.domNode);
});
}
}
function init()
{
dojo.io.bind({
url: 'treeoracle.jsp',
handler: helloCallback
// formNode: dojo.byId('form1')
});
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<h4>动态创建树，并加载checkbox进行验证</h4>
</body>
</html>
经过这样的操作之后checkbox确实是可以工作了，可是仔细想想，加form是不是多此一举呢，form是属于body的，checkbox也可以直接加到body上。好，我们来试试：
<body>
<h4>动态创建树，并加载checkbox进行验证</h4>
<div dojoType="TreeBasicControllerV3" widgetId="controller" ></div>
<div dojoType="TreeV3" listeners="controller" widgetId="tree"></div>
<input type="button" value="动态查看结果" onClick="outputValues()">
<div id="result"></div>
</body>
这样就静态的写好了树，按纽和结果显示这三个元素，静态的一个好处就是可以完全控制它的位置，当初之所以想到动态的创建表单，按纽和结果显示是因为当初认为树只能以动态的方式创建，而其他如果用静态的话，他们的位置必然不是现在的这个结果。
这样处理之后相当于给树留了个位置，而具体的树的内容还要动态的加载。
var tree=dojo.widget.byId('tree');//取得我们静态创建的树tree.setChildren(treeNodes);
这样就给静态的树动态的添加了内容。
接下来就是看checkbox如何工作了，在outputvalues函数中这样写：
for(var i=0;i<document.all.length;i++){
var e = document.all[i];
if(e.type=="checkbox")
{
str += "submit: name="+e.name+" id="+e.id+" value="+e.value +" disabled="+e.disabled+" checked=" + e.checked + "<br>";
}
}
dojo.byId("result").innerHTML = str;
return false;
}
注意这里通过document.all来取得所有的document中的元素。
完整代码：（solidtree.html）
<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Tree Widget Test (dynamic node creation)</title>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>
<script type="text/javascript" src="../dojoAjax/dojo.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeNodeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.require("dojo.json");
dojo.require("dojo.widget.Checkbox");
dojo.hostenv.writeIncludes();
function outputValues(){
var str = "";
for(var i=0;i<document.all.length;i++){
var e = document.all[i];
if(e.type=="checkbox")
{
str += "submit: name="+e.name+" id="+e.id+" value="+e.value +" disabled="+e.disabled+" checked=" + e.checked + "<br>";
}
}
dojo.byId("result").innerHTML = str;
return false;
}
function helloCallback(type, data, evt)
{
if (type == 'error')
{ alert('从服务器端读数据错!');}
else
{ alert(data);
dojo.addOnLoad(function(){
var controller = dojo.widget.createWidget("TreeBasicControllerV3");
// var treeNodes=data.parseJSON();
var treeNodes = eval("("+data+")");//将传回来的字符串转化为json对象
// var tree = dojo.widget.createWidget("TreeV3", {listeners: [controller.widgetId]});
var tree=dojo.widget.byId('tree');//取得我们静态创建的树
/**
lazy initialization is in effect
only root-level widgets will be created
*/
tree.setChildren(treeNodes);
});
}
}
function init()
{
dojo.io.bind({
url: 'treeoracle.jsp',
handler: helloCallback
// formNode: dojo.byId('form1')
});
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<h4>动态创建树，并加载checkbox进行验证</h4>
<div dojoType="TreeBasicControllerV3" widgetId="controller" ></div>
<div dojoType="TreeV3" listeners="controller" widgetId="tree"></div>
<input type="button" value="动态查看结果" onClick="outputValues()">
<div id="result"></div>
</body>
</html>
通过这个学习给我的感触就是：
Every road leads to Rome !
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
