JS、JQuery和ExtJs动态创建DOM对象

做了个简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试，主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。
1.简单前台数据处理
界面有点丑了，没美化界面，主要是JavaScript动态创建Table。效果图：

 

2.JavaScript动态创建DOM对象
主要是使用JavaScript动态创建按钮、文本、链接、表格、加上CheckBox的表格(简单实现全选)，这里Table的数据是页面数据，不是服务端数据，主要是与后面的JQuery和ExtJs请求服务端数据动态创建Table的差异比较。
界面有点丑，主要是看JavaScript动态创建Dom对象，效果图：

 

3.JavaScript简单效果实现
主要是自定义分割文本、Timer时钟使用、JS粘贴板使用、Div随鼠标移动的简单测试，这个稍稍好看些，效果图：

 

4.使用XMLHttp进行Ajax调用动态创建Table
主要是使用XMLHttpRequest的AJAX请求服务端数据，服务端使用一般处理程序(*.ashx)处理，并使用JavaScriptSerializer和DataContractJsonSerializer进行对象的序列化操作，转换为JSON字符串数据发送客户端，客户端再进行反序列化操作，进行动态Table创建和数据填充。
注意：前端JQuery和ExtJs脚本的引入以及服务端两个序列化所在的命名空间(System.Web.Script.Serialization和System.Runtime.Serialization.Json)的引入。

  <script src="../../Scripts/ext-base.js" type="text/javascript"></script>
    <script src="../../Scripts/ext-all.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

效果图：

前端代码：

 

服务端代码：

 

5.使用JQuery和ExtJs进行Ajax调用动态创建Table
主要是对JQuery、ExtJs的Ajax使用以及如何使用JQuery、ExtJs动态创建Table对象填充数据，简单实现CheckBox的全选操作。服务端的代码是第4点的一般处理程序。效果图：

