問題タブ [jquery-nestable]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - デフォルトでネスト可能なリストを折りたたんで展開する
同じページにいくつかのネスト可能なリストを表示するために、ネスト可能なプラグイン (jquery) を使用しています。デフォルトでは、すべてのリストが展開されています。すべてのリストを折りたたむこの解決策を見つけましたここにリンクの説明を入力してください
私の質問は、リストの状態を個別に選択するにはどうすればよいかです(デフォルトで展開されたものと折りたたまれたものがあります)。
jquery - Jquery Nestable ライブラリで編集または削除できるドラッグ可能な要素を作成する方法
リスト内の項目を編集または削除できる JQuery Nestable ライブラリを使用する必要がある状況があります。
私はこれに対する解決策を開発しようとしましたが、期待どおりにアイテムを編集または削除しません:
HTML:
JS:
JSFiddle で例を作成しました: https://jsfiddle.net/6b3m348q/6/
この問題の解決策は何ですか?
javascript - ネスト可能なリスト - 親要素の外への子アイテムの移動を無効にする
私のリストでは、親アイテムから子アイテムを移動することができますが、これを変更したいと考えています。
ご覧のとおり、親の内部から別の親への子アイテムの移動は許可されるべきですが、親アイテムの外部への子アイテムの移動は許可されるべきではありません。
コードが長すぎると思うので、Luna themeの nestableList を使用しているものと同様のネスト可能なリストを次に示します。スクリプトjquery.nestable.jsを次に示します。
javascript - ネスト可能なリストに要素をドロップする方法
Nestable List を使用してリリース アクセスを作成しています。List1 から List2 にアイテムをドロップすると、データベースに保存する必要があるため、List2 にドロップされたアイテムを特定するにはどうすればよいですか?
これは私のコードです:
リストの作成には template7 を使用しています。
したがって、ネスト可能な onChange で ajax メソッドを作成して、データベースに保存します。
これは の代わりになりupdateOutput
ます。リスト1からリスト2に移動するとデータベースに保存する必要がありますが、リスト2からリスト1に移動するとデータベースから削除する必要があります。
では、ドロップされたアイテムから Id を取得するにはどうすればよいでしょうか?
javascript - ネスト可能な現在のアイテムにノードをプログラムで展開する
jquery-nestable を使用して、動的に生成された階層リストを作成しました。私が理解できないのは、ノードIDを含むURLに直接アクセスしたときにリストを現在のアイテムに展開する方法です
domain.com?item=123のようなURLがあり、JSONの現在のIDの親IDを生成するスクリプトがあるとしましょう。{345,234}のように、345 =トップレベルの親と234 = 345の子であるだけでなく、123の親も同様です(一度に1つずつ開ける必要がある場合)
しかし、これらの項目を展開できないようです.jqueryではできないことを読んで、これを見つけました: https://github.com/dbushell/Nestable/issues/99しかし、実装方法がわからない.
各リスト項目には、id="step-123" のような動的に生成された独自の ID があり、これが役立ちます。どんな援助も大歓迎です。
これがツリー構造です
jquery-nestable - ネスト可能なメニューを動的にロードした後、jqueryのネスト可能なドラッグ/ドロップ機能を失う
データベースからネスト可能な div コンテンツを動的に追加した後に問題が発生しました。
静的データでネスト可能は期待どおりに機能します。nestable2 から項目を追加し、シリアル化された出力で変更を確認できます。
動的データ を含むネスト可能は、ネスト可能2からネスト可能へのドラッグ/ドロップ機能を失いますが、ネスト可能内のドラッグ/ドロップは引き続き機能するように見えます. ただし、Serialized Output には変更が反映されません。
さらに、ネスト可能なシリアル化された出力の動的データ バージョンは完全ではないようです。2 つのリンク間でネスト可能なシリアライズされた出力を比較すると、ネスト可能な動的データ リンクの JSON オブジェクトが Metal カテゴリ メニューの後に終了することがわかりますが、完全なメニューはそのページのネスト可能な div と tshoot innerHTML に表示されます。
この問題を解決するために誰かが私を正しい方向に向けることができますか?
ありがとう!
質問があいまいですか?わかりました、詳細を追加させてください。
JSON からネスト可能なメニューを作成するコードを次に示します。
... 関数 buildItem(アイテム) {
}
$.each(JSON.parse(obj), function (index, item) {
}); ...
ハードコードされたバージョンと動的バージョンのリストを比較したところ、適切なハードコードされたバージョンは ol タグで始まり、動的バージョンは ul タグで始まることに気付きました (何らかの理由で、この投稿で HTML を提供できません)。だから私はコードを
関数 buildItem(アイテム) {
}
$.each(JSON.parse(obj), function (index, item) {
}); ...
そして、nestable2 div を ol タグで開始しました。
その種の作品ですが、今では追加の子を取得しています (例: Plastic、Valves、Heat and Cooling、In Stock Fixtures and Misc が Metal に追加されます。Valves、Heat and Cooling、In Stock Fixtures and Misc は Plastic and In Stock に追加されます) Fixtures and Misc は Heating and Cooling に追加されます。
したがって、明らかに if (item.children) ループに問題があります。
誰かが問題を見て、おそらく提案された修正をしていますか?
有効な JSON は次のとおりです。
[{"id":"メタル","子供":[{"id":"プロプレス","子供":[{"id":"肘","子供":[{"id":"1 /2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id": "1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/2 x 1 /2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"カップリング"}]},{"id":"銅","子供":[{"id":"肘","子供":[{"id":"1/2 90"},{"id" :"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"ティー","子供" :[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/ 2"}]},{"id":"カップリング"}]},{"id":"黒","子供":[{"id":"肘","子供":[{"id" :"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{" id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/ 2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id" :"カップリング"}]},{"id":"真鍮","子":[{"id":"肘","子":[{"id":"1/2 90"},{"id ":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"}, {"id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/2 x 1/2 x 3/4"}, {"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"カップリング"}]},{"id" :"鋳鉄","子供":[{"id":"肘","子供":[{"id":"1/2 90"},{"id":"1/2 45"} ,{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/2 x 1/ 2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"カップリング" }]},{"id":"Megapress","children":[{"id":"肘","children":[{"id":"1/2 90"},{"id": "1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{" id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/2 x 1/2 x 3/4"},{" id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"カップリング"}]}]},{"id" :"プラスチック","子供":[{"id":"パイプ","子供":[{"id":"PVC"},{"id":"PEX"},{"id":"アクアサーム"}]},{"id":"PVC","子供":[{"id":"肘","子供":[{"id":"1/2 90"},{"id" :"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{ "id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/2 x 1/2 x 3/4"},{ "id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"フランジ"},{"id":"カップリング"},{"id":"Caps"},{"id":"Unions"},{"id":"Reducers"},{"id":"Adapters"},{"id":"Valves"}]},{"id":"PEX","children":[ {"id":"肘","子供":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90 "},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id" :"Tシャツ","子供":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/ 4 x 1/2 x 1/2"}]},{"id":"フランジ"},{"id":"カップリング"},{"id":"キャップ"},{"id":"ユニオン"},{"id":"レデューサー"},{"id":"アダプター"},{"id":"バルブ"}]},{"id":"Aquatherm","子":[{"id":"肘","子":[{"id":" 1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id" :"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"ティー","子供":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"フランジ"},{"id":"カップリング"},{"id":"キャップ"},{"id":"ユニオン"},{"id":"レデューサー"},{"id":"アダプター"},{"id":"バルブ"}]}]},{"id":"バルブ"},{"id":"加熱と冷却","children":[{"id":"Radiant","children":[{"id":"Tubing","children":[{" id":"1/2 PEX"},{"id":"3/4 PEX"}]},{"id":"多様体"},{"id":"頭部"},{"id" :"バルブ"},{"id":"継手"}]},{"id":"サーモスタット"},{"id":"給湯器"},{"id":"ポンプ/バルブ"}, {"id":"ボイラー"},{"id":"MiniSplits"}]},{"id":"在庫設備"},{"id":"その他"}]id":"チューブ","子":[{"id":"1/2 PEX"},{"id":"3/4 PEX"}]},{"id":"多様体"}, {"id":"ヘッド"},{"id":"バルブ"},{"id":"継手"}]},{"id":"サーモスタット"},{"id":"給湯器" },{"id":"ポンプ/バルブ"},{"id":"ボイラー"},{"id":"MiniSplits"}]},{"id":"在庫設備"},{" id":"その他"}]id":"チューブ","子":[{"id":"1/2 PEX"},{"id":"3/4 PEX"}]},{"id":"多様体"}, {"id":"ヘッド"},{"id":"バルブ"},{"id":"継手"}]},{"id":"サーモスタット"},{"id":"給湯器" },{"id":"ポンプ/バルブ"},{"id":"ボイラー"},{"id":"MiniSplits"}]},{"id":"在庫設備"},{" id":"その他"}]サーモスタット"},{"id":"給湯器"},{"id":"ポンプ/バルブ"},{"id":"ボイラー"},{"id":"MiniSplits"}]},{" id":"在庫備品"},{"id":"その他"}]サーモスタット"},{"id":"給湯器"},{"id":"ポンプ/バルブ"},{"id":"ボイラー"},{"id":"MiniSplits"}]},{" id":"在庫備品"},{"id":"その他"}]
新しいシリアル化された出力に表示される JSON には、 ... {"id":"1/2 ST 45"},{"id":"Plastic","children":[{"id":"Pipe" . .. 有効な JSON には次のものがあります: ... {"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"} ..
新しいシリアル化された出力では、{"id":"1/2 ST 45"} の後に ']}' がないことに注意してください。
ティア。
javascript - ネスト可能なリストから値を取得する方法
https://github.com/dbushell/Nestableからネスト可能なツリーがあります
リストからいくつかの値を取得したいので、親とその子を順番に並べたリストを作成する必要があります。各項目には、id、descripcion、fechainicio、fechafin、horas があります。
json形式でマイリストを作成するためにリストから各データを取得する方法