做了个简单使用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/>", { width: "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: "width: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的多选功能。

 
 

JS、JQuery和ExtJs动态创建DOM对象的更多相关文章

  1. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  2. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  3. JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  4. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

  5. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  6. Vue.js源码解析-Vue初始化流程之动态创建DOM

    目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...

  7. 基于jquery的表格动态创建,自动绑定,自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  8. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

  9. jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...

随机推荐

  1. 关于SelectedItems的问题

    在做俄罗斯方块的时候写了以下一段代码: private void listView1_SelectedIndexChanged(object sender, EventArgs e)        { ...

  2. 步步详解近期大火的density_peak超赞聚类

    近期忙着在公司捣腾基于SOA的应急框架,还是前两周才在微博上看见了density_peak,被圈内好些人转载. 由于这个算法的名字起的实在惹眼,都没好意思怎么把这个算法名字翻译成中文,当然更惹眼的是, ...

  3. C#-面向对象的多态思想 ---ShinePans

    总结: 多态是面向对象的核心.---------能够理解为一个方法,多种实现, 在这里能够用虚方法,抽象类,接口能够实现多态 1.首先利用接口来实现多态: 接口相当于"功能,"接口 ...

  4. log4e插件的安装和使用

    1.首先下载log4e小工具.放入myeclipse10安装文件夹D:\Program Files (x86)\myEclipse10\MyEclipse Blue Edition 10\dropin ...

  5. IOS开发之——使用SBJson拼接Json字符串

    SBJson包的下载地址在上一篇文章中. 能够使用NSDictionary中的键值对来拼接Json数据,很方便,也能够进行嵌套,直接上代码: //開始拼接Json字符串 NSDictionary *d ...

  6. List<string>和string[]

    List<string>和string[] List<string>是集合:string[]是数组: ///////////////////////////////////// ...

  7. Spring IOC 之个性化定制the nature of a bean

    1.生命周期回调 为了影响容器管理的bean的生命周期,你可以实现Spring的InitializingBean和DisposableBean接口.容器首先调用afterPropertiesSet() ...

  8. js 拖拽实现

    代码参考 <!DOCTYPE html> <html lang="en"> <title>拖拽</title> <head&g ...

  9. 个推推送 产品SDK常见问题检查

    作者:Hong Jack链接:https://zhuanlan.zhihu.com/p/20733333来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 通知和消息有什么 ...

  10. Spyder提示ValueError: API 'QString' has already been set to version 1

    转载自:http://wuyuans.com/2013/02/spyder-valueerror-api-qstring-has-already-been-set-to-version-1/ 在IPy ...