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.