3

私たちは jsTree (2011 年 9 月 2 日からのリビジョン 236) を使用しています。

「アクション」に関連付けられた機能で選択されたメニュー項目名にアクセスする方法があるかどうかは誰にもわかりませんか?

メニュー項目の定義を自動化して、それぞれの「アクション」の機能がコンテキスト メニューの項目の識別子に基づいて設定されるようにしたいと考えています。

たとえば、3 つのアクション (「A」、「B」、または「C」) を持つコンテキスト メニューの場合

...
var items = {};             
for(var i=0; i < preconfiguredItemsData.length; i++) 
{ 
    var item = preconfiguredItemsData[i]; 

    items[item.name] = {
        "label": item.title,
        "action": function (liNode) {
            control = eval("new " + **SELECTED ITEM IDENTIFIER ?** + "()"); 
                    // **new A(), new B() or new C()** depending on the selected
                    // item on the context menu.
                    // I have the identifier of the jsTree node but ... how
                    // can I get the item id ("A", "B" or "C")?
            control.execute(); 
        },              
        "_class": "class",  
        "separator_before": false,
        "separator_after": true,
        "icon": false,
        "submenu": {}
    };
    ...
} //for

items.create = false; 
items.rename = false; 
items.remove = false,
items.edit = false;
items.ccp = false;

...

私の問題を明確に説明できたことを願っています。

前もって感謝します。

4

3 に答える 3

3

私は jsTree 3.0.2 を使用していますが、この修正はうまくいきませんでした。

「i」パラメーターは、「action」関数に送信される結果に既に含まれていますが、jsTree ブランチにバインドされた JSON 項目ではなく、クリックされたコンテキスト メニューに関する詳細のみが含まれています。

ここに画像の説明を入力

右クリックされたアイテムのIDを取得するために、私がしたことは次のとおりです。

ツリーのブランチの一部はフォルダーであり、一部は (ユーザーが実行できる) レポートであるため、ユーザーが右クリックしたノードのタイプに応じて、jsTree コンテキスト メニューを調整できるようにする必要がありました。レポート、選択されたレコードの ID を取得する必要がありました。

ここに画像の説明を入力

getCustomMenu最初に、特定の jsTree ブランチのコンテキスト メニュー項目を取得する小さな関数を作成したので、jstree以下のように定義しました。

$('#divReportsTree').jstree({
   "core": {
       'data': JSON.Results.core.data
   },
   "plugins": ["contextmenu"],
   "contextmenu" : {
       //  Call a function, to fetch the CustomMenu for this particular jsTree branch
       items: getCustomMenu    
   }, 
})

そして、私のgetCustomMenu関数は次のようになりました：

function getCustomMenu(node) {

    var thisReportID = node.li_attr.ReportID;

    var items = {
      Run: {
        "separator_before": false,
        "separator_after": true,
        "label": "Run this report",
        "icon": "/Images/Icons/Go.png",
        "action": function (node, reportID) {
             //  Call a function to run a report, with a particular Report ID 
             RunReport(node, thisReportID);
        }
      },
      Refresh: {
        "separator_before": false,
        "separator_after": false,
        "label": "Refresh",
        "icon": "/Images/Icons/Refresh.png",
        "action": function (node, reportID) {
             //  Call a refresh function, with a particular Report ID 
             RefreshReport(node, thisReportID);
        }
    };

    //  If this is a jsTree node for a Folder (rather than a Report) then 
    //  just show the "Refresh" ContextMenu item
    if (node.li_attr.ReportID == null)
    {
        delete items.Run;
    }

    return items;
}

ユーザーが my のレポートを右クリックするとjstree、関数は選択したレポートの ID を使用してgetCustomMenumy 関数を呼び出します。RunReport

ここに画像の説明を入力

これの鍵は、このツリーにデータを取り込む JSON データがReportID、jsTree のli_attr属性に属性を明確に追加することです。

ここに画像の説明を入力

getCustomMenuアクション関数 (この例では "RunReport") を呼び出すため、追加のパラメーターをこの関数に渡すように適応させることができます。

ふぅ。

これがすべて役立つことを願っています（そして理にかなっています！）

于 2014-08-04T09:10:29.497 に答える
1

jstree のソース コードを変更する必要のない、もっと簡単な解決策があります。このアプローチをjstree 3.3.1でテストしました。

ドキュメントから（強調鉱山）：

メニュー項目がアクティブ化されると、次のキーを含むオブジェクトでアクション関数が呼び出されます: item - 以下に示すコンテキストメニュー項目の定義、参照 - 使用された DOM ノード (ツリーノード)、要素 - コンテキストメニュー DOM 要素, position - メニューの位置を示す x/y プロパティを持つオブジェクト。

itemプロパティは、コンテキスト メニュー項目の完全な定義です。これは、そのオブジェクトに任意のプロパティをアタッチし、後でその値を取得できることを意味します。質問の例では、それが_classプロパティである可能性があります。OPがこのアプローチを試みたかどうかは明らかではありません。

var items = {
  item1: {
    label: 'a label',
    icon: 'fa fa-font-awesome',
    separator_after: true,
    disabled: false,
    action: lang.hitch(this, 'doSomething'),
    _name: 'item1'
  }
}

次に、プロパティ_name で渡されitemます。

doSomething: function (obj) {
  console.log(obj.item._name)
}
于 2016-08-05T17:17:30.657 に答える
0

元のjquery.jstree.jsのこの関数呼び出しに関数名をパラメータとして追加することで解決しました。

(function ($) {
    $.vakata.context = {
            .....
            exec : function (i) {
                ....
                if($.isFunction($.vakata.context.func[i])) {
                    ....
                    $.vakata.context.func[i].call($.vakata.context.data, $.vakata.context.par, i);    //Param 'i' added        
                    ....
                }
                ....
            }
            ....
        }

ありがとう！

于 2012-05-08T09:17:38.277 に答える