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()什麼什麼;就是把你點擊父元素的事件再寫一遍。注意我寫的是比如,你不要照抄後到時來告訴我這不行那不行,大概思路是這樣的,應該沒錯
})