innerHTML生成dojo组件

最新推荐文章于 2021-06-16 19:20:43 发布

weixin_33826609

最新推荐文章于 2021-06-16 19:20:43 发布

阅读量149

点赞数

文章标签： xhtml javascript 开发工具 ViewUI

原文链接：https://my.oschina.net/ITBoy/blog/17335

版权

为什么80%的码农都做不了架构师？>>>

公司里面的项目一直把dojo作为js开发工具,不可否认的是dojo类库很强大,但是使用起来很不是滋味.

如何的通过innerHTML函数来动态生成dojo

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Job Application Form</title>

	<script type="text/javascript">
		var djConfig = {
					isDebug: true
		};
	</script>
	<script type="text/javascript" src="../../dojo.js"></script>
	<script type="text/javascript">

	dojo.require("dojo.widget.*");
	dojo.require("dojo.event.*");
        dojo.require("dojo.xml.Parse");
        dojo.require("dojo.widget.Parse");
        var parser = new dojo.xml.Parse();

	dojo.addOnLoad( function() {

    	var showCalcMethodbtn=dojo.widget.byId("showCalcMethodbtn");
    	dojo.event.connect(showCalcMethodbtn, "onClick", showCalcMethodbtnPressed);
    });
	function showCalcMethodbtnPressed(){
	
		alert("Okay");
		//var test=dojo.widget.byId("test");
		//var createHtml="<input type=\"checkbox\" name=\"cb1\" id=\"cb1\" dojoType=\"Checkbox\" /> <label for=\"cb1\">IT</label><br />";
		//test.innerHTML=createHtml;
		
		// dojo.byId('listviewpane').innerHTML=s;
               // var frag  = parser.parseElement(dojo.byId("listviewpane"), null, true);
        	//dojo.widget.getParser().createComponents(frag);

		var str="<table border=\"1\" width=\"98%\" id=\"table10\" bgcolor=\"#CCFFFF\">"+
			"<tr bgcolor=\"#66FFCC\"> <td width=\"139\"><p align=\"center\"><b>Calc Method</b></td>"+
			"<td width=\"45\"><p align=\"center\"></td>"+
			"<td><p align=\"center\"><b>Calc Field</b></td></tr>";
			for(var i=0;i<10;i++){
				str+="<tr id=\"showCalcFieldRow_"+i+"\"><td width=\"139\" id=\"showCalcMethodTD_"+
				i+"\" tittle="+i+">"+i+"</td>"+
				"<td width=\"45\"><button dojoType=\"Button\" widgetId=\"showCalcMethodbtn\" onClick=\"alert('dd')\">Create2</button></td>"+
				"<td id=\"showCalcFieldTD_"+i+"\" ><option id=\"All\" value=\"All\">All</option></td></tr>";
			}
			str+="</table>";

	
		var test=document.getElementById("test");
		//test.innerHTML="<input type=\"checkbox\" name=\"cb1\" id=\"cb1\" dojoType=\"Checkbox\" /> <label for=\"cb1\">IT</label><br/>"+
		//		"<button dojoType=\"Button\" widgetId=\"showCalcMethodbtn\">Create2</button>";

		test.innerHTML=str;

		var frag  = parser.parseElement(test, null, true);
        	dojo.widget.getParser().createComponents(frag);



	

}

	</script>
	<style type="text/css">
	body {
		padding: 1em;
	} 	
	div .dojoButton {
		float: left;
		margin-left: 10px;
	}
	</style>
</head>

	<body >
		<h2 class="pageSubContentTitle">Job Application Form</h2>
		<p>This is just a little demo of dojo's form widgets</p>
		<form  method="get" id="form1" action="">
			<div class="formAnswer" id="D1">
				<input type="checkbox" name="cb1" id="cb1" value="1" dojoType="Checkbox" /> IT<br />
				<input type="checkbox" name="cb2" id="cb2" value="1" dojoType="Checkbox" />Marketing<br />
				<input type="checkbox" name="cb3" id="cb3" value="1" dojoType="Checkbox" /> <label for="cb3">Business</label><br />
				<button dojoType="Button" widgetId="showCalcMethodbtn" >Create</button>
			</div>
			<div id="test">
			</div>

		</form>
	</body>
</html>

转载于:https://my.oschina.net/ITBoy/blog/17335