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()什么什么；就是把你点击父元素的事件再写一遍。注意我写的是比如，你不要照抄后到时来告诉我这不行那不行，大概思路是这样的，应该没错
})