2016-10-18 藍藍設計的小編
這里所描述的過程將使你能夠創建一個簡單的基于jQuery / XML的解析器和搜索機制。此過程將通過一個AJAX請求檢索XML，然后在jQuery中分析數據，為搜索機制做準備。該解決方案將基于不區分大小寫的全部或部分關鍵字匹配地返回結果。來自于關鍵字搜索的返回結果設置將被格式化為一個直接鏈接到相應網站的超鏈接。jQuery搜索方法非常類似于Mike Endale的一個項目，不過增加了一個DOM解析器，正則表達式以及結果集分組。
客戶端需要一個簡單的搜索工具來查找基于關鍵字搜索的本地內部網站。關鍵字搜索必須不區分大小寫，并允許返回部分匹配的結果。歸咎于客戶端內容管理系統的架構，因此（SharePoint）只能執行客戶端腳本。其解決方案的另一個障礙是，源數據將來自多個源。數據被存儲在多個Excel電子表格，CSV文件和MS Access數據庫內。這就對我們提出了這樣的需要：開發具有一系列查詢和一個宏的Access解決方案，充當可合并、擦洗，并最后格式化數據作為XML輸出的偽ETL。對于這個解決方案的目的，我們將詳細介紹JavaScript XML分析器的設計，而不是偽Access ETL宏工具的設計。
該解決方案的做法是利用一個簡單的基于JavaScript / XML的搜索來發送數據結果到HTML / JavaScript前端。前端將引用腳本：jQuery，XML和CSS文件。XML格式將因為它的可讀性和它是數據交換行業標準格式之一的事實而被使用。 XML數據將通過使用AJAX的客戶端jQuery解析，并通過Internet Explorer 11呈現。
解決方案將使用RegExp對象來處理關鍵字匹配，驗證和特殊字符處理。RegExp對象字符串將檢查危險語法從而提高解決方案的穩定性和整體可用性。
我們將默認使用JavaScript分組功能來返回匹配結果作為折疊的紀錄集。折疊的記錄集線項目將被URL鏈接到相關的Project Workspace網站。在擴展的組記錄集下，結果將存在于相關的子記錄中，當通過On Click事件展開的時候。
解析器函數有一個復雜的帶有節點和屬性的層次XML樹，并且將它轉變成等價的JavaScript對象和屬性。客戶端基于JavaScript / XML的搜索需要經過以下步驟：
1.偽ETL工具準備數據到XML文件（本項目不包括這一步驟）
2.此XML文件加載到指定的位置（本項目不包括這一步驟）
3.在點擊事件發生時，JavaScript解析器將使用AJAX方法加載XML數據
4.檢查搜索中關鍵字的存在
5.如果有節點包含URL屬性的字符串，那么節點加入到數組中。
6.RegExp對象關鍵字通過替代匹配特殊字符處理
7.RegExp對象關鍵字匹配轉換為不區分大小寫
8.循環數組匹配基于驗證的RegExp對象
9.用斑馬條紋的奇數和偶數行對組構建結果集
10.用相關的Work Order構建組匹配PPID行作為子組
11.填充結果，然后將它們傳遞到最后呈現的集合
12.顯示具有列和所有分組標題的結果集合
用戶界面是一個簡單的基于HTML / JavaScript客戶端搜索來返回關鍵字匹配結果——默認為折疊和分組的記錄集合。以行項目顯示的折疊紀錄集合直接URL鏈接到相關項目的網站。在擴展組記錄集合下，結果在On Click事件擴大時將保留相關的子記錄。
我們需要做的第一件事是引用我們的腳本：jQuery，XML和CSS文件。
<link rel="stylesheet" href="path/default.css" /> <script type="text/javascript" src="path/jquery-1.4.2.min.js"></script> <script id="data" type="text/javascript" src="path/search.js" xmlData="data.xml"></script> <input id="term" type="text"/> < input name="Search" id="searchButton" type="button" value="Search"/> <div id="result">< /div>
你會發現我們已經添加了xmlData屬性到search.js引用。這是傳遞來自于HTML文件的XML文件位置的最佳方式。如果你有你有多個項目xml文件想要用作為數據源的話，那么這就很有幫助。
XML數據源可以以任何方式或任何大小來構造；但建議保持源XML文件小于1 MB，以便于保持適當的分析器響應時間。下面是XML源用于此項目的一個例子：
<?xml version="1.0" encoding="UTF-8"?> <dataroot generated="2015-11-20T10:30" xmlns:od="urn:schemas-microsoft-com:officedata"> <etl> <PPID Lead="Slow,Roy" Description="NORTH OF FAIR" PID="P002"> <WO Description="SHELTON - BANK (SAFETY)" PM="Slow,Roy" Status="CLOSED" WID="305577" WOXREF="SHEL" Program="REINFORCEMENT"> </WO> <Archive>Archived</Archive> <record search="P002NORTH OF FAIRSHELSHELTON 305577SHELTON - BANK (SAFETY)Slow,Roy"/> <url address="P002"/> </PPID> </etl> </dataroot>
對于這個項目，我們已經在兩個關鍵領域使用過錯誤處理。如果沒有關鍵字存在，那么錯誤消息“Please enter a search keyword”將出現。如果沒有個結果生成，則拋出錯誤消息“No results were found!”。
//Check if a keyword exists if (keyword == '') {
errMsg += 'Please enter a search keyword';
} else {
searchThis();
}
if (i == 0) { pub += '< div>'; pub += 'No results were found!'; pub += '< /div>';
我們將通過預定義的能在頁面級別啟用的jQuery庫通過異步JavaScript函數調用XML。 AJAX的全稱是“異Asynchronous JavaScript and XML”，由Jesse James Garrett，Adaptive Path的創始人所杜撰。AJAX依賴于XMLHttpRequest，CSS，DOM和其他技術。AJAX的主要特點是它的“異步”性質，這意味著它可以從服務器而無需刷新頁面來發送和接收數據。在異步模式中，客戶端和服務器會獨立地工作，以及獨立地進行通信，從而允許用戶持續與網頁交互，不管服務器上發生了什么。
function searchThis() {
$.ajax({
type: "GET",
url: XMLSource,
dataType: "xml",
success: function (xml) {
loadPublication(xml)
}
});
}
由于jQuery本身不能解析XML字符串；我們將充分利用瀏覽器的DOM解析方法——大多數瀏覽器以這種或那種形式支持。火狐，Chrome，Safari以及的Internet Explorer瀏覽器均支持這種方法，它們都具有DOMParser對象。較早的Internet Explorer瀏覽器（如IE 8）使用其專有的ActiveX對象。可以創建跨瀏覽器的解決方案，來檢查是否缺少DOMParser，但這超出了這個項目的范圍，但是可能以后在額外的跨瀏覽器支持中會添加。
知道JavaScript RegExp（正則表達式）功能和語法來處理任意特殊字符。同時通過定義正則表達式來忽略大小寫，以便于在關鍵字搜索時更加友好。
function loadPublication(xmlData) {
i = 0; var row; var searchExp = ""; var ppid = "P";
$(xmlData).find('PPID').each(function () { // Check if a site URL attr exists if($(this).find('url').attr('address').length) { //Set the search string Variables var record = $(this).find('record').attr('search'); var archive = $(this).find('Archive'); //Escape characters in keyword expression and use global match RegExp.escape = function(keyword) { return keyword.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}; //Keyword expression will be case agnostic var exp = new RegExp(keyword, "i"); //Use formated keyword as the default search searchExp = record.match(exp); //If the search expression is not null if (searchExp != null) { //Start building the result if ((i % 2) == 0) {
row = 'even';
} else {
row = 'odd';
} if($(this).attr('PID') != ppid) {
ppid = $(this).attr('PID');
i++;
用戶界面是一個簡單的基于HTML / JavaScript客戶端搜索來返回關鍵字匹配結果默認為折疊又分組的記錄集合。以行項目顯示的折疊紀錄集合直接URL鏈接到相關項目的網站。在擴展組記錄集合下，結果在On Click事件擴大時將保留相關的子記錄。
//Grouping of the results function expgroupby(e) {
docElts=document.all;
numElts=docElts.length;
images = e.getElementsByTagName("IMG");
img=images[0];
srcPath=img.src;
index=srcPath.lastIndexOf("/");
imgName=srcPath.slice(index+1); var b="auto"; if(imgName=="plus.gif"){
b="";
img.src="/_layouts/images/minus.gif" }else{
b="none";
img.src="/_layouts/images/plus.gif" }
oldName=img.name;
img.name=img.alt;
spanNode=img; while(spanNode!=null){
spanNode=spanNode.parentNode; if(spanNode!=null&&spanNode.id!=null&&spanNode.id=="wrapper")break } while(spanNode.nextSibling!=null&&spanNode.nextSibling.id!="wrapper"){
spanNode=spanNode.nextSibling;
spanNode.style.display=b;
}
}
下面是這個項目完整的源代碼例子。
//Full source $(document).ready(function () { //Global Variables var XMLSource = $('#data').attr('xmlData'); var keyword = ''; var pub = ''; var i = 0;
$("#searchButton").click(function () {
keyword = $("input#term").val(); //Reset any message var errMsg = '';
pub = ''; //Check if a keyword exists if (keyword == '') {
errMsg += 'Please enter a search keyword';
} else {
searchThis();
} if (errMsg != '') {
pub += '< div>';
pub += errMsg;
pub += '< /div>';
} //Show error $('#result').html(pub);
}); //Use enter key to trigger the search query $("input#term").keypress(function (e) { var key = e.which; if (key == 13){
$("#searchButton").click(); return false;
}
}); function searchThis() {
$.ajax({
type: "GET",
url: XMLSource,
dataType: "xml",
success: function (xml) {
loadPublication(xml)
}
});
} function loadPublication(xmlData) {
i = 0; var row; var searchExp = ""; var ppid = "P";
$(xmlData).find('PPID').each(function () { // Check if a site URL attr exists if($(this).find('url').attr('address').length) { var record = $(this).find('record').attr('search'); var archive = $(this).find('Archive'); //Escape characters in keyword expression and use global match RegExp.escape = function(keyword) { return keyword.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}; //Keyword expression will be case agnostic var exp = new RegExp(keyword, "i"); //Use formated keyword as the default search searchExp = record.match(exp); //If the search expression is not null if (searchExp != null) { //Start building the result if ((i % 2) == 0) {
row = 'even';
} else {
row = 'odd';
} if($(this).attr('PID') != ppid) {
ppid = $(this).attr('PID');
i++; //Grouped header row with URL links from the xml attr pub += '< tr id="wrapper"code-string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(128, 0, 128);">'">'
+ '< td colspan="8">'
+ '< a onclick="javascript:expgroupby(this);return false;" href="javascript:">'
+ '< img name="collapse" alt="expand" src="/_layouts/images/plus.gif" border="0" />< /a>'
+ '< a href="http://project.com/sites/tp/Projects/' + $(this).find('url').attr('address') + '">' + ' ' + $(this).attr('PID')+ ' - ' + $(this).attr('Description') + ' - ' + $(this).attr('Lead') + '< /a>< /td>' + '</tr>';
} //Bottom grouped expand detail fields pub += '<tr id="item" style="display: none;">' + '< td valign="top">' + $(this).find('WO').attr('WID') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Description') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('PM') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Status') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('WOXREF') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Program') + '< /td>' + '< td valign="top">' + $(this).find('Archive').text() + '< /td>' + '< /tr>';
}
}
}); if (i == 0) {
pub += '< div>';
pub += 'No results were found!';
pub += '< /div>'; //Populate the result $('#result').html(pub);
} else { //Pass the result set showResult(pub);
}
} function showResult(resultSet) { //Show the result with the titles of the column fields pub = '< div>There are ' + i + ' results!< /div>';
pub += '< table id="grid" border="0">';
pub += '< thead>< tr>< td>< th>PPID - Project Description - Lead PM< /th>< /td>< /tr>';
pub += '< tr>< th>WO Number< /th>';
pub += '< th>WO Description< /th>';
pub += '< th>Project Manager< /th>';
pub += '< th>Status< /th>';
pub += '< th>XRef< /th>';
pub += '< th>Program< /th>';
pub += '< th>Archive Status< /th>';
pub += '< /tr>< /thead>';
pub += '< tbody>';
pub += resultSet;
pub += '< /tbody>';
pub += '< /table>'; //Populate the results $('#result').html(pub)
$('#grid').tablesorter();
}
}); //Grouping of the results function expgroupby(e) {
docElts=document.all;
numElts=docElts.length;
images = e.getElementsByTagName("IMG");
img=images[0];
srcPath=img.src;
index=srcPath.lastIndexOf("/");
imgName=srcPath.slice(index+1); var b="auto"; if(imgName=="plus.gif"){
b="";
img.src="/_layouts/images/minus.gif" }else{
b="none";
img.src="/_layouts/images/plus.gif" }
oldName=img.name;
img.name=img.alt;
spanNode=img; while(spanNode!=null){
spanNode=spanNode.parentNode; if(spanNode!=null&&spanNode.id!=null&&spanNode.id=="wrapper")break } while(spanNode.nextSibling!=null&&spanNode.nextSibling.id!="wrapper"){
spanNode=spanNode.nextSibling;
spanNode.style.display=b;
}
}
藍藍設計( www.devb.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務