B-Tree Hierarchy Structure Using JQuery

First, I created a function, which has an input source of XML format ( why XML, because while returing the data from [webMethod] C#, I convert every datatable into XML).

1. Function
   
   1. var RecursiveTreeModel = function(dataXML, Person, PID) {
   2. var orgdataXML = dataXML;
   3. divAppnder += "<li>" + Person;
   4. divAppnder += "<ul>"
   5. $.each(dataXML, function(i, v) {
   6. if ($(this).find('PARENT_PERSONID').text() == PID) {
   7. RecursiveTreeModel(orgdataXML, $(this).find('NAME').text() + ' - ' + $(this).find('TYPE').text() + ' - ' + $(this).find('EMPID').text(), $(this).find('CHILD_PERSONID').text());
   8. }
   9. });
   10. divAppnder += "</ul></li>";
   11. return divAppnder;
   12. }
2. Explaination
   
   function(dataXML, Person, PID)
   dataXML -> this is the xml data
   Person -> this is Name of person,
   PID -> ParentId
   **$(this).find('PARENT_PERSONID').text() -> this is the way to read XMl tags and their values in jQuery.
   
3. (dataXML) XML Format
   You can get XML formatted data from C# in the follwing ways
   
   
1. dataset.GetXml()
2. or create custom method as shown below:-
   
   1. /*COVERT DATATABLE TO XML*/
   2. public static string DatatableGetXml(DataTable dTable) {
   3. var writer = new StringWriter();
   4. dTable.WriteXml(writer, XmlWriteMode.WriteSchema, false);
   5. return writer.ToString();
   6. }
4. C# Call
   Call it using jQuery AJAX,
   
   1. [WebMethod(EnableSession = true)]
   2. public static string ParentChildPersonRelationship() {
   3. // write your code here and return datatable into xml format
   4. }
5. Output
   I have used Ul > li format to bind the data.