白开心

  IT博客 :: 首页 ::  :: 联系 :: 聚合  :: 管理 ::
  9 随笔 :: 76 文章 :: 28 评论 :: 0 Trackbacks
  1<html>
  2<head>
  3    <title>Javascript 操作 XML 示例</title>
  4
  5    <script language="javascript">
  6    /*
  7    * Create By HJ
  8    * 2008-6-29
  9    */

 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 支持 xpath
 34            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            else
 51            {
 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(" ","&nbsp;&nbsp;");
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 做为新闻 ID
279            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("&nbsp;&nbsp;"," ");
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        /// 保存 XML
371        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 == nullreturn;
419            
420            if(body.style.display == "none")
421            {
422                body.style.display = "block";
423                obj.innerText = "隐藏";
424            }

425            else
426            {
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>&nbsp;&nbsp;
490                                <href="#" id="btFirst" onclick="">首页</a> <href="#" id="btPrevious" onclick="">上页</a>
491                                <href="#" id="btNext" onclick="">下页</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>



Xml
************************************

1<?xml version="1.0" encoding="UTF-16" ?>
2<Data>
3<Item id="{C960F5F0-43A8-41ED-93DB-398BFDD75F00}">
4<NewsTitle>新闻标题</NewsTitle>
5<NewsBody>新闻内容</NewsBody>
6</Item>
7</Data>
posted on 2008-06-28 21:47 白开心 阅读(1477) 评论(3)  编辑 收藏 引用 所属分类: JavaScript

评论

# re: JS操作Xml的相关方法 2011-05-06 16:45 huyang
晕,哥啊,你做好人就做到底啊,把那序号到放上面,害我删了半天。  回复  更多评论
  

# re: JS操作Xml的相关方法 2012-10-17 15:44 小吾
这这这,看的人头晕了,先弄过去测试下,谢谢博主了,太厉害了!  回复  更多评论
  

# re: JS操作Xml的相关方法[未登录] 2012-12-02 16:38 11
不能保丰到服务器上?  回复  更多评论
  

只有注册用户登录后才能发表评论。