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

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

好久不来写东西了，这段时间太慢了，闲了下来看了几篇文章，觉得很好，同时也许咱们大家都能遇到，所以就把它记录下来...

简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试，主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。

1.简单前台数据处理
界面有点丑了，没美化界面，主要是JavaScript动态创建Table。效果图：

 

个人觉得这个方式还可以再修改一下，这样的话是不是太繁琐了，况且JS的话使用的没有jquery的多，所以还是接着往下看看jquery的方法。

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点的一般处理程序。效果图：

代码如下：

 

6.使用JQuery和ExtJs简单创建对象

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

 

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

先记下来吧，等有空了，把它整理一下。

 

 

分类: C#, javascript动态网页技术, jQuery

标签: js, jQuery, ExtJs不同脚本动态创建DOM对象