JS、JQuery和ExtJs動態建立DOM對象

時間 2019-11-13

標籤 jquery extjs 動態建立 dom 對象欄目 JavaScript 简体版

原文原文鏈接

作了個簡單使用JavaScript、JQuery、ExtJs進行DOM對象建立的測試，主要是使用JavaScript、JQuery、ExtJs動態建立Table對象、動態Table數據填充、多選控制。
1.簡單前臺數據處理
界面有點醜了，沒美化界面，主要是JavaScript動態建立Table。效果圖：
javascript

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript" language="javascript">
 6 
 7         function blurMessage() {
 8             //輸入姓名失去光標
 9             var varName = document.getElementById("txtName");
10             var varMessgae = document.getElementById("txtMessage");
11             if (varName.value != null && varName.value.length <= 0) {
12                 alert("請輸入姓名！");
13                 return;
14             }
15 
16             varMessgae.innerHTML = varName.value + "說：";
17             varName.value = ""; //清空內容
18         }
19 
20         function showMessage() {
21             //顯示提交的信息
22             var message = document.getElementById("txtMessage").value;
23             var date = new Date().toLocaleDateString();
24             var time = new Date().toLocaleTimeString();
25             if (!message) {
26                 alert("請輸入信息內容！");
27                 return;
28             }
29             //獲取顯示錶格對象
30             var tab = document.getElementById("tabMessage");
31             var tr = tab.insertRow(1);
32             var td1 = tr.insertCell(-1);
33             td1.innerHTML = message;
34             var td2 = tr.insertCell(-1);
35             td2.innerHTML = date;
36             var td3 = tr.insertCell(-1);
37             td3.innerHTML = time;
38 
39             document.getElementById("txtMessage").value = '';
40         }
41     
42     </script>
43 </head>
44 <body>
45     <div id="divContain" style="width: 600px">
46         <div id="divMessage">
47             <table id="tabMessage" cellpadding="0" cellspacing="0" border="1" style="width: 100%;
48                 background-color: Yellow; border-width: 2px; border-bottom-width: 3px">
49                 <tr>
50                     <th>
51                         留言信息
52                     </th>
53                     <th>
54                         日期
55                     </th>
56                     <th>
57                         時間
58                     </th>
59                 </tr>
60             </table>
61         </div>
62         <div id="divSubmitMessage">
63             <h3>
64                 請填寫你寶貴的建議：
65             </h3>
66             <div>
67                 <input type="radio" id="rbNoName" onclick="txtName.style.display='none';txtMessage.innerHTML = '匿名說：';"
68                     value="NoName" name="rbGroup" />匿名
69                 <input type="radio" id="rbName" onclick="txtName.style.display=''" value="Name" name="rbGroup" />實名
70                 <input type="text" id="txtName" style="display: none" onblur="blurMessage()" />
71                 <br />
72                 <textarea id="txtMessage" cols="110" rows="5" style="width: 100%"></textarea>
73                 <br />
74                 <input type="button" id="btnSubmit" onclick="showMessage()" style="float: right;
75                     margin-top: 10px;" value="提交信息" />
76             </div>
77         </div>
78     </div>
79 </body>
80 </html>

View Code

