动态树 - 每个节点 2 个链接

Question

>有谁知道是否有可能让DynaTree jquery插件处理每个节点的两个HREF链接？

我有一个链接工作正常，但我也在查看在每个可点击节点的右侧显示"联系人"图像的请求，单击该图像时会产生一个弹出窗口（我知道，不是我的设计）其他用户在同一项目上工作。

我可以相当轻松地使用 SPAN 标签显示图像，但由于现有的 HREF 是 OnActivate 捕获的 HREF，因此我在让它做任何事情时遇到了真正的麻烦。

欢迎所有建议。

Answer 1

我发现了一个更好的方法。

<script type="text/javascript">
     $(function () {
         $("#tree").dynatree({
             initAjax: {
                 type: "POST", 
                 url: "TreeView/GetNodes"
                // This gets data from an MVC3 controller
                // in the form of a serialised list of nodes
               // with custom attributes.
             },
             //here's the meat of it - 
             // elements are created and added 
             // according to the custom data values in the node
             onRender: function (node, nodeSpan) {
                 if (node.data.hasPostImage) {
                     var postImg = document.createElement('img');
                     postImg.setAttribute('src', node.data.postImageUrl);
                     postImg.setAttribute('class', node.data.postImageClass);
                     postImg.setAttribute('alt', node.data.postImageAltText);
                     postImg.setAttribute('onClick', 'javascript:loadContacts('' + node.data.postImageScriptHref + '');');
                     // the element is then appended to the Anchor tag (title)
                     // using jquery.after.
                     // it works really well, except for IE7.  Working on that now.
                     $(nodeSpan).find('.dynatree-title').after(postImg);
                 }
             },
             onClick: function (node) {
             node.toggleExpand();
             }
         });
     });    
  </script>

Answer 2

我注意到直接输出树允许我在结构中嵌入图像标签，如下所示-

<div id="tree">
    <ul id="treeData" style="display: none;">
        @foreach (var provider in Model.Locations)
        {
            <li class="folder"  data="icon: 'false', addClass: 'root-node'">@provider.Provider
                <ul>
                @foreach (var profession in provider.ChildLocations)
                {
                    <li id="@profession.Id">@profession.Profession &nbsp;<img class="contactsImg" onclick="loadContacts();" src="../../Content/themes/default/images/icons/contacts.png" />
                        <ul>
                            @foreach (var formtype in profession.ChildLocations)
                            {
                                <li class="folder" id="@formtype.Id" data="addClass: 'progress-bar'">@formtype.Type
                                    <ul>
                                       @foreach (var form in formtype.ChildLocations)
                                       {
                                          <li id="@form.Id" data="addClass: 'progress-bar'">@Ajax.ActionLink(form.Form, "PartialIndex", "FormCover", new { Id = form.formId }, new AjaxOptions { UpdateTargetId = "contentpanel" })
                                                <ul>
                                                    @foreach (var lo in form.ChildLocations)
                                                    {
                                                        <li id="@lo.Id" data="addClass: 'action-required'">@Ajax.ActionLink(lo.Name, "ActualFormTab", new {formid = form.formId, layoutid = lo.formId}, new AjaxOptions{ UpdateTargetId = "contentpanel"})</li>
                                                    }
                                                </ul>
                                          </li>
                                       }   
                                    </ul>
                                </li>
                            }
                        </ul>
                    </li>
                }
                </ul>
            </li>
        }
    </ul>
</div>

而且，如前所述，向图像添加OnClick事件非常简单。