我正在使用The DynaTree(https://code.google.com/p/dynatree),但我遇到了一些问题并希望有人可以提供帮助..
我正在页面上显示树,如下所示:
<div id="tree">
<ul>
<li class="folder">Outputs
<ul>
<li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title
<li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title
<li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title
<li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
</ul>
</ul>
</div>
但是我试图更改项目上的图标,无论它是否被选中,或者只是使用JavaScript.
我想要使用的新图标是base2.gif
我尝试使用以下但它似乎不起作用:
document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";
有谁知道我可能做错了什么？
当我做以下
$('#tree').dynatree("option","initAjax",{url:"http://google.com"});
我希望dynatree忘记当前的树数据,并使用来自指定url的新数据重新加载.但我发现默认情况下不会这样做.
谢谢.
我有固定高度和垂直滚动条的dynatree.
node.activate(); 选择我正在搜索的节点,但不移动垂直滚动条,所以我必须手动滚动才能看到活动节点.
我如何以编程方式滚动它？
感谢mar10,我解决了这个问题:
var activeLi = node.li;
$('#tree').animate({
scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop()
}, 'slow');
我正在使用dynatree插件显示一个复选框树,使用多选模式(模式3).
当使用ajax(没有延迟加载)初始化树时,似乎忘记了最初选择了一些节点.当我选择其中一个节点时,传递给onSelect处理程序的标志值为true,即:它认为我想选择节点.
当我再次单击该复选框时,它会取消选择.似乎在后台选择没有注册,直到我实际点击复选框.我想加载已选择此节点的树.
我用来加载树的json对我来说很好看; 在选择属性是有问题的节点,根节点如此.这是JSON的片段:
{
"expand":true,
"title":"All",
"isFolder":false,
"key":"0",
"isLazy":false,
"addClass":null,
"select":true,
"unselectable":false,
"children": [... omitted for clarity]
}
UPDATE
我这样加载树:
$("#locationsTree").dynatree({
checkbox: true,
selectMode: 3,
initAjax: {
type: "POST",
url: dynaTreeInitUrl
},
classNames:
{
nodeIcon: ""
}
});
其中dynaTreeInitUrl是返回json的url.
如果我像这样对JSON进行硬编码:
$("#locationsTree").dynatree({
checkbox: true,
selectMode: 3,
children: {
"expand":true,
"title":"All",
"isFolder":false,
"key":"0",
"isLazy":false,
"addClass":null,
"select":true,
"unselectable":false,
"children": [{
"expand": true,
"title": "Child",
"isFolder": false,
"key": "1",
"isLazy": false,
"addClass": null,
"select": true,
"unselectable": true,
"children": …我想在我的页面上开始使用Dynatree,但是我可能需要按名称搜索我的树.你知道怎么做吗？
我目前正在测试Dynatree,我只想询问是否有可用的属性/参数,我可以在其中为每个节点存储其他信息(如ASP.NET TreeView中的属性'value')？提前致谢.
在具有远景皮肤的动态树中，当您将鼠标悬停在树项目上时，它具有蓝色背景的悬停效果。
此外，当您单击该项目进行检查时，它在Chrome中具有橙色边框，在IE中具有虚线边框。
我正在尝试删除所有这两个，以便对悬停或单击不起作用。
有关示例，请参见selectMode 3：wwwendt.de/tech/dynatree/doc/sample-select.html
更新：我在/src/skin-vista/ui.dynatree.css中找到了，如果您注释掉以下块，它将阻止蓝色突出显示颜色。另外，您需要取消注释以固定web浏览器放入的轮廓，如下所示。
/*Comment this out
ul.dynatree-container a:hover
{
/* text-decoration: underline; */
background: #F2F7FD; /* light blue */
border-color: #B8D6FB; /* darker light blue */
}
*/
/*Comment this out
span.dynatree-active a
{
border: 1px solid #99DEFD;
background-color: #D8F0FA;
}
*/
ul.dynatree-container a
/*, ul.dynatree-container a:visited*/
{
/*The line below was originally commented out, uncomment it to remove the orange/dotted border*/
outline: 0; /* @ Firefox, prevent dotted border after click */
}
有如下树形结构
Section 1
item1
item2
Section 2
item5
我可以点击任何项目并使用dynatree onActivate函数和此代码隐藏所有其他项目
onActivate: function(node) {
var resultId = "#" + node.data.title;
resultId = resultId.replace(/\s/g, '');
$('#contents>div').not(resultId).hide();
$(resultId).show();
},
我的HTML就是这个
<div class="container-fluid text-left">
<div class="row content">
<div class="col-sm-2 sidenav" id="tree"> </div>
<div class="col-sm-8" id="contents">
<div id="item1">
<table id="item1grid"></table>
</div>
<div id="item2">
<table id="item2grid"></table>
</div>
<div id="item5">
<table id="item5grid"></table>
</div>
</div>
<div id="info"> </div>
</div>
</div>
</div>
我如何扩展这个html和函数,所以如果我点击树中的"Section 1"它只显示该部分中的所有项目,即点击"Section 1"只显示item1和item2
我已经看过这个问题了,我已经尝试了给出的解决方案(使用tree.reload()),但它对我不起作用.我有一个使用initAjax()在doc就绪初始化的树,我正在尝试使用不同的值重新加载树,以更改选择输入.基本上这个:
$(document).ready(function(){
// global variables
var myVal = 'initial value';
// initialize tree
$('#tree').dynatree({
persist: false,
initAjax: {
url: 'getMyStuff.cfc',
data: { myParam: myVal }
},
... more params
)};
// select change handler
$('#mySelect).change(function(){
var tree = $('#tree').dynatree('getTree');
myVal = $(this).find('option:selected').val();
tree.reload();
)};
)};
问题是树继续使用相同的参数重新加载...我可以在控制台的网络选项卡中看到,每次发送的参数都是相同的,即使我已经确认我的目标是正确的元素,并在变化时获得正确的价值.
我试过改变变量的范围,我尝试将dynatree选项放在一个单独的变量中,我试过调用
$('#tree').children().remove();
$('#tree').dynatree(treeoptions);
在change()函数内部,我试过调用tree.initialize()(是的,我知道它是构造函数),我已经尝试过tree.redraw(),我在调用reload之前尝试过单独设置initAjax选项( ),我被卡住了.
有任何想法吗？
在这一点上,我决定唯一要做的就是将树初始化放入一个函数中,当更改select选项时,吹走树(包括其父div)并重建它.如果没有其他方法可以使用新数据重建树,我会感到惊讶,这与我使用其他小部件的经历背道而驰.