C# と VB.NET の質問掲示板

わんくま同盟

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ツリー一括表示

jstree.jsについて /分かりません (20/02/06(Thu) 09:08) #93804
Re[1]: jstree.jsについて /魔界の仮面弁士 (20/02/06(Thu) 09:46) #93805
│└ Re[2]: jstree.jsについて /分かりません (20/02/06(Thu) 10:21) #93806
│  └ Re[3]: jstree.jsについて /WebSurfer (20/02/08(Sat) 10:16) #93828
│    ├ Re[4]: jstree.jsについて /分かりません (20/02/10(Mon) 09:31) #93835
│    └ Re[4]: jstree.jsについて /分かりません (20/02/10(Mon) 09:39) #93837
│      └ Re[5]: jstree.jsについて /WebSurfer (20/02/10(Mon) 10:58) #93844
│        └ Re[6]: jstree.jsについて /分かりません (20/02/10(Mon) 15:20) #93846
│          └ Re[7]: jstree.jsについて /WebSurfer (20/02/12(Wed) 09:53) #93852
│            └ Re[8]: jstree.jsについて /分かりません (20/02/12(Wed) 14:22) #93861
│              └ Re[9]: jstree.jsについて /分かりません (20/02/13(Thu) 17:45) #93862 解決済み
Re[1]: jstree.jsについて /WebSurfer (20/02/08(Sat) 10:22) #93830
  └ Re[2]: jstree.jsについて /分かりません (20/02/10(Mon) 09:32) #93836


親記事 / ▼[ 93805 ] ▼[ 93830 ]
■93804 / 親階層)  jstree.jsについて
□投稿者/ 分かりません (9回)-(2020/02/06(Thu) 09:08:59)

分類:[.NET 全般] 

JavaScript
jstree

お世話になっております。
下記コードで分からない部分がありましたので質問させていただきました。

    // 選択ボタン押下時イベント
    $("#btn_eqp_sel").click(function () {
        //選択状態を保持
        var selected = $('#js_tree').jstree('get_selected');
        if (isAdditinal) {
            // 変数初期化
            selectedCatList = [];
            selectedPartsList = [];
            var tempPartsList = [];

            $.each(selected, function (index, val) {
                if (val != "0") {
                    selectedPartsList.push(val)
                }

                //TODO 選択した情報から一覧絞り込み 
                alert("選択した情報から一覧絞り込み \r\n"
            + "選択設備名称 : " + JSON.stringify(selectedPartsList) + " \r\n");
            })
        }
    });

JSON.stringify(selectedPartsList)の部分で選択したselectedは取得できているのですが
selectedではなく名称(Text)を取得したいと考えております。

私が思うにこの部分→var selected = $('#tree').jstree('get_selected');でget_selectedで取得しているからなのではないかと思っています。
もしそうであればjstreeのTextの取得の仕方を教えていただきたいです。


[ □ Tree ] 返信 編集キー/

▲[ 93804 ] / ▼[ 93806 ]
■93805 / 1階層)  Re[1]: jstree.jsについて
□投稿者/ 魔界の仮面弁士 (2554回)-(2020/02/06(Thu) 09:46:40)
No93804 (分かりません さん) に返信
> selectedではなく名称(Text)を取得したいと考えております。

id ではなくテキストで良いのですよね。
選択されたノードのテキストを得たいということなら、text で取得できないでしょうか。

No93421 (2019/12/11 10:51:34)「jstree.jsのテキスト取得」
http://bbs.wankuma.com/index.cgi?mode=al2&namber=93421

[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93805 ] / ▼[ 93828 ]
■93806 / 2階層)  Re[2]: jstree.jsについて
□投稿者/ 分かりません (10回)-(2020/02/06(Thu) 10:21:22)
No93805 (魔界の仮面弁士 さん) に返信
> id ではなくテキストで良いのですよね。
> 選択されたノードのテキストを得たいということなら、text で取得できないでしょうか。
>
> No93421 (2019/12/11 10:51:34)「jstree.jsのテキスト取得」
> http://bbs.wankuma.com/index.cgi?mode=al2&namber=93421


