jq目錄樹
① Java，jQuery tree，樹形的控制項不少，但樣式都不太好，以ztree舉例，如何改它文件夾的
不知道改就不要改了 不要把別人的東西改亂了 到時候自己也糊塗了 JQUERY插件都是很靈活的 不會像你說的那樣沒有文件夾樣式的 我之前都看到了有文件夾的 你隨便搜一下就出來了
② jquery 樹形菜單，但是頁面一載入它默認全都展開了，有沒有語句讓它載入時全都收起，點擊再展開
找到初始化裡面的代碼 去掉展開的代碼 如果頁面在不加這個jquery的情況下是展開著的 那就在初始化方法里用他收起的方法把他們都收起來
③ 關於jQuery的ztree製作樹形菜單的問題
這個應該不難吧。。抄你先去網上下個Dtree的目錄樹例子（如果找不到，我可以發個你）。在後台傳一個list進來。這個list保存的對象有個屬性是子節點的list。在後台處理好後，在前台用c標簽遍歷這個list，可以根據varstatus.index來控制tree的節點。
④ 怎麼實現jQuery樹（tree）的文件拖動功能還有獲取父節點（getparent），子節點（getchilren)的功能
這是Jquery UI官網上的一個例子，我改了一下，你直接復制就能用了。
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>jQueryUIDraggable+Sortable</title>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
ul{list-style-type:none;margin:0;padding:0;margin-bottom:10px;}
li{margin:5px;padding:5px;width:150px;}
</style>
<script>
$(function(){
$("#sortable").sortable({revert:true});
$("#draggable").draggable({
connectToSortable:"#sortable",
helper:"clone",
revert:"invalid"
});
$("ul,li").disableSelection();
});
</script>
</head>
<body>
<ulid="sortable">
<liclass="ui-state-default">File1</li><!--上下拖動-->
<liclass="ui-state-default">File2</li><!--上下拖動-->
<liclass="ui-state-default">File3</li><!--上下拖動-->
<liclass="ui-state-default">File4</li><!--上下拖動-->
<liclass="ui-state-default">File5</li><!--上下拖動-->
</ul>
</body>
</html>
⑤ jquery tabpanel 怎麼設定 title等於目錄樹的文本
你好！！
可以在<a href="javascript:addTabPanel();">傳遞自身作為參數；比如：
<ahref="javascript:addTabPanel(this);">訂單管理</a>
同樣在addTabPanel(obj)中增加一個參數；
functionaddTabPanel(obj){
//不了解你的函數如何處理，但是一定會有一個設置title的方法
setTitle(obj.innerHTML);
}
⑥ jquery，ext，easyui實現樹形菜單-感謝您的幫助
前台EXT發送請求，後台java用File類去獲取特定目錄下的的文件，然後文件名轉化成json格式傳回ext然後ext再創建樹的節點...感覺要做出來也要一些代碼...
⑦ （JQuery）如何給JsTree生成的樹的每個節點添加上自定義的右鍵菜單
一個帶有右鍵操作的樹形菜單
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#browser").tree({
data:{
type:"json",
url:src,
async:true,
async_data:function(NODE){
return{parent_Id:$(NODE).attr("id")||0}
}
},
lang:{
loading:"目錄載入中……"
},
rules:
{
draggable:"all"//這個設置可以使得節點進行拖動操作
},
ui:{
context:[//自定義右鍵操作的可操作內容
{
id:"create",
label:"添加下級目錄",//右鍵彈出菜單的此項操作屏顯字樣
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},//允許節點被右擊時出現操作菜單
icon:"<%=request.getContextPath()%>/css/themes/default/create.png",//右鍵彈出菜單的此項操作圖標
action:function(NODE,TREE_OBJ){
//進行此項操作，將有這個函數事件被響應
}
},
"separator"//這個是在兩個操作之間畫一條分隔線
,
{
id:"edit",
label:"編輯目錄信息",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/image/reg2.gif",
action:function(NODE,TREE_OBJ){
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator"
,
{
id:"privilege",
label:"設置目錄許可權",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/css/themes/default/rename.png",
action:function(NODE,TREE_OBJ){
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator",
{
id:"delete",
label:"刪除",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/css/themes/default/remove.png",
action:function(NODE,TREE_OBJ){
vartree=$.tree_reference("browser");
openWindow('myurl','','',function(){
//下邊的.parent()和.refresh()均為v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，這些將不被支持。
NODE=$(tree.parent(NODE));
if($(NODE).attr("id")==undefined){
tree.refresh();
}else{
TreeRefresh();
}
});
}
},
"separator",
{
id:"others",
label:"其他操作",
visible:function(NODE,TREE_OBJ){if(NODE.length!=1)returnfalse;returnTREE_OBJ.check("creatable",NODE);},
icon:"<%=request.getContextPath()%>/css/images/cut.png",
action:function(NODE,TREE_OBJ){
alert("暫無可提供操作。");
}
}
]
},
callback:{
onselect:function(node){
//(a);
}
}
});
functiontreeRefresh(nodeid){
varrid=nodeid;
vartree=$.tree_reference("browser");
varpar_node=tree.parent($("#"+rid));
tree.refresh(par_node);
}
});
⑧ 使用jQuery json生成動態的無限分級樹，每個節點不一樣的圖標
給你一個思路：具體代碼自己寫吧。 把樹寫成非同步樹。
代碼可以只寫一個專 eg：xxTree（string id）屬
//判斷id是否為空；如果為空直接載入根幾點下面的第一層；Pid為0
//圖標的類型通過後台判斷是否是葉子節點，如果是葉子節點。返回的json樣式為文件
//不是的話就是文件夾的；
//看的你的JSON你是通過Pid去綁定父節點的ID
step1：初始化載入根節點下面的第一層樹結構。（調用後台代碼，id為空）
step2：點擊一個分支。將id傳入到後台。返回json。非同步的添加下一層樹級結構；
step3：如果下面有N多層 你就慢慢重復step2；可以直接寫好，讓它自己迭代；
對於這樣的樹。你自己拼接json是很費事的一件事。採用第三方控制項吧TreeView。easyui 。jquery ui 都有樹形控制項。
⑨ JavaScript 文件目錄樹
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="心夢緣ocean ocl" />
<title>My tree demo</title>
<style type="text/css">
/*主頁面樣式*/
.leftNav {
width: 20%;
height:500px;
border:#B9E0F7 1px solid;
margin-left: 1%;
margin-right: 1%;
}
#footer {
color:#808080;
line-height: 1.6em;
padding: 0 0 1em 0;
}
/*我的樹樣式表*/
.treeDiv {
color: #636363;
font-size: 14px;
font-weight: normal;
background-color: #fff;
color: black;
overflow: auto;
padding: 0 0 1em 0;
overflow-x: hidden;
}
.treeNode {
white-space: nowrap;
text-indent: -14px;
margin: 6px 2px 5px 14px;
}
a.treeUnselected:hover, a.treeSelected:hover {
background-color: #BFD9ED;
text-decoration: none;
}
a.treeUnselected, a.treeSelected {
color: black;
padding: 1px 3px 1px 0;
text-decoration: none;
}
a.treeSelected {
background-color: #B9E0F7;
}
a.treeUnselected {
background-color: transparent;
}
.treeSubnodes {
display: block;
}
.treeSubnodesHidden {
display: none;
}
.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {
height: 15px;
margin-left: 5px;
margin-right: 0px;
width: 15px;
}
.treeNode img.treeLinkImage {
cursor: pointer;
}
div.treeNode a, div.treeNode span.apiRoot {
display: inline-block;
margin-left: 24px;
text-indent: 0;
white-space: normal;
width: 95%;
word-wrap: break-word;
}
div.treeNode span.category {
cursor: pointer;
}
</style>
</head>
<body>
<div class="leftNav">
<div id="samplesToc">
<div id="tree" style="top: 35px; left: 0px;" class="treeDiv">
<div id="treeRoot" onselectstart="return false" ondragstart="return false">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目錄節點一 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目錄節點一子目錄 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二級葉子結點一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二級葉子結點二</a>
</div>
</div>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點五</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點六</a>
</div>
</div>
</div>
<!--end block-->
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目錄節點二</span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">葉子結點五</a>
</div>
</div>
</div>
<!--end block-->
</div>
</div>
</div> <!-- end samplesToc -->
</div> <!-- end leftNav -->
<div class="right content">
</div><!-- end main content-->
<div id="footer" align="center">
</div><!-- end footer-->
<script type="text/javascript">
var treeSelected = null;//選中的樹節點
var imgPlus = new Image();
imgPlus.src="../graphics/treenodeplus.gif";
var imgMinus = new Image();
imgMinus.src="../graphics/treenodeminus.gif";
//父節點展開事件
function expandCollapse(el)
{
//如果父節點有位元組點（class 屬性為treeSubnodesHidden），展開所有子節點
if (el.className!= "treeNode"){
return; //判斷父節點是否為一個樹節點，如果樹節點不能展開，請檢查是否節點的class屬性是否為treeNode
}
var child;
var imgEl;//圖片子節點，在樹展開時更換圖片
for(var i=0; i < el.childNodes.length; i++)
{
child = el.childNodes[i];
if (child.src)
{
imgEl = child;
}
else if (child.className == "treeSubnodesHidden")
{
child.className = "treeSubnodes";//原來若隱藏，則展開
imgEl.src = imgMinus.src;//更換圖片
break;
}
else if (child.className == "treeSubnodes")
{
child.className = "treeSubnodesHidden";//原來若展開，則隱藏
imgEl.src = imgPlus.src;//更換圖片
break;
}
}
}
//子節點點擊事件，設置選中節點的樣式
function clickAnchor(el)
{
selectNode(el.parentNode);
el.blur();
}
function selectNode(el)
{
if (treeSelected != null)
{
setSubNodeClass(treeSelected, 'A', 'treeUnselected');
}
setSubNodeClass(el, 'A', 'treeSelected');
treeSelected = el;
}
function setSubNodeClass(el, nodeName, className)
{
var child;
for (var i=0; i < el.childNodes.length; i++)
{
child = el.childNodes[i];
if (child.nodeName == nodeName)
{
child.className = className;
break;
}
}
}
</script>
</body>
</html>
運行效果：
⑩ jq怎麼解決樹形菜單點擊子元素也會觸發收起動作
那就給$('.dd-list')的子節寫一次JQ。大概就是:
$('.dd-list').child('div').click(function(){
這里寫一下阻止菜單欄網上回伸的代碼。比如$('this').parent().addClass()什麼什麼；就是把你點擊父元素的事件再寫一遍。注意我寫的是比如，你不要照抄後到時來告訴我這不行那不行，大概思路是這樣的，應該沒錯
})