|
<html>
2  <head>3 <title>Javascript 操作 XML 示例</title>4 5  <script language="javascript">6  /*7  * Create By HJ8 * 2008-6-299  */10 var pageSize,pageIndex,rowCount,pageCount;11 var doc,sourceFile,dataTable;12  var btFirst,btPrevious,btNext,btLast;13 var newsID,newsTitle,newsBody;14 var cmd;15 /// 第一次加载页面方法，初始化变量值16 function page_Load()17 {18 btFirst = document.getElementById("btFirst");19 btPrevious = document.getElementById("btPrevious");20 btNext = document.getElementById("btNext");21 btLast = document.getElementById("btLast");22 dataTable = document.getElementById("dataTable");23 24 btFirst.onclick = firstPage;25 btPrevious.onclick = previousPage;26 btNext.onclick = nextPage;27 btLast.onclick = lastPage;28 29 pageIndex = 1;30 sourceFile = "news.xml";31 doc = new ActiveXObject("Microsoft.XMLDOM");32 doc.load(sourceFile);33 /// 加上该语句，可以设置 js 支持 xpath34 doc.setProperty("SelectionLanguage","XPath"); 35 36 createPageInfo();37 }38 39 /// 创建页面数据内容40 function createPageInfo()41 {42 var startIndex;43 var keyword,items;44 keyword = document.getElementById("txtSearchValue").value.trim();45 removePageInfo();46 if(keyword != "")47 {48 items = doc.selectNodes("Data/Item[contains(.,'"+keyword+"')]");49 }50 else51 {52 items = doc.getElementsByTagName("Item");53 }54 rowCount = items.length;55 if(rowCount == 0) 56 {57 pageIndex = 1;58 pageCount = 1;59 pageStatus();60 return;61 }62 /// 获取页面显示数据量63 pageSize = document.getElementById("txtPageSize").value;64 /// 计算总页数65 pageCount = parseInt(rowCount / pageSize);66 if(pageCount * pageSize < rowCount)67 {68 pageCount ++;69 }70 /// 防止 pageIndex 超出71 if(pageIndex > pageCount) pageIndex = pageCount;72 73 /// 计算当前页面起始记录地址74 startIndex = (pageIndex-1) * pageSize;75 76 document.getElementById("ShowRowCount").innerText = rowCount;77 document.getElementById("ShowPageIndex").innerText = pageIndex;78 document.getElementById("ShowPageCount").innerText = pageCount;79 80 /// 获取当前页面数据81 for(var i = startIndex;i<startIndex+parseInt(pageSize);i++)82 {83 if(i>=rowCount) break;84 newsID = items[i].getAttribute("id");85 newsTitle = items[i].selectSingleNode("NewsTitle").text;86 newsBody = items[i].selectSingleNode("NewsBody").text;87 /// 创建标题行88 var titleRow = dataTable.insertRow(dataTable.rows.length);89 var titleID = document.createAttribute("ID"); 90 titleID.value="NewsTitle"+newsID;91 titleRow.setAttributeNode(titleID); 92 93 /// 复选框94 var cell1 = titleRow.insertCell();95 cell1.innerHTML = "<input type=\"checkbox\" id=\"chkDel\">";96 var align = document.createAttribute("align"); 97 align.value="center";98 cell1.setAttributeNode(align); 99 100 /// 显示/隐藏101 var cell2 = titleRow.insertCell();102 cell2.innerHTML = "<a href=\"#\" onclick=\"showNewsBody(this,'NewsBody"+newsID+"');\">显示</a>";103 var align1 = document.createAttribute("align"); 104 align1.value="center";105 cell2.setAttributeNode(align1); 106 107 /// 标题108 var cell3 = titleRow.insertCell();109 cell3.innerText = newsTitle;110 111 /// 编辑112 var cell4 = titleRow.insertCell();113 cell4.innerHTML = "<a href=\"#\" onclick=\"editNews('"+newsID+"');\">编辑</a>";114 var align2 = document.createAttribute("align"); 115 align2.value="center";116 cell4.setAttributeNode(align2);117 118 /// 创建正文行119 var bodyRow = dataTable.insertRow(dataTable.rows.length);120 var bodyID = document.createAttribute("ID"); 121 bodyID.value="NewsBody"+newsID;122 bodyRow.setAttributeNode(bodyID); 123 bodyRow.style.display = "none";124 125 /// 正文数据126 var cell5 = bodyRow.insertCell();127 cell5.innerHTML = newsBody;128 var colspan = document.createAttribute("colspan"); 129 colspan.value="4";130 cell5.setAttributeNode(colspan);131 /*132 */133 }134 135 pageStatus();136 }137 138 /// 移除页面数据内容139 function removePageInfo()140 {141 var trs = dataTable.childNodes[0].childNodes;142 if(trs.length > 0)143 {144 for(var i = 0;i<trs.length;i++)145 {146 if(trs[i].id.indexOf("News") > -1)147 {148 dataTable.deleteRow(i);149 i--;150 }151 }152 }153 }154 155 /// 首页156 function firstPage()157 {158 pageIndex = 1;159 createPageInfo();160 }161 162 /// 下一页163 function nextPage()164 {165 pageIndex++;166 createPageInfo();167 }168 169 /// 上一页170 function previousPage()171 {172 pageIndex--;173 createPageInfo();174 }175 176 /// 末页177 function lastPage()178 {179 pageIndex = pageCount;180 createPageInfo();181 }182 183 /// 控制翻页状态184 function pageStatus()185 {186 btFirst.disabled = true;187 btPrevious.disabled = true;188 btNext.disabled = true;189 btLast.disabled = true;190 btFirst.onclick = "";191 btPrevious.onclick = "";192 btNext.onclick = "";193 btLast.onclick = "";194 195 if(pageIndex > 1)196 {197 btFirst.disabled = false;198 btPrevious.disabled = false;199 btFirst.onclick = firstPage;200 btPrevious.onclick = previousPage;201 }202 if(pageIndex < pageCount)203 {204 btNext.disabled = false;205 btLast.disabled = false;206 btNext.onclick = nextPage;207 btLast.onclick = lastPage;208 }209 var obj = document.getElementById("tableEdit");210 obj.style.display = "none";211 }212 213 /// 检验表单输入是否完整214 function validation()215 {216 newsTitle = document.getElementById("txtNewsTitle").value.trim();217 if(newsTitle == "")218 {219 alert("请输入新闻标题!");220 document.getElementById("txtNewsTitle").focus();221 return false;222 }223 newsBody = document.getElementById("txtNewsBody").value.trim();224 if(newsBody == "")225 {226 alert("请输入新闻内容!");227 document.getElementById("txtNewsBody").focus();228 return false;229 }230 /// 替换 JS 回车符号和空格符号231 newsBody = newsBody.replace(/\r\n/ig,"<br>").replace(" "," ");232 return true;233 }234 235 String.prototype.trim = function()236 {237 // 用正则表达式将前后空格238 // 用空字符串替代。239 return this.replace(/(^\s*)|(\s*$)/g,"");240 }241 242 /// 添加新闻操作243 function addNews()244 {245 var obj = document.getElementById("tableEdit");246 obj.style.display = "block";247 cmd = "Add";248 document.getElementById("txtNewsTitle").value = "";249 document.getElementById("txtNewsBody").value = "";250 }251 252 /// 撤销操作253 function cancel()254 {255 var obj = document.getElementById("tableEdit");256 obj.style.display = "none";257 cmd = "";258 }259 260 /// 保存方法261 function Save()262 {263 if(cmd == "Add")264 {265 addNew();266 }267 else if(cmd == "Edit")268 {269 editNew();270 }271 createPageInfo();272 }273 274 /// 新增新闻内容275 function addNew()276 {277 if(!validation()) return;278 /// 创建一个 GUID 做为新闻 ID279 var TypeLib = new ActiveXObject("Scriptlet.TypeLib");280 newsID = TypeLib.Guid;281 282 /// 创建新闻节点283 var item = doc.createElement("Item");284 /// 添加 id 属性285 var id = doc.createAttribute("id");286 id.value = newsID;287 item.setAttributeNode(id);288 /// 创建新闻标题节点289 var titleNode = doc.createElement("NewsTitle");290 titleNode.text = newsTitle;291 item.appendChild(titleNode);292 /// 创建新闻内容节点293 var bodyNode = doc.createElement("NewsBody");294 bodyNode.text = newsBody;295 item.appendChild(bodyNode);296 doc.documentElement.appendChild(item);297 saveXml();298 }299 300 /// 修改新闻操作301 function editNews(id)302 {303 newsID = id;304 var item = doc.selectSingleNode("Data/Item[@id='"+newsID+"']");305 if(item != null)306 {307 newsTitle = item.selectSingleNode("NewsTitle").text;308 newsBody = item.selectSingleNode("NewsBody").text;309 while(newsBody.indexOf("<br>")> -1)310 {311 newsBody = newsBody.replace("<br>","\r")312 }313 newsBody= newsBody.replace(" "," ");314 document.getElementById("txtNewsTitle").value = newsTitle;315 document.getElementById("txtNewsBody").value = newsBody;316 var obj = document.getElementById("tableEdit");317 obj.style.display = "block";318 cmd = "Edit";319 }320 }321 322 /// 修改新闻内容323 function editNew()324 {325 if(!validation()) return;326 327 var item = doc.selectSingleNode("Data/Item[@id='"+newsID+"']");328 if(item != null)329 {330 item.selectSingleNode("NewsTitle").text = newsTitle;331 item.selectSingleNode("NewsBody").text = newsBody;332 }333 saveXml();334 }335 336 /// 删除新闻操作337 function deleteNews()338 {339 if(!confirm("确认删除所选项吗？"))340 {341 return false;342 }343 344 var checkboxs = document.getElementsByTagName("input");345 if(checkboxs.length > 0)346 {347 for(var i = 0;i<checkboxs.length;i++)348 {349 if(checkboxs[i].type=="checkbox" && checkboxs[i].id.indexOf("chkDel")> -1 && checkboxs[i].checked)350 {351 newsID = checkboxs[i].parentNode.parentNode.id.substring(("NewsTitle").length);352 deleteNew(newsID);353 }354 }355 356 }357 createPageInfo();358 }359 /// 删除新闻360 function deleteNew(id)361 {362 var item = doc.selectSingleNode("Data/Item[@id='"+id+"']");363 if(item != null)364 {365 doc.documentElement.removeChild(item);366 }367 saveXml();368 }369 370 /// 保存 XML371 function saveXml()372 {373 /*374 var xmlbody = doc.documentElement.xml;375 xmlbody = "<?xml version=\"1.0\" encoding=\"gb2312\" ?>" + xmlbody;376 doc.loadXML(xmlbody);377 doc.save(sourceFile);378 */379 var fso, tempfolder, xmlfile, schar; 380 fso = new ActiveXObject("Scripting.FileSystemObject"); 381 tempfolder = fso.GetSpecialFolder(0);382 /// 路径问题未解决383 xmlfile = fso.CreateTextFile("D:\\代码相关_JavaScript\\news.xml",true,true);384 schar = '\r'; 385 xmlfile.WriteLine('<?xml version="1.0" encoding="UTF-16" ?>'+schar); 386 xmlfile.WriteLine(doc.documentElement.xml);387 xmlfile.Close();388 }389 390 /// 控制文本框只输入数字391 function numberText()392 {393 if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57)) || (window.event.keyCode == 13) || (window.event.keyCode == 46) || (window.event.keyCode == 45))){394 window.event.keyCode = 0 ;395 }396 }397 398 /// 全选399 function selectAll(status)400 {401 var checkboxs = document.getElementsByTagName("input");402 if(checkboxs.length > 0)403 {404 for(var i = 0;i<checkboxs.length;i++)405 {406 if(checkboxs[i].type=="checkbox" && checkboxs[i].id.indexOf("chkDel")> -1)407 {408 checkboxs[i].checked = status;409 }410 }411 }412 }413 414 /// 显示/隐藏 正文415 function showNewsBody(obj,bodyID)416 {417 var body = document.getElementById(bodyID);418 if(body == null) return;419 420 if(body.style.display == "none")421 {422 body.style.display = "block";423 obj.innerText = "隐藏";424 }425 else426 {427 body.style.display = "none";428 obj.innerText = "显示";429 }430 }431 432 /// JS获取绝对路径方法，测试不成功 \文件名。 \n 就没用了433 function serverMapPath(s)434 {435 var m = new Image();436 m.src = s;437 return m.src;438 }439 /**/440  </script>441 442 <link href="css/css.css" rel="stylesheet" type="text/css">443 </head>444 <body>445 <form name="myform">446 <table id="tableEdit" border="1" cellpadding="0" cellspacing="0" align="center" width="90%" style="display:none">447 <tr bgcolor="Gainsboro">448 <td colspan="2">449 编辑新闻信息450 </td>451 </tr>452 <tr>453 <td>454 新闻标题：</td>455 <td>456 <input id="txtNewsTitle" type="text" maxlength="50" style="width: 600px" /></td>457 </tr>458 <tr>459 <td>460 新闻内容：</td>461 <td>462 <textarea id="txtNewsBody" rows="10" style="width: 600px"></textarea></td>463 </tr>464 <tr>465 <td colspan="2" align="center">466 <input type="button" id="btSave" value="Save" onclick="Save();" />467 <input type="button" id="btCancel" value="Cancel" onclick="cancel();"/>468 </td>469 </tr>470 </table>471 <table id="dataTable" border="1" cellpadding="0" cellspacing="0" align="center" width="90%">472 <tr>473 <td align="center" colspan="4">474 <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">475 <tr>476 <td bgcolor="Gainsboro">477 查询：478 </td>479 <td>480 <input type="text" id="txtSearchValue" maxlength="50" />481 </td>482 <td>483 <input id="btSearch" type="button" value="Search" onclick="createPageInfo();"/>484 </td>485 <td>486 每页显示记录数：<input type="text" id="txtPageSize" size="10" value="10" maxlength="3" onkeypress="numberText();" />487 </td>488 <td>489 总记录数：<font color="red" id="ShowRowCount"></font>,页码<font color="red" id="ShowPageIndex"></font>/<font color="red" id="ShowPageCount"></font> 490 <a href="#" id="btFirst" onclick="">首页</a> <a href="#" id="btPrevious" onclick="">上页</a>491 <a href="#" id="btNext" onclick="">下页</a> <a href="#" id="btLast" onclick="">末页</a>492 </td>493 <td>494 <input type="button" id="btAdd" value="AddNew" onclick="addNews();" />495 <input type="button" id="btDelete" value="Delete" onclick="return deleteNews();" />496 </td>497 </tr>498 </table>499 </td>500 </tr>501 <tr bgcolor="Gainsboro">502 <td align="center" width="50px">503 <input type="checkbox" id="chkAll" onclick="javascript:selectAll(this.checked);" />504 </td>505 <td align="center" width="50px">506 <b>明细</b>507 </td>508 <td align="center" width="700px">509 <b>新闻标题</b>510 </td>511 <td align="center" width="50px">512 <b>编辑</b>513 </td>514 </tr>515 </table>516 </form>517 518 <script language="javascript">519 page_Load();520 </script>521 522 </body>523 </html> |
|
|
来自： 悟静 > 《JavaScript》