ご回答ありがとうございます。

$('#resultText').html('Selected: ' + r.join(', '));
上記のコードをalertで表示する場合は、どのようにしたらいいのでしょうか?
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93806 ] / ▼[ 93835 ] ▼[ 93837 ]
■93828 / 3階層)  Re[3]: jstree.jsについて
□投稿者/ WebSurfer (2016回)-(2020/02/08(Sat) 10:16:41)
No93806 (分かりません さん) に返信

> $('#resultText').html('Selected: ' + r.join(', '));
> 上記のコードをalertで表示する場合は、どのようにしたらいいのでしょうか?

'Selected: ' + r.join(', ') で文字列が取得できるのであれば、そえを alert の
引数に与えればよさそうな気がしますが、何が問題なのですか?
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93828 ] / 返信無し
■93835 / 4階層)  Re[4]: jstree.jsについて
□投稿者/ 分かりません (19回)-(2020/02/10(Mon) 09:31:01)
No93828 (WebSurfer さん) に返信
> 'Selected: ' + r.join(', ') で文字列が取得できるのであれば、そえを alert の
> 引数に与えればよさそうな気がしますが、何が問題なのですか?

回答ありがとうございます。
alert('Selected: ' + r.join(', '));このようにやってみて表示しなかったので
記述の仕方が悪いと思ってたのですが、ただselectを取得できていなかったみたいです(-_-;)

// 選択ボタン押下時イベント
    $("#btn_eqp_sel").click(function () {
        //選択状態を保持
        var selected = $('#js_tree').jstree('get_selected');
        if (isAdditinal) {
           $('#tree').on('changed.jstree', function (e, data) {
               var i, j, r = [];
               for (i = 0, j = data.selected.length; i < j; i++) {
                   r.push(data.instance.get_node(data.selected[i]).text);
               }
               alert('Selected: ' + r.join(', '));
            }).jstree();
        }
    });

上記編集したコードです。
デバッグで確認したところ、function (e, data)のdataのところでselectedのlengthが0でした。
どうしたらいいでしょうか?



[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93828 ] / ▼[ 93844 ]
■93837 / 4階層)  Re[4]: jstree.jsについて
□投稿者/ 分かりません (21回)-(2020/02/10(Mon) 09:39:18)
2020/02/10(Mon) 09:50:18 編集(投稿者)
2020/02/10(Mon) 09:40:18 編集(投稿者)

<pre><pre>■No93828 (WebSurfer さん) に返信

すみません。
btn_eqp_selのclickイベントの中にjstreeのchangeイベントを入れていたので混乱していたみたいです。
ちゃんと取得できていました。

btn_eqp_selのclickイベントの中でするにはどうしたらいいでしょうか?

[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93837 ] / ▼[ 93846 ]
■93844 / 5階層)  Re[5]: jstree.jsについて
□投稿者/ WebSurfer (2021回)-(2020/02/10(Mon) 10:58:26)
No93837 (分かりません さん) に返信

> btn_eqp_selのclickイベントの中でするにはどうしたらいいでしょうか?

btn_eqp_sel が定義不明なのですが・・・

それはともかく、Visual Studio と IE を使っていれば JavaScript のコードにも
ブレークポイントを設定してデバッグできるはずですので、ステップ実行して変数の
中身を調べるなどしてみてください。それができるのは質問者さんだけです。
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93844 ] / ▼[ 93852 ]
■93846 / 6階層)  Re[6]: jstree.jsについて
□投稿者/ 分かりません (24回)-(2020/02/10(Mon) 15:20:47)
No93844 (WebSurfer さん) に返信
> btn_eqp_sel が定義不明なのですが・・・

すみません、ボタンです。

> それはともかく、Visual Studio と IE を使っていれば JavaScript のコードにも
> ブレークポイントを設定してデバッグできるはずですので、ステップ実行して変数の
> 中身を調べるなどしてみてください。それができるのは質問者さんだけです。

