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

简介:
+关注继续查看

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

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

 View Code

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

 View Code

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

 View Code

4.使用XMLHttp进行Ajax调用动态创建Table
主要是使用XMLHttpRequest的AJAX请求服务端数据,服务端使用一般处理程序(*.ashx)处理,并使用JavaScriptSerializerDataContractJsonSerializer进行对象的序列化操作,转换为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>

效果图:

前端代码:

 View Code

服务端代码:

 View Code

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

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

 View Code

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

本文转自SanMaoSpace博客园博客,原文链接:http://www.cnblogs.com/SanMaoSpace/p/3174644.html,如需转载请自行联系原作者


相关文章
|
1天前
|
JavaScript 前端开发
原生JavaScript之dom与setInterval/settimeout结合实现动画
原生JavaScript之dom与setInterval/settimeout结合实现动画
15 1
|
1天前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
13 2
|
1天前
|
JavaScript 前端开发
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
11 1
|
1天前
|
JavaScript 前端开发
原生JavaScript之dom添加表单验证
原生JavaScript之dom添加表单验证
12 2
原生JavaScript之dom添加表单验证
|
1天前
|
XML JavaScript 前端开发
JavaScript、ECMAScript、DOM和BOM对象
JavaScript、ECMAScript、DOM和BOM对象
17 0
|
17天前
|
XML JavaScript 前端开发
详解javascript里面的DOM操作
DOM(Document Object Model)是用于操作HTML和XML文档的标准编程接口。在JavaScript中,我们可以使用DOM来选择元素、修改元素属性、添加/删除元素以及处理事件等操作。本文将详细介绍如何使用JavaScript来操作DOM,并提供一些练习的例子和答案。
|
19天前
|
JavaScript 前端开发 API
JavaScript事件处理:探索DOM事件和事件监听器
JavaScript事件处理:探索DOM事件和事件监听器
22 0
|
29天前
|
XML JavaScript 前端开发
js的DOM是什么,有什么作用
js的DOM是什么,有什么作用
17 0
|
2月前
|
XML 缓存 JavaScript
JavaScript操作DOM常用的API
什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。文档对象模型 (DOM) 是对HTML文件的另一种展示,通俗地说,一个HTML 文件,我们可以用编辑器以代码的形式展示它,也可以用浏览器以页面的形式展示它,同一份文件通过不同的展示方式,就有了不一样的表现形式。而DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来,我们可以使用脚本或者程序语言通过DOM 来改变或者控制web页面。
|
2月前
|
移动开发 JavaScript 前端开发
JavaScript DOM编程基础
JavaScript DOM编程基础
20 0
相关产品
云迁移中心
推荐文章
更多