Jquery 尝试用新数据重新加载/刷新动态树
我已经看到了这一点,并尝试了usetree.reload提供的解决方案,但它对我不起作用。我有一个使用initAjax在docready上初始化的树,我正在尝试在更改select输入时使用不同的值重新加载该树。基本上:Jquery 尝试用新数据重新加载/刷新动态树,jquery,dynatree,Jquery,Dynatree,我已经看到了这一点,并尝试了usetree.reload提供的解决方案,但它对我不起作用。我有一个使用initAjax在docready上初始化的树,我正在尝试在更改select输入时使用不同的值重新加载该树。基本上: $(document).ready(function(){ // global variables var myVal = 'initial value'; // initialize tree $('#tree').dynatree({
$(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的树并重建它。如果真的没有其他方法可以用新数据重建树,这与我使用其他小部件的体验背道而驰,我会感到惊讶。我在dynatree google group上发现了这一点。它对我有用
$('.tree').dynatree('destroy');
$('.tree').empty();
这是答案。这个问题是这个问题的重复: 我的解决方案不需要像清空和销毁等这样的绕道。请考虑一下: 创建动态树时,请指定它必须使用的设置字典。 但是,由于这是一个配置字典,因此不会重新评估它,即使某些参数是变量,并且由于单击等原因而发生更改。 因此,为了解决这个问题并避免像删除DOM和重新创建DOM这样的昂贵操作,我们按照我认为Dynatree开发人员想要的方式进行操作,但在AJAX/JSON示例中没有明确说明:
//The HTML:
<input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
<label id="mylabel"></label>
$("#checkbox").click(function() {
$("#mylabel").text($(this).is(":checked"))
$("#tree").dynatree("option", "initAjax", {
url: "myurl/myphp.php",
data: {
myparameter: $("#checkbox").is(":checked").toString()
}
});
$("#tree").dynatree("getTree").reload();
});
此示例在每次单击按钮时在树上设置配置,然后重新加载树。我想用默认json初始化块,然后单击按钮,我想从服务器刷新它, 这就是我所做的。, 从一开始, var treeData=[{title:Dynamic Tree Demo,isFolder:false,tooltip:Here,is your Dynamic Tree!}]
jQuery(document).ready(function() {
initReqActions(treeData);
});
initReqActions= function(myTree){
$("#dynaTree").dynatree({
checkbox: false,
selectMode: 2,
// create IDs for HTML elements that are generated
generateIds: true,
cookie: {
expires :-1
},
children: myTree,
onQuerySelect: function(select, node) {
if( node.data.isFolder )
return false;
},
onSelect: function(select, node) {
// Display list of selected nodes
var selNodes = node.tree.getSelectedNodes();
// convert to title/key array
//var selKeys = $.map(selNodes, function(node){
// return "[" + node.data.key + "]: '" + node.data.title + "'";
//});
//$("#echoSelection4").text(selKeys.join(", "));
},
onClick: function(node, event) {
if( ! node.data.isFolder )
node.toggleSelect();
},
onDblClick: function(node, event) {
node.toggleExpand();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
}
});
}
然后单击一个按钮
jQuery(document).ready(function() {
$("#RefreshButton").click(function() {
$("#dynaTree").dynatree("option", "initAjax", {
url: "refreshTree",
dataType: "json"
});
$("#dynaTree").dynatree("option", "children", null);
$("#dynaTree").dynatree("getTree").reload();
});
});
dynatree div上可能没有树类,因此最好通过id$'tree'Thumbs up y来选择它!你救了我一个朋友。这会刷新整个树,有没有办法在不刷新页面的情况下对其进行di?