2017-12-06 14 views
-1

私は、複数のチェックボックスネストされたリストを表示したいシナリオです。下のイメージのように表示したいと思います。 私は、3つの異なるリストレンダリング可能なネストされたチェックボックスリスト

1=Master-Modules 
2=Modules 
3=Sub-Modules 

を持っている私はアコーディオンを通じて行うには、それを試してみましたが、それは適切に特別に崩壊出現し、機能を拡張しません。 これを達成するための簡単な方法を教えてください。チェックボックスを使用してイメージのようなビューを管理するだけです。 おかげ enter image description here

+0

を探求する機会を得るでしょうHTMLマークアップ。あなたはDOMを操作するためにjQueryライブラリを使うことができます(特定のクラスの子アイテムやアイテムを非表示にするなど) – Shyju

+0

実際に私は崩壊して機能を拡張したいのですが、この@Shyjuを達成するために+ –

+0

また、マスターモジュールのチェックボックスを選択すると、その下にあるすべてのチェックボックスをチェックすることができます。 –

答えて

0

サードパーティのアプリを使用しての問題点、彼らはあなたの状況で、最初からそれを構築するための良いオプションになり、柔軟でスケーラブルではありませんが、それはその難しいことではないだろう。あなたは、AJAXリクエストやJavaScriptでいくつかの方法に続いて

GetMeData() 
{ 
//returns list of data type ParentModel 
} 

class ParentModel 
{ 

string name; 
ParentModel subModel; 
} 

のような物が供給されるようにいくつかのアイデアを与えることを

、あなたはデータ構造に定義された親子releationとJSONのいくつかの種類をrecieveingされますあなたはこの

機能processResponseのようないくつかのこと(データ)//シリアライズサーバー側のオブジェクトのデのリストを行うことができます { data.each(機能(キー、ヴァル){

それならばsubModelにデータがある場合は、recurrssionを使用してさらにレベルを下げます }); }

function drawelement() 
{ 
//create elements dynamically here 
//you have to define your html it could be like 
//ul 
////li 
///////img tag for plus and minus, you can also register click event of it to load it dynamically if the data is huge rather than getting all the data, also a 
span tag for showing data 
//////////can have more ul if it has child and same follow till you get all levels. 
} 

} 

これが始めるためのスェードコードです、それはスケーラブルになりますが、それはで初期状態少し余分に時間がかかりますし、あなたがレンダリングされる方法に応じて、より多くの事

関連する問題