2017-12-06 4 views
-1

Ich bin in einem Szenario, wo ich die verschachtelte Liste Mehrere Kontrollkästchen anzeigen möchte. Ich möchte es wie das Bild unten zeigen. Ich habe drei verschiedene ListenRender Collapse-fähige verschachtelte Kontrollkästchen-Liste

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

ich es versuchte, durch Akkordeon zu tun, aber es ist nicht richtig speziell den Zusammenbruch erscheinen und Funktion erweitern. Bitte schlagen Sie mir eine einfache Möglichkeit, dies zu erreichen.Ich kann nur Rest Problem behandeln ist die Ansicht wie Bild mit Check-Boxen zu verwalten. Dank enter image description here

+0

je nachdem, wie Sie das rendern HTML-Markup Sie können jQuery-Bibliothek verwenden, um das DOM zu manipulieren (verstecken/zeigen die untergeordneten Elemente oder Elemente mit einer bestimmten Klasse usw.) – Shyju

+0

eigentlich möchte ich die Funktion zum Einklappen und Erweitern funktionieren, aber kämpfen, um die + oder - Taste zu diesem @Shyju zu erreichen –

+0

auch bei der Auswahl der Master-Modul-Checkbox, wie ich alle darunter liegenden Check-Boxen überprüfen kann. –

Antwort

0

Das Problem bei der Verwendung von Anwendungen von Drittanbietern sind sie nicht flexibel sind und skalierbar, in Ihrer Situation wird es eine gute Option sein, es von Grund auf neu zu bauen, wird es nicht so schwer sein.

einige Ideen zu geben, werden Sie irgendeine Art von json mit Eltern-Kind-releation in der Datenstruktur definiert werden recieveing ​​wie Sie ein Objekt wie

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

class ParentModel 
{ 

string name; 
ParentModel subModel; 
} 

dann auf Ihrer Ajax-Anforderung oder eine Methode in Javascript recieving werden Sie können wie diese serialisiert

Funktion Process (Daten) // Liste der Server-Seite Objekt de irgendeine Sache tun { data.each (function (key, val) {

wenn es hat Daten in subModel, dann benutze recurrssion, um weiter auf die Ebene }); }

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. 
} 

} 

Dies ist ein suedo Code, um loszulegen, ist es erstmal etwas mehr Zeit in Anspruch nehmen aber es ist skalierbar sein und Sie werden eine Chance bekommen, mehr Dinge zu erkunden

Verwandte Themen