這幾天遇到個input + tree 實現搜索功能的需求，在這里貼出來供大家參考下，如果你有更好的實現效果希望不膩賜教！
首先給大家看看效果 小二 上圖 ：
需要的部件知識： easyui API
方法：
select target 選擇一個節點，'target'參數表示節點的DOM對象。
expand target 展開一個節點，'target'參數表示節點的DOM對象。在節點關閉或沒有子節點的時候，節點ID的值(名為'id'的參數)將會發送給服務器請求子節點的數據。
在遇到這個問題的時候，不知道如何下手 ，於是查找相關的資料 找到了 ， 不過跟我的又不相同
http://blog.csdn.net/huyongl1989/article/details/9450753
下面我就說說我的思路吧 ：
1.在系統啟動時，會默認加載若干個樹節點數據(因為我的樹的數據量比較大，所以不是一次性把數據全部加載完，而是用戶點擊展開某個節點時，
再去數據庫加載相應節點的數據，如果是數據量比較小的話， 可以將所有節點一次性加載完成，在這個的基礎上做搜索定位會簡單很多）
2.當用戶輸入某個要定位節點的名稱之后，我會去數據庫中進行模糊匹配，找出該名稱的節點可能為哪些個。如果只匹配到一個則直接定位，
如果匹配了多個，則將這些節點的詳細信息展示出來，讓用戶自己選擇去定位具體的哪一個節點。
3.當用戶選擇定位某個節點后，再去數據庫中查找相關的節點信息。
4.在查詢出這些數據之后，我會將樹的原來的數據源給替換成要定位的數據也是數據data
5.在對樹的數據源進行更新處理之后，只需要將指定的節點展開，然后將定位設置為選中狀態並讓其處於當前窗口的視野范圍內就達到了搜索定位的效果。
當用戶單擊查詢按鈕時，把輸入框的值傳入到控制器，讓后台處理得到 輸入值的父節點(也許父節點任有父節點，所以要把全部的上級都給查出來)
然后根據最高級節點依次展開，這樣就實現了我的搜索功能！
下面廢話不多說直接 上代碼 ：
function cityTree1JudicialdoSearch() {
$("#cityTree1").tree('collapseAll');
var root = $("#cityTree1").tree("find", "43");
$("#cityTree1").tree("expand", root.target);
$.ajax({
type: "post",
url: "/JudicialHelp/getAddressIdByName",
data: { AddressName: $("#cityTree1_bt_information").val() },
anysc: true,
success: function (data) {
data = $.parseJSON(data);
for (var i = 0; i < data.length; i++) {
if (data[i].area_lv == "4") {
var rootNode = $("#cityTree1").tree("find", data[i].sf_upbm); //獲取當前節點的父節點
var rootNode1 = $("#cityTree1").tree("getParent", rootNode.target); //獲取當前節點的父節點的父節點
$("#cityTree1").tree("expand", rootNode1.target);
$("#cityTree1").tree("expand", rootNode.target);
var childeNode = $("#cityTree1").tree("find", data[i].sf_dm); //獲取當前節點
$("#cityTree1").tree("select", childeNode.target); //定位當前節點
} else if (data[i].area_lv == "3") {
var rootNode = $("#cityTree1").tree("find", data[i].sf_upbm); //獲取當前節點的父節點
$("#cityTree1").tree("expand", rootNode.target);
var childeNode = $("#cityTree1").tree("find", data[i].sf_dm); //獲取當前節點
$("#cityTree1").tree("select", childeNode.target); //定位當前節點
}
else if (data[i].area_lv == "2") {
var Node = $("#cityTree1").tree("find", data[i].sf_dm); //獲取當前節點
$("#cityTree1").tree("expand", Node.target);
$("#cityTree1").tree("select", Node.target); //定位當前節點
}
}
}
});
}
本篇為原創： 轉載請注明出處 www.cnblogs.com/izhiniao 謝謝！