2016-10-18 藍(lán)藍(lán)設(shè)計的小編
這里所描述的過程將使你能夠創(chuàng)建一個簡單的基于jQuery / XML的解析器和搜索機(jī)制。此過程將通過一個AJAX請求檢索XML，然后在jQuery中分析數(shù)據(jù)，為搜索機(jī)制做準(zhǔn)備。該解決方案將基于不區(qū)分大小寫的全部或部分關(guān)鍵字匹配地返回結(jié)果。來自于關(guān)鍵字搜索的返回結(jié)果設(shè)置將被格式化為一個直接鏈接到相應(yīng)網(wǎng)站的超鏈接。jQuery搜索方法非常類似于Mike Endale的一個項目，不過增加了一個DOM解析器，正則表達(dá)式以及結(jié)果集分組。
客戶端需要一個簡單的搜索工具來查找基于關(guān)鍵字搜索的本地內(nèi)部網(wǎng)站。關(guān)鍵字搜索必須不區(qū)分大小寫，并允許返回部分匹配的結(jié)果。歸咎于客戶端內(nèi)容管理系統(tǒng)的架構(gòu)，因此（SharePoint）只能執(zhí)行客戶端腳本。其解決方案的另一個障礙是，源數(shù)據(jù)將來自多個源。數(shù)據(jù)被存儲在多個Excel電子表格，CSV文件和MS Access數(shù)據(jù)庫內(nèi)。這就對我們提出了這樣的需要：開發(fā)具有一系列查詢和一個宏的Access解決方案，充當(dāng)可合并、擦洗，并最后格式化數(shù)據(jù)作為XML輸出的偽ETL。對于這個解決方案的目的，我們將詳細(xì)介紹JavaScript XML分析器的設(shè)計，而不是偽Access ETL宏工具的設(shè)計。
該解決方案的做法是利用一個簡單的基于JavaScript / XML的搜索來發(fā)送數(shù)據(jù)結(jié)果到HTML / JavaScript前端。前端將引用腳本：jQuery，XML和CSS文件。XML格式將因為它的可讀性和它是數(shù)據(jù)交換行業(yè)標(biāo)準(zhǔn)格式之一的事實而被使用。 XML數(shù)據(jù)將通過使用AJAX的客戶端jQuery解析，并通過Internet Explorer 11呈現(xiàn)。
解決方案將使用RegExp對象來處理關(guān)鍵字匹配，驗證和特殊字符處理。RegExp對象字符串將檢查危險語法從而提高解決方案的穩(wěn)定性和整體可用性。
我們將默認(rèn)使用JavaScript分組功能來返回匹配結(jié)果作為折疊的紀(jì)錄集。折疊的記錄集線項目將被URL鏈接到相關(guān)的Project Workspace網(wǎng)站。在擴(kuò)展的組記錄集下，結(jié)果將存在于相關(guān)的子記錄中，當(dāng)通過On Click事件展開的時候。
解析器函數(shù)有一個復(fù)雜的帶有節(jié)點和屬性的層次XML樹，并且將它轉(zhuǎn)變成等價的JavaScript對象和屬性。客戶端基于JavaScript / XML的搜索需要經(jīng)過以下步驟：
1.偽ETL工具準(zhǔn)備數(shù)據(jù)到XML文件（本項目不包括這一步驟）
2.此XML文件加載到指定的位置（本項目不包括這一步驟）
3.在點擊事件發(fā)生時，JavaScript解析器將使用AJAX方法加載XML數(shù)據(jù)
4.檢查搜索中關(guān)鍵字的存在
5.如果有節(jié)點包含URL屬性的字符串，那么節(jié)點加入到數(shù)組中。
6.RegExp對象關(guān)鍵字通過替代匹配特殊字符處理
7.RegExp對象關(guān)鍵字匹配轉(zhuǎn)換為不區(qū)分大小寫
8.循環(huán)數(shù)組匹配基于驗證的RegExp對象
9.用斑馬條紋的奇數(shù)和偶數(shù)行對組構(gòu)建結(jié)果集
10.用相關(guān)的Work Order構(gòu)建組匹配PPID行作為子組
11.填充結(jié)果，然后將它們傳遞到最后呈現(xiàn)的集合
12.顯示具有列和所有分組標(biāo)題的結(jié)果集合
用戶界面是一個簡單的基于HTML / JavaScript客戶端搜索來返回關(guān)鍵字匹配結(jié)果——默認(rèn)為折疊和分組的記錄集合。以行項目顯示的折疊紀(jì)錄集合直接URL鏈接到相關(guān)項目的網(wǎng)站。在擴(kuò)展組記錄集合下，結(jié)果在On Click事件擴(kuò)大時將保留相關(guān)的子記錄。
我們需要做的第一件事是引用我們的腳本：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>
你會發(fā)現(xiàn)我們已經(jīng)添加了xmlData屬性到search.js引用。這是傳遞來自于HTML文件的XML文件位置的最佳方式。如果你有你有多個項目xml文件想要用作為數(shù)據(jù)源的話，那么這就很有幫助。
XML數(shù)據(jù)源可以以任何方式或任何大小來構(gòu)造；但建議保持源XML文件小于1 MB，以便于保持適當(dāng)?shù)姆治銎黜憫?yīng)時間。下面是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>
對于這個項目，我們已經(jīng)在兩個關(guān)鍵領(lǐng)域使用過錯誤處理。如果沒有關(guān)鍵字存在，那么錯誤消息“Please enter a search keyword”將出現(xiàn)。如果沒有個結(jié)果生成，則拋出錯誤消息“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>';
我們將通過預(yù)定義的能在頁面級別啟用的jQuery庫通過異步JavaScript函數(shù)調(diào)用XML。 AJAX的全稱是“異Asynchronous JavaScript and XML”，由Jesse James Garrett，Adaptive Path的創(chuàng)始人所杜撰。AJAX依賴于XMLHttpRequest，CSS，DOM和其他技術(shù)。AJAX的主要特點是它的“異步”性質(zhì)，這意味著它可以從服務(wù)器而無需刷新頁面來發(fā)送和接收數(shù)據(jù)。在異步模式中，客戶端和服務(wù)器會獨立地工作，以及獨立地進(jìn)行通信，從而允許用戶持續(xù)與網(wǎng)頁交互，不管服務(wù)器上發(fā)生了什么。
function searchThis() {
$.ajax({
type: "GET",
url: XMLSource,
dataType: "xml",
success: function (xml) {
loadPublication(xml)
}
});
}
由于jQuery本身不能解析XML字符串；我們將充分利用瀏覽器的DOM解析方法——大多數(shù)瀏覽器以這種或那種形式支持?；鸷?，Chrome，Safari以及的Internet Explorer瀏覽器均支持這種方法，它們都具有DOMParser對象。較早的Internet Explorer瀏覽器（如IE 8）使用其專有的ActiveX對象?？梢詣?chuàng)建跨瀏覽器的解決方案，來檢查是否缺少DOMParser，但這超出了這個項目的范圍，但是可能以后在額外的跨瀏覽器支持中會添加。
知道JavaScript RegExp（正則表達(dá)式）功能和語法來處理任意特殊字符。同時通過定義正則表達(dá)式來忽略大小寫，以便于在關(guān)鍵字搜索時更加友好。
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客戶端搜索來返回關(guān)鍵字匹配結(jié)果默認(rèn)為折疊又分組的記錄集合。以行項目顯示的折疊紀(jì)錄集合直接URL鏈接到相關(guān)項目的網(wǎng)站。在擴(kuò)展組記錄集合下，結(jié)果在On Click事件擴(kuò)大時將保留相關(guān)的子記錄。
//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;
}
}
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com