2.JavaScript動態建立DOM對象
主要是使用JavaScript動態建立按鈕、文本、連接、表格、加上CheckBox的表格(簡單實現全選)，這裏Table的數據是頁面數據，不是服務端數據，主要是與後面的JQuery和ExtJs請求服務端數據動態建立Table的差別比較。
界面有點醜，主要是看JavaScript動態建立Dom對象，效果圖：
css

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         .TestCss
  7         {
  8             color: Purple;
  9             background-color: Silver;
 10         }
 11     </style>
 12     <script type="text/javascript" language="javascript">
 13 
 14         var count = 0; //全局變量
 15 
 16         //建立元素標籤
 17         function createElements() {
 18             count++; //記錄數累加
 19 
 20             //建立input:button標籤
 21             var inputBtn = document.createElement("input");
 22             inputBtn.setAttribute("type", "button");
 23             inputBtn.setAttribute("value", "新建Button" + count);
 24             inputBtn.setAttribute("class", "TestCss");
 25             inputBtn.setAttribute("onclick", "alert(this.value)");
 26 
 27             //建立input:text標籤
 28             var inputText = document.createElement("input");
 29             inputText.setAttribute("type", "text");
 30             inputText.setAttribute("value", "請輸入文本");
 31             inputText.setAttribute("style", "color:red;background-color:blue");
 32 
 33             //建立iframe標籤
 34             var iframe = document.createElement("iframe");
 35             iframe.width = "100%"

 36             iframe.marginheight = "100px"
 37             iframe.frameborder = "0";
 38             iframe.src = "Test.htm"; //Test.htm Test.doc
 39 
 40             //建立br標籤
 41             var br = document.createElement("br");
 42 
 43             var divContent = document.getElementById("divContent");
 44             divContent.appendChild(inputBtn); //將input:button標籤追加divConent以後
 45             divContent.appendChild(inputText); //將input:text標籤追加divContent以後
 46             //divContent.appendChild(iframe); //將iframe標籤追加divContent以後
 47             divContent.appendChild(br); //將br標籤追加divContent以後
 48         }
 49 
 50         //HTML拼接
 51         function createLinks() {
 52             count++;
 53 
 54             //建立A標籤HTML文本
 55             var idCount = "A" + count;
 56             var valueCount = "新建鏈接" + count;
 57             var link = "<a href='#' id='" + idCount + "' onclick='alert(this.id)'>" + valueCount + "</a>&nbsp;&nbsp;";
 58             if (count % 2 == 0) {
 59                 link += "<br/>";
 60             }
 61 
 62             var divContent = document.getElementById("divContent");
 63             divContent.innerHTML += link; //divContent中累加HTML文本
 64         }
 65 
 66         //根據行列建立table元素
 67         function createTables(rowCount, colCount) {
 68             count++;
 69             //建立table標籤
 70             var tab = document.createElement("table");
 71             tab.setAttribute("border", "1");
 72             tab.setAttribute("cellpadding", "0");
 73             tab.setAttribute("cellspacing", "0");
 74             //建立caption標籤
 75             var caption = document.createElement("caption");
 76             caption.innerText = "表頭信息" + count;
 77             tab.appendChild(caption); //將caption追加table以後
 78 
 79             for (var i = 1; i <= rowCount; i++) {
 80                 var tr = document.createElement("tr");
 81                 for (var j = 1; j <= colCount; j++) {
 82                     var td = document.createElement("td");
 83                     if (j % 2 != 0) {
 84                         var oddText = "第" + i + "行,第" + j + "列";
 85                         td.innerText = oddText; //奇數列內容
 86                     }
 87                     else {
 88                         var evenHtml = "<a href='#'>我是鏈接(" + i + "," + j + ")</a>";
 89                         td.innerHTML = evenHtml; //偶數列內容
 90                     }
 91                     tr.appendChild(td); //td追加到tr以後
 92                 }
 93                 if (i % 2 == 0) {//偶數行換色
 94                     tr.setAttribute("style", "background-color:orange");
 95                 }
 96                 tab.appendChild(tr); //tr追加到table以後
 97             }
 98 
 99             var divContent = document.getElementById("divContent");
100             divContent.appendChild(tab); //table追加到divContent以後
101         }
102 
103         //根據數據建立Table
104         function createDataTable1() {
105             count++;
106             var data = [{ Name: "百度", Url: "www.baidu.com" }, { Name: "新浪", Url: "www.sina.com" }, { Name: "搜狐", Url: "www.sohu.com"}];
107 
108             var tab = document.createElement("table");
109             tab.setAttribute("border", "1");
110             tab.setAttribute("width", "260px");
111             tab.setAttribute("cellpadding", "1");
112             tab.setAttribute("cellspacing", "1");
113 
114             var caption = document.createElement("caption");
115             caption.innerText = "數據信息" + count;
116             tab.appendChild(caption);
117 
118             for (var i = 0; i < data.length; i++) {//遍歷集合
119                 var tr = document.createElement("tr");
120                 var td1 = document.createElement("td");
121                 var td2 = document.createElement("td");
122                 var dataHtml = "<a href='" + data[i].Url + "'>" + data[i].Name + "簡介</a>";
123                 td1.innerText = data[i].Name;
124                 td2.innerHTML = dataHtml;
125                 tr.appendChild(td1);
126                 tr.appendChild(td2);
127                 tab.appendChild(tr);
128             }
129 
130             var divContent = document.getElementById("divContent");
131             divContent.appendChild(tab);
132         }
133 
134         //根據數據建立Table並設置全選
135         function createDataTable2() {
136             count++;
137             var data = { "百度": "<a href='#'>百度簡介</a>", "新浪": "<a href='#'>新浪簡介</a>", "搜狐": "<a href='#'>搜狐簡介</a>" };
138 
139             var tab = document.createElement("table");
140             tab.setAttribute("border", "1");
141             tab.setAttribute("width", "260px");
142             tab.setAttribute("cellpadding", "1");
143             tab.setAttribute("cellspacing", "1");
144 
145             var caption = document.createElement("caption");
146             caption.innerText = "數據表頭" + count;
147             tab.appendChild(caption);
148 
149             //添加列頭
150             var chkAll = "<input type='checkbox' id='chkAll' name='chkAll' ></input>";
151             var th = document.createElement("tr");
152             var th0 = document.createElement("th");
153             var th1 = document.createElement("th");
154             var th2 = document.createElement("th");
155             th0.innerHTML = chkAll;
156             th1.innerText = "名稱";
157             th2.innerText = "簡介";
158             th.appendChild(th0);
159             th.appendChild(th1);
160             th.appendChild(th2);
161             tab.appendChild(th);
162 
163             //添加行數據
164             for (obj in data) {//遍歷鍵
165                 var tr = document.createElement("tr");
166                 var td0 = document.createElement("td");
167                 var td1 = document.createElement("td");
168                 var td2 = document.createElement("td");
169 
170                 var chkSingle = "<input type='checkbox' name='chkSingle'></input>";
171                 td0.innerHTML = chkSingle;
172                 td1.innerText = obj; //取鍵的數據
173                 td2.innerHTML = data[obj]; //取值的數據
174 
175                 tr.appendChild(td0);
176                 tr.appendChild(td1);
177                 tr.appendChild(td2);
178                 tab.appendChild(tr);
179             }
180 
181             var divContent = document.getElementById("divContent");
182             divContent.appendChild(tab); //tab追加到divContent
183 
184             //全選設置
185             document.getElementById("chkAll").onclick = selectAll;
186         }
187 
188         function selectAll() {//全選設置
189             var chkAll = document.getElementById("chkAll");
190             var chkSingles = document.getElementsByName("chkSingle");
191             for (var i = 0; i < chkSingles.length; i++) {
192                 chkSingles[i].checked = chkAll.checked;
193             }
194         }
195     </script>
196 </head>
197 <body>
198     <div id="divContainer" style="background-color: Yellow; width: 600px; padding: 3px 5px 20px 3px;">
199         <input type="button" id="btnElement" value="建立元素" onclick="createElements()" />
200         <input type="button" id="btnText" value="添加連接" onclick="createLinks()" />
201         <input type="button" id="btnTable" value="添加行列表格" onclick="createTables(5,6)" />
202         <input type="button" id="btnDataTable" value="添加數據表格" onclick="createDataTable1();createDataTable2()" />
203         <div id="divContent" style="width: 100%; text-align: center">
204         </div>
205     </div>
206 </body>
207 </html>

