Dynatree.js如何使用dyna.js在html中选择节点

时间:2012-06-28 07:52:09

标签: javascript jquery jquery-dynatree

我在html表单上工作,我根据项目的要求使用dynatree进行select和multi-select。我需要做的是创建一个编辑表单,用户可以从数据库中获取所有字段。这意味着我需要向用户显示已经选择的字段的dynatree。这是我的示例代码:

<span  id="action" name="action">
  <ul>
       <li id="DisruptiveAction" class="folder expanded">DisruptiveAction (5)
      <ul>    
        <li id="allow" title="optional">allow           
        <li id="deny" title="optional">deny
        <li id="pass" title="optional" class="selected" >pass           
        <li id="block" title="optional">block
        <li id="redirect" title="optional">redirect                         

     </ul>
   </ul>
</span> 

Java脚本:

$("#action").dynatree({
        classNames: {
            container: "action-container",
            checkbox: "dynatree-radio"
        },
        selectMode: 3,
        onSelect: function(select, node) {
            var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
                return node.data.key;
            });
            $("#selectedAction").val(selKeys.join(","));
                var selRootNodes = node.tree.getSelectedNodes(true);
                var selRootKeys = $.map(selRootNodes, function(node){
                    return node.data.key;
                });
        }           
    });

在上面提到的html中,即使我使用带有li元素的class =“selected”但是仍然没有在UI上显示它。提前谢谢。

1 个答案:

答案 0 :(得分:2)

Dynatree在初始化时以及树的整个生命周期中创建自己的元素。因此,您添加的li元素不是树的li元素。

在“节点选项”部分下查看this documentation。你会看到你可以像这样添加一个类:

<div id="tree">
<ul>
  <li id="DisruptiveAction" class="folder expanded">DisruptiveAction (5)
  <ul>    
    <li id="allow" title="optional">allow           
    <li id="deny" title="optional">deny
    <li id="pass" title="optional" data="addClass: 'dynatree-selected'" >pass           
    <li id="block" title="optional">block
    <li id="redirect" title="optional">redirect                         
 </ul>

   

这是添加类的通用代码。可能有更具体的方式来指定选择元素,因为它是核心dynatree概念,而不是用户定义的类。