easy-ui 怎么给目录树加个搜索功能，如下图，先谢了！
在最上面加个框，比如搜索Photos,他就可以定位到！不涉及后台！写个js？初学急！谢了加入下面的代码，tree.html如下：<body><divclass="easy...
在最上面加个框，比如搜索Photos,他就可以定位到！ 不涉及后台 ！ 写个js？初学急 ！谢了
加入下面的代码，
tree.html如下：
<body>
<div class="easyui-panel" style="padding: 5px">
<ul id="tt" class="easyui-tree"
data-options="url:'tree.json',method:'get',animate:true"></ul>
</div>
</body>
tree.json如下:
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}] 展开
加入下面的代码，
tree.html如下：
<body>
<div class="easyui-panel" style="padding: 5px">
<ul id="tt" class="easyui-tree"
data-options="url:'tree.json',method:'get',animate:true"></ul>
</div>
</body>
tree.json如下:
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}] 展开
1个回答
展开全部
Html(这个是直接从W3school上粘的)
<body>
<input type="text" id="findnode"/><input type="button" id="btn" value="btn">
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</body>
JS代码：
$("#btn").click(function(e) {
var arr = $("span[class*='tree-title']");
var str = $("#findnode").val();
if(arr.length<=0)return;
var getObj = null;
for(i = 0; i < arr.length; i++){
if($(arr[i]).html()==str){
getObj = $(arr[i]);break
}
}
if(getObj == null){alert("无此节点")}
else{
$(".tree-node-selected").removeClass("tree-node-selected");
getObj = getObj.parent();
getObj.addClass("tree-node-selected");
getObj = getObj.parent().parent();
getObj.css("display","block");
getObj = getObj.parent().children("div");
var collapsed = getObj.children(".tree-collapsed")
if(collapsed){
collapsed.removeClass("tree-collapsed");
collapsed.addClass("tree-expanded");
}
var folderopen = getObj.children(".tree-folder");
if(folderopen){
folderopen.addClass("tree-folder-open");
}
}
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