View Code

3.JavaScript簡單效果實現
主要是自定義分割文本、Timer時鐘使用、JS粘貼板使用、Div隨鼠標移動的簡單測試，這個稍稍好看些，效果圖：
html

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         .buttonCSS
  7         {
  8             border-style: outset;
  9             border-color: Blue;
 10         }
 11     </style>
 12     <script type="text/javascript" language="javascript">
 13 
 14         var num = 50000; //計數器
 15         var isStart = true; //時鐘開關
 16         var timerID = null; //時鐘
 17         //設置時鐘
 18         function setTimer() {
 19             if (isStart) {
 20                 isStart = false;
 21                 timerID = setInterval("setCount()", 10); //開啓時鐘
 22                 document.getElementById("btnTimer").value = "暫停時鐘";
 23             }
 24             else {
 25                 isStart = true;
 26                 clearInterval(timerID); //暫停時鐘
 27                 document.getElementById("btnTimer").value = "啓動時鐘";
 28             }
 29         }
 30         function setCount() {
 31             if (num > 0) {
 32                 document.getElementById("divCount").innerText = num;
 33                 num--;
 34             }
 35         }
 36 
 37         //分割文本
 38         function splitText() {
 39             var textData = "李麗-女-23-測試";
 40             var newText = "";
 41             var tempData = textData; //用於處理文本
 42             var index = tempData.indexOf('-');
 43             while (index > 0) {
 44                 newText += tempData.substring(0, index) + "<br/>";
 45                 tempData = tempData.substring(index + 1, tempData.length);
 46                 index = tempData.indexOf('-');
 47             }
 48 
 49             var divContent = document.getElementById("divContent");
 50             divContent.innerHTML = "原是文本：<br/>" + textData;
 51             divContent.innerHTML += "<br/>分割文本：<br/>" + newText;
 52             divContent.innerHTML += "split方法分割：<br/>" + textData.split('-');
 53         }
 54 
 55         //設置div位置
 56         function flyDiv() {
 57             var left = window.event.screenX - 10;
 58             var top = window.event.screenY - 400;
 59             //left = window.event.clientX;
 60             //top = window.event.clientY;
 61             var divFly = document.getElementById("divFly");
 62             divFly.style.marginLeft = left + "px";
 63             divFly.style.marginTop = top + "px";
 64         }
 65 
 66         //寫入數據
 67         function copeData() {
 68             var message = "分享與你！網站爲：" + location.href + "；附帶博客：http://www.cnblogs.com/SanMaoSpace/";
 69             clipboardData.setData("Text", message);
 70             alert("信息已複製到粘貼板，請粘貼！");
 71         }
 72         //讀取數據
 73         function pasteData() {
 74             var text = clipboardData.getData("Text");
 75             var textMessage = document.getElementById("textMessage");
 76             textMessage.value = text;
 77         }
 78 
 79         //全選控制
 80         function selectAll(ckAll) {
 81             var ckSingles = document.getElementsByName("ckSingle");
 82             for (var i = 0; i < ckSingles.length; i++) {
 83                 ckSingles[i].checked = ckAll.checked;
 84             }
 85         }
 86 
 87         //設置顏色
 88         function setColor(obj) {
 89             var thisColor = "green";
 90             var othersColor = "yellow";
 91             if (obj.type != "mousemove") {
 92                 thisColor = "yellow";
 93                 othersColor = "green"
 94             }
 95 
 96             var tab = document.getElementById("tab");
 97             for (var i = 0; i < tab.rows.length; i++) {
 98                 if (tab.rows[i] == this) {
 99                     tab.rows[i].style.background = thisColor;
100                 }
101                 else {
102                     tab.rows[i].style.background = othersColor;
103                 }
104             }
105         }
106 
107         //根據顏色設置交替行顏色
108         function getColor(thisColor, othersColor) {
109             var tab = document.getElementById("tab");
110             tab.rows[0].style.background = "highlight";
111             for (var i = 1; i < tab.rows.length; i++) {
112                 if (i % 2 == 0) {//交替換色
113                     tab.rows[i].style.background = thisColor;
114                 }
115                 else {
116                     tab.rows[i].style.background = othersColor;
117                 }
118             }
119         }
120         function newColor(obj) {
121             var thisColor = "green";
122             var othersColor = "yellow";
123             if (obj.type != "mousemove") {
124                 var temp = thisColor;
125                 thisColor = othersColor;
126                 othersColor = temp;
127             }
128 
129             getColor(thisColor, othersColor);
130         }
131 
132         function changeColor() {//改變顏色
133             var tab = document.getElementById("tab");
134             for (var i = 0; i < tab.rows.length; i++) {
135                 tab.rows[i].onmousemove = setColor; //newColor setColor
136                 tab.rows[i].onmouseout = setColor; //newColor setColor
137             }
138         }
139 
140     </script>
141 </head>
142 <body onload="changeColor()">
143     <div id="divContainer" style="width: 500px; background-color: Orange; padding-left: 3px;
144         padding-top: 3px; padding-right: 10px; padding-bottom: 20px">
145         <div id="divTools">
146             <input type="button" id="btnText" class="buttonCSS" value="分割文本" onclick="splitText()" />
147             <input type="button" id="btnTimer" class="buttonCSS" value="開啓時鐘" onclick="setTimer()" />
148             <input type="button" id="btnSet" class="buttonCSS" value="分享網址" onclick="copeData()" />
149             <input type="button" id="btnGet" class="buttonCSS" value="粘貼網址" onclick="pasteData()" />
150             <input type="button" id="btnDiv" class="buttonCSS" value="飛翔DIV" onclick="document.onmousemove = flyDiv;" />
151         </div>
152         <div id="divTable">
153             <table id="tab" border="1" cellpadding="0" cellspacing="0" style="border-color: Blue;
154                 margin-top: 5px; border-style: double; border-width: 1px; width: 100%; height: 150px;
155                 text-align: center">
156                 <tr id="tr">
157                     <th>
158                         <input type="checkbox" id="ckAll" name="ckAll" onclick="selectAll(this)" />
159                     </th>
160                     <th>
161                         編號
162                     </th>
163                     <th>
164                         標題
165                     </th>
166                     <th>
167                         內容
168                     </th>
169                 </tr>
170                 <tr>
171                     <td>
172                         <input type="checkbox" name="ckSingle" />
173                     </td>
174                     <td>
175                         001
176                     </td>
177                     <td>
178                         標題1
179                     </td>
180                     <td>
181                         內容1
182                     </td>
183                 </tr>
184                 <tr>
185                     <td>
186                         <input type="checkbox" name="ckSingle" />
187                     </td>
188                     <td>
189                         002
190                     </td>
191                     <td>
192                         標題2
193                     </td>
194                     <td>
195                         內容2
196                     </td>
197                 </tr>
198                 <tr>
199                     <td>
200                         <input type="checkbox" name="ckSingle" />
201                     </td>
202                     <td>
203                         003
204                     </td>
205                     <td>
206                         標題3
207                     </td>
208                     <td>
209                         內容3
210                     </td>
211                 </tr>
212                 <tr>
213                     <td>
214                         <input type="checkbox" name="ckSingle" />
215                     </td>
216                     <td>
217                         004
218                     </td>
219                     <td>
220                         標題4
221                     </td>
222                     <td>
223                         內容4
224                     </td>
225                 </tr>
226             </table>
227         </div>
228         <div id="divContent" style="width: 100%; margin-top: 10px; background-color: Yellow;
229             padding: 5px 0px 0px 5px">
230         </div>
231         <div id="divCount" style="width: 100%; margin-top: 10px; background-color: Yellow;
232             padding: 5px 0px 0px 5px; font-size: 20px; text-align: center">
233         </div>
234         <div id="divText" style="width: 100%; margin-top: 10px;">
235             <textarea id="textMessage" rows="5" cols="3" style="width: 100%"></textarea>
236         </div>
237     </div>
238     <div id="divFly" style="width: 200px; height: 100px; background-color: Purple; text-align: center;
239         position: absolute; padding-top: 50px">
240         我是移動DIV!
241     </div>
242 </body>
243 </html>

