需求：讀取路徑配置中的相對路徑獲取對應的子文件夾及其子文件并形成樹形結構，加載xml文件，輸入搜索關鍵字匹配xml里面的value節點的值對應的contact值的集合并進行搜索

例如：輸入b，找到xml里面的文本節點等于b的value節點，并找到對應的contact節點獲取對應的文本節點值，結果是3,4，最后匹配的就是文件名包含b或3或4的所有文件并高亮顯示

1、頁面布局

<div><a href="javascript:;" class="easyui-linkbutton">路徑配置</a><input type="text" value="/Images" id="root_path" /><a id="btn_loadxml" href="javascript:;" class="easyui-linkbutton">加載xml</a><input type="text" value="/FilesHelpManager/keyword_config.xml" id="xml_path" /><a id="btn_search" href="javascript:;" class="easyui-linkbutton">搜索</a><input type="text" value="" id="txt_search" /> </div> <div><ul id="path_tree" checkbox="true"></ul> </div> <%--右鍵下載按鈕--%> <div id="right_download" class="easyui-menu" style="width: 120px;"><div onclick="Download();">Download</div> </div>

2、初始化并加載路徑配置下的所有文件夾及其子文件并形成樹形目錄

var $path_tree;$(function () {$path_tree = $('#path_tree');//加載指定文件夾形成樹形目錄 loadTreeDirectorys();//點擊搜索$("#btn_search").on("click", tree_search);//點擊加載xml$("#btn_loadxml").on("click", LoadXml); });//加載指定文件夾形成樹形目錄 function loadTreeDirectorys() {//頁面初始化時加載頁面的樹形菜單$.post("/Handler/FilesHelpManager/FilesHelpHandler.ashx",{"action": "GetFileTree","root_path": $("#root_path").val()//根目錄位置 },function (json) {$("#path_tree").tree({data: json,onContextMenu: function (e, node) {e.preventDefault();$(this).tree('select', node.target);//console.log(node.target);$('#right_download').menu('show', {left: e.pageX,top: e.pageY});}});}, "json"); }

3、后臺讀取子文件夾及其子文件

HttpRequest request; HttpResponse response; public void ProcessRequest(HttpContext context) {request = context.Request;response = context.Response;context.Response.Buffer = true;context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);context.Response.AddHeader("pragma", "no-cache");context.Response.AddHeader("cache-control", "");context.Response.CacheControl = "no-cache";context.Response.ContentType = "text/plain";string action = context.Request["action"];System.Reflection.MethodInfo methodinfo = this.GetType().GetMethod(action);methodinfo.Invoke(this, null); }public void GetFileTree() {StringBuilder strResult = new StringBuilder();string root_path = request.Params["root_path"];string root_path_absolute = HttpContext.Current.Server.MapPath(root_path);strResult.Append("[" GetFilesTree(root_path_absolute,root_path) "]");response.Write(strResult.ToString()); }/// <summary> /// 獲取指定文件夾里的子文件夾和子文件（包括嵌套的） /// </summary> /// <param name="root_path_absolute">絕對路徑</param> /// <param name="root_path">相對于網站根目錄路徑</param> /// <returns></returns> private string GetFilesTree(string root_path_absolute,string root_path) {StringBuilder strResult = new StringBuilder();string[] dirs = Directory.GetDirectories(root_path_absolute);dirs.ToList().ForEach(dir =>{string dir_name = dir.Substring(dir.LastIndexOf('\\') 1);string dir_path = root_path "/" dir_name;if (strResult.Length > 0){strResult.Append(",");}string strDirs = "{\"text\":\"" dir_name "\",\"state\":\"closed\",\"attributes\":{\"dir_src\":\"" dir_path "\"},\"children\":[" GetFilesTree(dir, dir_path) "]}";strResult.Append(strDirs);});string[] files = Directory.GetFiles(root_path_absolute);files.ToList().ForEach(file =>{string filename = file.Substring(file.LastIndexOf('\\') 1);if (strResult.Length > 0){strResult.Append(",");}string strFiles = "{\"text\":\"" filename "\",\"attributes\":{\"file_src\":\"" root_path "/" filename "\"}}";strResult.Append(strFiles);});return strResult.ToString(); } 后臺讀取子文件夾及其子文件

4、點擊加載xml文件（jQuery加載）

定義全局變量用來接收讀取的xml文件內容的值

//循環樹形菜單text然后匹配下面數組 判斷是否包含

var target_obj = [{ keyword: "a", contact_arr: ["1", "2"] }];

//加載xml function LoadXml() {$.ajax({type: "get",url: $("#xml_path").val(),//這里通過設置url屬性來獲取xmldataType: "xml",timeout: 1000, //設定超時cache: false, //禁用緩存success: function (xml) {//這里是解析xml//清空數組對象target_obj = [];$(xml).find("keyword").each(function (i, item) {var $this = $(this);var $value = $this.children("value"); //獲取value節點var $contacts = $this.children("contact"); //獲取contact節點//console.log($value); console.log($contacts);// return;//要準備壓入target_obj數組中的對象var arr_obj = {};arr_obj.keyword = $value.text().trim();arr_obj.contact_arr = new Array();//循環contact節點$.each($contacts, function (j, contact) {arr_obj.contact_arr.push($(contact).text().trim());});target_obj.push(arr_obj);});//console.log(target_obj); }}); } jQuery加載xml文件

5、輸入搜索字符串并點擊搜索

//樹形菜單查找 function tree_search() {//清空之前的所有選項并收縮 clearAllSelect();var search_text = $("#txt_search").val().trim();if (search_text.length <= 0) return;//輸入空字符串不執行任何操作//要循環的匹配數組var target_arr = [];target_arr.push(search_text);$.each(target_obj, function (index,item) {if (item.keyword == search_text) {$.each(item.contact_arr, function (index1, item1) {if (item1.length > 0) target_arr.push(item1)});}}); //console.log(target_arr.join(","));var parentNodes = $path_tree.tree('getRoots'); //得到tree頂級nodevar childrens;//子節點//循環根節點$.each(parentNodes, function (index, parentNode) {childrens = $path_tree.tree('getChildren', parentNode.target);//獲取頂級node下所有子節點if (childrens.length>0) {//如果有子節點//循環所有子節點$.each(childrens, function (child_index, child) {//循環匹配數組$.each(target_arr, function (arr_index, arr_item) {if (child.text.indexOf(arr_item) >= 0) {selectNode(child);//選中當前節點expandParent(child);//打開所有父節點return;//跳出第一層循環 }})});} else {//直接匹配根節點的text//循環匹配數組$.each(target_arr, function (arr_index, arr_item) {if (parentNode.text.indexOf(arr_item) >= 0) {selectNode(parentNode);//選中當前節點expandParent(parentNode);//打開所有父節點return;//跳出第一層循環 }})}}); }de節點 function selectNode(node) {//console.log(node.target);//.tree-node-selected$(node.target).addClass("tree-node-selected");$path_tree.tree('check', node.target);//check select } //取消選中node節點 function unSelectNode(node) {$(node.target).removeClass("tree-node-selected");$path_tree.tree('uncheck', node.target);//check select } //展開子節點對應的所有父節點 function expandParent(node) {var parent = node;var t = true;do {parent = $path_tree.tree('getParent', parent.target); //獲取此節點父節點if (parent) { //如果存在t = true;$path_tree.tree('expand', parent.target);} else {t = false;}} while (t); } //清空所有選擇項 收縮所有節點 function clearAllSelect() {var parentNodes = $path_tree.tree('getRoots'); //得到tree頂級nodevar childrens;//子節點//循環根節點$.each(parentNodes, function (index, parentNode) {childrens = $path_tree.tree('getChildren', parentNode.target);//獲取頂級node下所有子節點if (childrens.length > 0) {//如果有子節點//循環所有子節點$.each(childrens, function (child_index, child) {unSelectNode(child);//取消選中當前節點 });} else {//直接匹配根節點的textunSelectNode(parentNode);//取消選中當前節點 }});//收縮所有$path_tree.tree('collapseAll'); } 搜索并高亮顯示結果

6、右鍵下載文件

//右鍵點擊下載 function Download() {var node = $path_tree.tree('getSelected'); //console.log(node);var url = node.attributes.file_src;var el = document.createElement("a");document.body.appendChild(el);el.href = url; //url 是你得到的連接el.target = '_self'; //指定在新窗口打開el.setAttribute("download", "");//指示不解析 只下載 ie不兼容 el.click();document.body.removeChild(el); } 下載文件，構建a標簽然后點擊之后再移除

?

示例：輸入a，點擊查詢

輸入h，點擊查詢

?

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的easyui树形菜单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。