代码如下：(还是第4点的页面，再加上下面4个脚本函数)

  1  //JQuery的Ajax方式取得数据,添加全选按钮
  2         function JQueryAjax() {
  3             var message = "JQuery信息加载中......";
  4             $("#divContent").html(message);
  5 
  6             $.ajax({
  7                 type: "POST",
  8                 url: "../Ajaxs/AjaxHandler.ashx",
  9                 async: true, //异步加载信息
 10                 dataType: "json",
 11                 success: function (data) {
 12                     $("#divContent").html("JQuery信息加载成功!");
 13 
 14                     createJQueryTable(data);
 15                     JQueryCHKBoxTable(data);
 16                 },
 17                 error: function () { alert("请求失败！"); }
 18             });
 19         }
 20 
 21         function JQueryCHKBoxTable(data) {
 22             var tab = $("<table/>", {  "300px", cellSpacing: "1", cellPadding: "1", border: "1" });
 23             $("<caption/>").text("JQuery CheckBox Table").appendTo(tab);
 24 
 25             var ths = $("<tr/>").appendTo(tab);
 26             var th0 = $("<th/>").appendTo(ths);
 27             $("<input/>", { type: "checkbox", id: "chAll" }).appendTo(th0);
 28             $("<th/>", { text: "名称" }).appendTo(ths);
 29             $("<th/>", { text: "简介" }).appendTo(ths);
 30 
 31             $(data).each(function (index, item) {
 32                 var tr = $("<tr/>").appendTo(tab);
 33                 var td0 = $("<td/>").appendTo(tr);
 34                 $("<input>", { type: "checkbox", name: "chSingle" }).appendTo(td0);
 35                 $("<td/>").html(item.Name).appendTo(tr);
 36                 $("<td/>").html(item.Html).appendTo(tr);
 37             });
 38 
 39             tab.appendTo($("#divContent"));
 40 
 41             $("#chAll").click(function (obj) {
 42                 var chSingles = $("input:[name='chSingle']");
 43                 $(chSingles).each(function (index, item) {
 44                     item.checked = $("#chAll")[0].checked; //$("#chAll"),查询出来的是一个集合
 45                 });
 46             });
 47 
 48             //            $("#chAll")[0].onclick = function () {//$("#chAll"),查询出来的是一个集合
 49             //                var chSingles = $("input:[name='chSingle']");
 50             //                $(chSingles).each(function (index, item) {
 51             //                    item.checked = $("#chAll")[0].checked;
 52             //                });
 53             //            }
 54         }
 55 
 56         //ExtJs的Ajax方式取得数据,添加全选按钮
 57         function ExtJsAjax() {
 58             var message = "ExtJs信息加载中......";
 59             var divContent = Ext.get("divContent");
 60             Ext.DomHelper.append(divContent, "<div id='divMessage'>" + message + "</div>");
 61 
 62             Ext.Ajax.request({
 63                 method: "POST",
 64                 url: "../Ajaxs/AjaxHandler.ashx",
 65                 async: true, //异步加载信息
 66                 success: function (response, opts) {
 67                     message = "ExtJs信息加载成功!";
 68                     //Ext.get("divMessage").dom.innerHTML = message;
 69                     Ext.DomHelper.append(divContent, "<div id='divMessage'>" + message + "</div>");
 70 
 71                     var data = Ext.util.JSON.decode(response.responseText);
 72                     createExtJsTable(data); //ExtJs创建Table
 73                     ExtJsCHKBoxTable(data); //ExtJs创建CheckBox的Table
 74                 },
 75                 failure: function (response, opts) { alert("请求失败！"); }
 76             });
 77         }
 78 
 79         //ExtJs的CheckBox Table
 80         function ExtJsCHKBoxTable(data) {
 81             var divContent = Ext.get("divContent");
 82             var tabTag = { tag: "table", style: "300px;border:1px solid blue", children: [{ tag: "caption", html: "ExtJs CheckBox Table"}] };
 83             var tab = Ext.DomHelper.append(divContent, tabTag); //将table追加到divContent
 84 
 85             //创建列头
 86             var ths = { tag: "tr", children: [
 87             { tag: "th", style: "border:1px solid blue", children: [
 88             { tag: "input", type: "checkbox", id: "chkAll" }
 89             ]
 90             },
 91             { tag: "th", style: "border:1px solid blue", html: "名称" },
 92             { tag: "th", style: "border:1px solid blue", html: "简介" }
 93             ]
 94             };
 95             Ext.DomHelper.append(tab, ths); //将tr追加到table
 96 
 97             Ext.each(data, function (item) {//遍历数据
 98                 var trTag = { tag: "tr", children: [
 99                 { tag: "td", style: "border:1px solid blue", children: [{ tag: "input", type: "checkbox", name: "chkSingle"}] },
100                 { tag: "td", style: "border:1px solid blue", html: item.Name },
101                 { tag: "td", style: "border:1px solid blue", html: item.Html }
102                 ]
103                 };
104                 Ext.DomHelper.append(tab, trTag); //将tr追加到table
105             });
106 
107             Ext.get("chkAll").on("change", function (obj) {
108                 var chkSingles = Ext.query("input[name='chkSingle']"); //Dom集合
109                 Ext.each(chkSingles, function (item) {
110                     item.checked = Ext.get("chkAll").dom.checked;
111                 });
112             });
113 
114             //            Ext.get("chkAll").addListener("click", function (obj) {
115             //                var chkSingles = Ext.query("input[name='chkSingle']"); //Dom集合
116             //                Ext.each(chkSingles, function (item) {
117             //                    item.checked = Ext.get("chkAll").dom.checked;
118             //                });
119             //            });
120         }

6.使用JQuery和ExtJs简单创建对象
其实前面复杂的操作处理了，这个就比较简单，简单创建几个input对象。依然是第4点的页面，再加上下面2个脚本函数，代码如下：

 

使用原生JavaScript动态创建Table有些生硬，不太灵活；使用JQuery和ExtJs是各个API方法的调用，相对灵活些，代码也相对减小一些。
ExtJs一般不用Table来显示列表数据，一般直接用GridPanel直接绑定数据，显示数据，再加上CheckBox的多选功能。

 

 

分类: Web Development