View Code

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>

效果圖：

前端代碼：java

  1 <head>
  2     <title></title>
  3     <style type="text/css">
  4         .buttonCSS
  5         {
  6             border-style: outset;
  7             border-color: Purple;
  8         }
  9     </style>
 10     <script src="../../Scripts/ext-base.js" type="text/javascript"></script>
 11     <script src="../../Scripts/ext-all.js" type="text/javascript"></script>
 12     <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 13     <script type="text/javascript" language="javascript">
 14         var ajaxReq = null;
 15         function ajaxData() {
 16             var url = "../Ajaxs/AjaxHandler.ashx";
 17             //            url = "AjaxHandler.ashx?args=AA";
 18             //            url = "AjaxHandler.ashx?type=insert&data=AA";
 19             //            url = "AjaxHandler.ashx?type=update&data=AA";
 20             //            encodeURI("");//注意對漢字鏈接字符串的亂碼
 21             if (window.XMLHttpRequest) {
 22                 ajaxReq = new XMLHttpRequest();
 23             }
 24             else if (window.ActiveXObject) {
 25                 try {
 26                     ajaxReq = new ActiveXObject("Microsoft.XMLHttp");
 27                 }
 28                 catch (e) {
 29                     ajaxReq = new ActiveXObject("Msxml2.XMLHTTP");
 30                 }
 31             }
 32 
 33             if (ajaxReq) {
 34                 ajaxReq.open("POST", url);
 35                 ajaxReq.onreadystatechange = readyStateChange;
 36                 ajaxReq.send(null);
 37             }
 38         }
 39 
 40         function readyStateChange() {
 41             if (ajaxReq) {
 42                 if (ajaxReq.readyState == "4") {//請求完成
 43                     if (ajaxReq.status == "200") {//執行成功
 44                         var data = ajaxReq.responseText; //ajaxReq.responseXML
 45                         var jqueryData = $.parseJSON(data); //JQuery反序列化
 46                         var ExtJsData = Ext.util.JSON.decode(data); //ExtJs反序列化
 47 
 48                         $("#divContent").html("信息加載成功！");
 49 
 50                         //DOM建立Table
 51                         createDomTable(ExtJsData);
 52 
 53                         //Html拼接JQuery建立Table
 54                         createJoinTable1(jqueryData);
 55 
 56                         //Html拼接ExtJs建立Table
 57                         createJoinTable2(ExtJsData);
 58 
 59                         //JQuery建立Table
 60                         createJQueryTable(jqueryData);
 61 
 62                         //ExtJs建立Table
 63                         createExtJsTable(ExtJsData);
 64 
 65                         //ExtJs的createTemplate建立Table
 66                         createExtJsTemplate(ExtJsData);
 67 
 68                         //ExtJs的XTemplate建立Table
 69                         //這個方法會重寫divContent的內容
 70                         //createExtJsXTemplate();
 71                     }
 72                     else {//執行失敗
 73                         alert("服務器狀態：" + ajaxReq.statusText);
 74                     }
 75                 }
 76                 else {
 77                     var message = "信息加載中......";
 78                     $("#divContent").html(message); //Jquery顯示內容
 79                     //Ext.get("divContent").dom.innerHTML = message;//ExtJs顯示內容
 80                 }
 81             }
 82         }
 83 
 84         //DOM建立Table
 85         function createDomTable(data) {
 86             var tab = document.createElement("table"); //建立tab對象
 87             tab.setAttribute("border", "1"); //設置table屬性
 88             tab.setAttribute("width", "200px");
 89             tab.setAttribute("cellspacing", "1");
 90             tab.setAttribute("cellpadding", "1");
 91 
 92             var caption = document.createElement("caption"); //建立caption對象
 93             caption.innerText = "DOM Create Table";
 94             tab.appendChild(caption); //caption追加table
 95 
 96             for (var i = 0; i < data.length; i++) {//遍歷數據
 97                 var tr = document.createElement("tr"); //建立tr
 98                 var td1 = document.createElement("td");
 99                 var td2 = document.createElement("td");
100                 td1.innerHTML = data[i].Name;
101                 td2.innerHTML = data[i].Html;
102 
103                 tr.appendChild(td1);
104                 tr.appendChild(td2);
105                 tab.appendChild(tr);
106             }
107 
108             document.getElementById("divContent").appendChild(tab);
109         }
110 
111         //拼接Html標籤JQuery建立Table
112         function createJoinTable1(data) {
113             var tabHtml = "<table id='tab1' width='200px' cellspacing='1' cellpadding='1' border='1'>";
114             tabHtml += "<caption>JQuery Join Table</caption>";
115 
116             $(data).each(function (index, item) {
117                 tabHtml += "<tr>";
118                 tabHtml += "<td>" + item.Name + "</td>";
119                 tabHtml += "<td>" + item.Html + "</td>";
120                 tabHtml += "</tr>";
121             });
122             tabHtml += "</table>";
123 
124             $("#divContent").append(tabHtml);
125             //$("#tab1").attr("cellspacing", "0").attr("cellpadding", "0"); //修改Table屬性
126         }
127 
128         //拼接Html標籤ExtJs建立Table
129         function createJoinTable2(data) {
130             var tabHtml = "<table id='tab2' width='200px' cellspacing='1' cellpadding='1' border='1'>";
131             tabHtml += "<caption>ExtJs Join Table</caption>";
132 
133             Ext.each(data, function (item) {
134                 tabHtml += "<tr>";
135                 tabHtml += "<td>" + item.Name + "</td>";
136                 tabHtml += "<td>" + item.Html + "</td>";
137                 tabHtml += "</tr>";
138             });
139             tabHtml += "</table>";

140 
141             Ext.get("divContent").dom.innerHTML += tabHtml;
142             //Ext.get("tab2").dom.cellSpacing = 0;//修改屬性cellSpacing
143             //Ext.get("tab2").dom.cellPadding = 0;//修改屬性cellPadding
144         }
145 
146         //JQuery建立Table
147         function createJQueryTable(data) {
148             //建立table對象
149             var tab = $("<table/>", { width: "200px", cellspacing: "1", cellpadding: "1", border: "1" });
150             $("<caption/>").text("JQuery Create Table").appendTo(tab); //建立caption並追加到tab
151             $(data).each(function (index, item) {//遍歷數據
152                 var tr = $("<tr/>").appendTo(tab); //建立tr並追加到tab
153                 $("<td/>").html(item.Name).appendTo(tr); //建立td並追加到tr
154                 $("<td/>").html(item.Html).appendTo(tr);
155             });
156 
157             tab.appendTo($("#divContent")); //tab追加到divContent
158             //$("#divContent").append(tab);//divContent後追加tab
159         }
160 
161         //ExtJs建立Table
162         function createExtJsTable(data) {
163             var divContent = Ext.get("divContent");
164             var tabTag = { tag: 'table', children: [{ tag: 'caption', html: 'ExtJs Create Table'}], style: 'width:200px;border: 1px solid blue;' };
165             var tab = Ext.DomHelper.append(divContent, tabTag); //將table追加到divContent
166 
167             Ext.each(data, function (item) {
168                 var trTag = { tag: 'tr', children: [
169                                                 { tag: 'td', html: item.Name, style: "border: 1px solid blue;" },
170                                                 { tag: 'td', html: item.Html, style: "border: 1px solid blue;" }
171                                                 ]
172                 };
173                 Ext.DomHelper.append(tab, trTag); //將tr追加到table
174             });
175 
176             //也能夠使用createHtml方法
177             //var tab = Ext.DomHelper.createHtml(tabTag);
178             //Ext.DomHelper.append(divContent, tab);
179         }
180 
181         //使用ExtJs的createTemplate建立Table
182         function createExtJsTemplate(data) {
183             var divContent = Ext.get("divContent");
184             var tabTag = { id: 'MyTab', tag: 'table', children: [{ tag: 'caption', html: 'ExtJs Template Table'}],
185                 style: 'width:200px; border: 1px solid blue;'
186             };
187             var tab = Ext.DomHelper.append(divContent, tabTag);
188 
189             //建立模版
190             var tpl = Ext.DomHelper.createTemplate({ tag: 'tr', children: [
191             { tag: 'td', html: "{0}", style: "border: 1px solid blue;" },
192             { tag: 'td', html: "{1}", style: "border: 1px solid blue;" }
193             ]
194             });
195             Ext.each(data, function (item) {
196                 tpl.append(tab, [item.Name, item.Html]); //篩入數據
197             });
198         }
199 
200         //使用ExtJs的XTemplate建立Table
201         function createExtJsXTemplate() {
202             var data = { Messages: [{ Name: "百度", Html: "<a href='#'>百度簡介</a>" },
203                         { Name: "新浪", Html: "<a href='#'>新浪簡介</a>" },
204                         { Name: "搜狐", Html: "<a href='#'>搜狐簡介</a>"}]
205             };
206 
207             var divContent = Ext.get("divContent");
208             var tpl = new Ext.XTemplate(//建立模版
209             '<table width="200px" cellspacing="1" cellpadding="1" border="1">',
210             '<caption>ExtJs XTemplate Table</caption>',
211             '<tpl for="Messages">',
212             '<tr><td>{Name}</td><td>{Html}</td></tr>',
213             '</tpl>',
214             '</table>'
215             );
216             tpl.compile(); //模版編譯一下
217             tpl.overwrite(divContent, data); //模版重寫
218         }
219     </script>
220 </head>
221 <body>
222     <div id="divContainer" style="width: 500px; background-color: Teal; padding: 5px 10px 20px 5px">
223         <div id="divTools">
224             <input type="button" id="btnAjaxTable" class="buttonCSS" value="添加Ajax表格" onclick="ajaxData()" />
225             <input type="button" id="btnSelAll" class="buttonCSS" value="添加全選表格" onclick="JQueryAjax();ExtJsAjax()" />
226             <input type="button" id="btnCreateObjs" class="buttonCSS" value="建立其餘對象" onclick="createJQueryObjs();createExtJsObjs()" />
227         </div>
228         <div id="divContent" style="width: 100%; background-color: Yellow; padding-top: 3px;
229             padding-left: 5px; padding-bottom: 10px; text-align: center">
230         </div>
231     </div>
232 </body>
233 </html>

