0

DynaTree jqueryプラグインにノードごとに2つのHREFリンクを処理させることが可能かどうか誰かが知っていますか？

1つのリンクが正常に機能していますが、クリック可能な各ノードの右側に「連絡先」画像を表示するリクエストも表示しています。クリックすると、他のユーザーのポップアップ（デザインではなく）が表示されます。同じアイテムに取り組んでいます。

SPANタグを使用して画像をかなり簡単に表示できますが、既存のHREFはOnActivateによってトラップされたものであるため、何も実行するのに非常に苦労しています。

すべてのアドバイスを歓迎します。

4

2 に答える 2

2

私はより良い方法を発見しました。

<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>
于 2013-02-05T09:35:54.553 に答える
0

ツリーを直接出力すると、次のように構造に画像タグを埋め込むことができることに気付きました-

<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イベントを追加するのは非常に簡単でした。

于 2013-01-28T12:19:47.100 に答える