$('#tree')から始まるコードを、ボタンクリックイベントの外で実行すると上手くいくのは確認しました。
理想としては、ボタンクリックイベントの中で実行したいのでどうしたらいいのか分かりません。

未選択状態のツリーの中から一つ選択してボタンクリックするとメッセージが表示する
という形にしたいです。
現状、一度選択してもう一度選択しないとchangeイベントが発生しない状態です。

どのようにしたらいいのでしょうか?
説明が下手ですみません


[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93846 ] / ▼[ 93861 ]
■93852 / 7階層)  Re[7]: jstree.jsについて
□投稿者/ WebSurfer (2023回)-(2020/02/12(Wed) 09:53:08)
No93846 (分かりません さん) に返信

> 未選択状態のツリーの中から一つ選択してボタンクリックするとメッセージが表示する
> という形にしたいです。
> 現状、一度選択してもう一度選択しないとchangeイベントが発生しない状態です。

今提供されている情報で想像をふくらませて自分が思いつくことは、タイミングの問題か
変数のスコープの問題かなぁ・・・という程度です。

それ以上調べるには、自分としては、

(1) jstree.js という jQuery プラグインの入手。

(2) コピペすれば問題を再現できるコードの入手。

(3) ステップバイステップでの再現手順の入手。

が必要です。

でも、すみませんが (1) をやる気力がわいてこないので何ともなりません。先にも書き
ましたが、質問者さんの方でデバッグ実行して調べていただくのが一番早そうです。

ASP.NET Web Forms のサーバーコントロール TreeView を使っているなら (1) は不要な
のでもう少しお付き合いできるかもしれませんが。
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93852 ] / ▼[ 93862 ]
■93861 / 8階層)  Re[8]: jstree.jsについて
□投稿者/ 分かりません (26回)-(2020/02/12(Wed) 14:22:07)
No93852 (WebSurfer さん) に返信
> (2) コピペすれば問題を再現できるコードの入手。
>
> (3) ステップバイステップでの再現手順の入手。

色々と考えていただきありがとうございます。
この二つを順番に上から自分なりに調べてみます。

時間がかかりそうな予感がするので、少々お待ちください。
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93861 ] / 返信無し
■93862 / 9階層)  Re[9]: jstree.jsについて
□投稿者/ 分かりません (27回)-(2020/02/13(Thu) 17:45:47)
自己解決致しました。

// 選択ボタン押下時イベント
$("#btn_eqp_sel").click(function () {
//選択状態を保持
var selected = $('#js_tree').jstree('get_selected');
if (isAdditinal) {
   $('#tree').on('changed.jstree', function (e, data) {
   var i, j, r = [];
   for (i = 0, j = data.selected.length; i < j; i++) {
   r.push(data.instance.get_node(data.selected[i]).text);
   }
   alert('Selected: ' + r.join(', '));
    }).jstree();
}
});

通常これでできるはずだったのですが、データの取得する部分data.selectedが間違っていたみたいです。
デバックで調べIDが入っている名前に変更したところ上手くいきました。

皆さんありがとうございました。


解決済み
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93804 ] / ▼[ 93836 ]
■93830 / 1階層)  Re[1]: jstree.jsについて
□投稿者/ WebSurfer (2018回)-(2020/02/08(Sat) 10:22:26)
No93804 (分かりません さん) に返信

> 分類:[.NET 全般] 

これも分類が正しくないですね。直せるなら JavaScript に直してください。

分類た正しく適切にお願いします。
[ 親 93804 / □ Tree ] 返信 編集キー/

▲[ 93830 ] / 返信無し
■93836 / 2階層)  Re[2]: jstree.jsについて
□投稿者/ 分かりません (20回)-(2020/02/10(Mon) 09:32:27)
No93830 (WebSurfer さん) に返信
> 分類た正しく適切にお願いします。

編集キーの設定をしていませんでした…。
すみません。
[ 親 93804 / □ Tree ] 返信 編集キー/


管理者用

- Child Tree -