View Code

服務端代碼：jquery

 1 using System;
 2 using System.Collections.Generic;
 3 using System.IO;
 4 using System.Linq;
 5 using System.Runtime.Serialization.Json;
 6 using System.Text;
 7 using System.Web;
 8 using System.Web.Script.Serialization;
 9 
10 namespace JsJQueryExtJsReview.JQueryReview.Ajaxs
11 {
12     /// <summary>
13     /// AjaxHandler 的摘要說明
14     /// </summary>
15     public class AjaxHandler : IHttpHandler
16     {
17 
18         public void ProcessRequest(HttpContext context)
19         {
20             context.Response.ContentType = "text/plain";//application/json text/plain
21             string JsonData = string.Empty;
22 
23             System.Threading.Thread.Sleep(2000);//延遲2000毫秒
24 
25             List<Message> list = initMessages();
26 
27             JsonData = GetJavaScriptData(list);//JavaScript序列化操做
28             JsonData = GetDataContractData(list);//DataContract序列化操做
29 
30             context.Response.Write(JsonData);
31         }
32 
33         /// <summary>
34         /// DataContractJsonSerializer序列化數據
35         /// </summary>
36         /// <param name="messages">信息對象集合</param>
37         /// <returns>信息對象Json串</returns>
38         private string GetDataContractData(List<Message> messages)
39         {
40             string json = string.Empty;
41             DataContractJsonSerializer dataContract = new DataContractJsonSerializer(messages.GetType());
42             MemoryStream ms = new MemoryStream();
43             dataContract.WriteObject(ms, messages);
44             json = Encoding.UTF8.GetString(ms.ToArray());
45             return json;
46         }
47 
48         /// <summary>
49         /// JavaScriptSerializer序列化數據
50         /// </summary>
51         /// <param name="messages">信息對象集合</param>
52         /// <returns>信息對象Json串</returns>
53         private string GetJavaScriptData(List<Message> messages)
54         {
55             string json = string.Empty;
56             JavaScriptSerializer javaScript = new JavaScriptSerializer();
57             json = javaScript.Serialize(messages);
58             return json;
59         }
60 
61         /// <summary>
62         /// 初始化數據
63         /// </summary>
64         /// <returns></returns>
65         private List<Message> initMessages()
66         {
67             List<Message> list = new List<Message>() {
68               new Message(){ Name="百度",Html="<a href='#'>百度簡介</a>"},
69               new Message(){ Name="新浪",Html="<a href='#'>新浪簡介</a>"},
70               new Message(){ Name="搜狐",Html="<a href='#'>搜狐簡介</a>"}
71             };
72 
73             return list;
74         }
75 
76         public bool IsReusable
77         {
78             get
79             {
80                 return false;
81             }
82         }
83     }
84 
85     public class Message
86     {
87         public string Name { get; set; }
88         public string Html { get; set; }
89     }
90 }

View Code

5.使用JQuery和ExtJs進行Ajax調用動態建立Table
主要是對JQuery、ExtJs的Ajax使用以及如何使用JQuery、ExtJs動態建立Table對象填充數據，簡單實現CheckBox的全選操做。服務端的代碼是第4點的通常處理程序。效果圖：

代碼以下：(仍是第4點的頁面，再加上下面4個腳本函數)ajax

  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個腳本函數，代碼以下：json

 1   //JQuery建立其餘對象
 2         function createJQueryObjs() {
 3             var divContent = $("#divContent").css("text-align", "left").append("<div>JQuery建立其餘對象</div>");
 4 
 5             $("<input/>", { type: "button", val: "建立按鈕" }).appendTo(divContent);
 6             $("<br/>").appendTo(divContent);
 7             $("<input/>", { type: "button", val: "添加樣式", class: "buttonCSS" }).appendTo(divContent);
 8             $("<br/>").appendTo(divContent);
 9             $("<input/>", { type: "button", val: "添加事件", click: function () {
10                 alert($(this).val() + "，測試成功！");
11             }
12             }).appendTo(divContent);
13             $("<br/>").appendTo(divContent);
14             $("<input/>", { type: "text", id: "txt", val: '建立文本', css: { "background-color": "red"} }).appendTo(divContent);
15             $("<br/>").appendTo(divContent);
16             $("<input/>", { type: "radio", name: "sex", val: "男" }).appendTo(divContent);
17             $("<label/>", { text: "男" }).appendTo(divContent);
18             $("<input/>", { type: "radio", name: "sex", val: "女", checked: "true" }).appendTo(divContent);
19             $("<label/>", { text: "女" }).appendTo(divContent);
20             $("<br/>").appendTo(divContent);
21         }
22 
23         //ExtJs建立其餘對象
24         function createExtJsObjs() {
25             var divContent = Ext.get("divContent");
26             Ext.DomHelper.append(divContent, "<hr/>ExtJs建立其餘對象<br/>");
27             var buttonTag = { tag: "input", type: "button", value: "ExtJs按鈕" };
28             Ext.DomHelper.append(divContent, buttonTag);
29             Ext.DomHelper.append(divContent, "<br/>");
30             var textTag = { tag: "input", type: "text", id: "testText", value: "ExtJs文本框" };
31             Ext.DomHelper.append(divContent, textTag);
32         }