jQuery UI Widgets Forums Navigation Tree Directory View

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Directory View #84172

    DaMentalOne
    Participant

    Hi,

    I have an auto-generated XML file using “tree -X > filelist.xml”

    <?xml version="1.0" encoding="UTF-8"?>
    <tree>
      <directory name=".">
        <file name="blended_layout.css"></file>
        <file name="data.html"></file>
        <file name="divs.txt"></file>
        <file name="getdir.sh"></file>
        <file name="index.html"></file>
      </directory>
      <report>
        <directories>0</directories>
        <files>10</files>
      </report>
    </tree>
    

    What I want to do, is list this with the Tree widget.
    The documentation isnt overly clear on how to do this. I know I need to use the data widget to do this, but Im unsure on how to parse the xml.

    Can you help?

    Cheers,

    DMO

    Directory View #84186

    Dimitar
    Participant

    Hi DMO,

    Please refer to the demo XML Tree. You may also find the help topic about the data adapter plug-in helpful. Finally, here is a code snippet, showing how to populate datafields from XML attributes:

    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <Customers>
    <Customer CustomerID="1" Name="Customer 1"></Customer>
    <Customer CustomerID="2" Name="Customer 2"></Customer>
    </Customers>
    var url = "../sampledata/customers.xml";
    // prepare the data
    var source =
    {
        datatype: "xml",
        datafields: [
            { name: 'CustomerID', map: '[CustomerID]' },
            { name: 'Name', map: '[Name]' }
        ],
        root: "Customers",
        record: "Customer",
        url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Directory View #84201

    DaMentalOne
    Participant

    Hi Dimitar,

    Thanks for the reply. Not sure it helps me deal with my issue as the XML is recursive and has the same fields in each loop:

    
    <?xml version="1.0" encoding="UTF-8"?>
    <tree>
      <directory name=".">
        <file name="201605062358.xml"></file>
        <file name="blended_layout.css"></file>
        <file name="Caravan.zip"></file>
        <file name="data.html"></file>
        <file name="demo.html"></file>
        <file name="divs.txt"></file>
        <directory name="Folder">
          <directory name="css">
            <file name="filetree.css"></file>
            <directory name="images">
              <file name="application.png"></file>
              <file name="code.png"></file>
              <file name="css.png"></file>
              <file name="db.png"></file>
              <file name="doc.png"></file>
              <file name="file.png"></file>
              <file name="film.png"></file>
              <file name="flash.png"></file>
              <file name="folder_open.png"></file>
              <file name="folder.png"></file>
              <file name="html.png"></file>
              <file name="java.png"></file>
              <file name="linux.png"></file>
              <file name="music.png"></file>
              <file name="pdf.png"></file>
              <file name="php.png"></file>
              <file name="picture.png"></file>
              <file name="ppt.png"></file>
              <file name="psd.png"></file>
              <file name="ruby.png"></file>
              <file name="script.png"></file>
              <file name="spinner.gif"></file>
              <file name="txt.png"></file>
              <file name="xls.png"></file>
              <file name="zip.png"></file>
            </directory>
          </directory>
          <file name="Foldertree.php"></file>
          <file name="index.html"></file>
          <directory name="Sample">
            <directory name="Folder1">
              <file name="sample.html"></file>
              <file name="script.js"></file>
              <file name="style.css"></file>
              <directory name="sub_folder">
                <directory name="another-folder">
                  <file name="archive.zip"></file>
                  <file name="flash.swf"></file>
                  <file name="sample.psd"></file>
                </directory>
                <file name="ex.txt"></file>
                <file name="icon.png"></file>
                <file name="new.php"></file>
              </directory>
            </directory>
            <directory name="Folder2">
              <file name="java.jar"></file>
              <file name="sample.avi"></file>
              <file name="sample.pdf"></file>
            </directory>
            <file name="new.txt"></file>
            <file name="sample.doc"></file>
            <file name="sample.exe"></file>
            <file name="sample.sql"></file>
            <file name="sample.xls"></file>
          </directory>
        </directory>
        <file name="getdir.sh"></file>
        <file name="index.html"></file>
        <directory name="tastydir-master">
          <file name="CHANGELOG"></file>
          <directory name="doc">
            <directory name="assets">
              <directory name="blueprint-css">
                <file name="ie.css"></file>
                <directory name="plugins">
                  <directory name="fancy-type">
                    <file name="readme.txt"></file>
                    <file name="screen.css"></file>
                  </directory>
                </directory>
                <file name="print.css"></file>
                <file name="screen.css"></file>
              </directory>
            </directory>
            <file name="index.html"></file>
          </directory>
          <file name="index.php"></file>
          <file name="README.md"></file>
          <directory name="_tastydir">
            <file name="common.php"></file>
            <file name="do.php"></file>
            <directory name="images">
              <file name="arrow_refresh.png"></file>
              <file name="arrow_undo.png"></file>
              <file name="bg.png"></file>
              <file name="breadcrumb.png"></file>
              <file name="breadcrumb.psd"></file>
              <file name="cancel.png"></file>
              <file name="doc_shred.png"></file>
              <file name="door_out.png"></file>
              <file name="file_ai.png"></file>
              <file name="file_arc.png"></file>
              <file name="file_audio.png"></file>
              <file name="file_code.png"></file>
              <file name="file_c.png"></file>
              <file name="file_cpp.png"></file>
              <file name="file_cs.png"></file>
              <file name="file_css.png"></file>
              <file name="file_excel.png"></file>
              <file name="file_flash.png"></file>
              <file name="file_html.png"></file>
              <file name="file_img2.png"></file>
              <file name="file_img.png"></file>
              <file name="file_js.png"></file>
              <file name="file_page.png"></file>
              <file name="file_pdf.png"></file>
              <file name="file_php.png"></file>
              <file name="file_ppt.png"></file>
              <file name="file_psd.png"></file>
              <file name="file_rb.png"></file>
              <file name="file_sql.png"></file>
              <file name="file_svg.png"></file>
              <file name="file_text.png"></file>
              <file name="file_video.png"></file>
              <file name="file_word.png"></file>
              <file name="file_xml.png"></file>
              <file name="folder_add.png"></file>
              <file name="folder_go.png"></file>
              <file name="folder.png"></file>
              <file name="information.png"></file>
              <file name="loading.gif"></file>
              <file name="logo.png"></file>
              <file name="logo.psd"></file>
              <file name="nav.png"></file>
              <file name="nav.psd"></file>
              <file name="page_copy.png"></file>
              <file name="page_white_add.png"></file>
              <file name="page_white_edit.png"></file>
              <file name="page_white_get.png"></file>
              <file name="page_white_put.png"></file>
              <file name="tipsy.gif"></file>
              <file name="ui-anim_basic_16x16.gif"></file>
              <file name="ui-bg_flat_0_222222_40x100.png"></file>
              <file name="ui-bg_flat_0_aaaaaa_40x100.png"></file>
              <file name="ui-bg_glass_15_2a2a2a_1x400.png"></file>
              <file name="ui-bg_gloss-wave_0_2a2a2a_500x100.png"></file>
              <file name="ui-bg_gloss-wave_20_2a2a2a_500x100.png"></file>
              <file name="ui-bg_gloss-wave_30_1c160d_500x100.png"></file>
              <file name="ui-bg_highlight-soft_20_619226_1x100.png"></file>
              <file name="ui-bg_highlight-soft_20_ffffff_1x100.png"></file>
              <file name="ui-bg_inset-soft_10_ffffff_1x100.png"></file>
              <file name="ui-icons_222222_256x240.png"></file>
              <file name="ui-icons_2a2a2a_256x240.png"></file>
              <file name="ui-icons_cccccc_256x240.png"></file>
              <file name="ui-icons_cde9a7_256x240.png"></file>
              <file name="ui-icons_f1fd86_256x240.png"></file>
              <file name="ui-icons_ffffff_256x240.png"></file>
              <file name="user_go.png"></file>
            </directory>
            <file name="install.php"></file>
            <directory name="js">
              <file name="jquery.ba-hashchange.min.js"></file>
              <file name="jquery.tipsy.js"></file>
              <file name="site.js"></file>
            </directory>
            <file name="settings.php"></file>
            <file name="style.css"></file>
          </directory>
        </directory>
        <file name="test.html"></file>
        <file name="test.txt"></file>
        <file name="tree2.xml"></file>
        <file name="tree.xml"></file>
      </directory>
      <report>
        <directories>17</directories>
        <files>140</files>
      </report>
    </tree>
    

    Thats a full directory listing (All test data) I guess the <report> section can be ignored…

    Thanks,

    DMO

    Directory View #84216

    Dimitar
    Participant

    Hi DMO,

    You are correct. This data cannot be loaded into a jqxTree directly. You would have to convert it to an entry/record-based structure (like our sample customers.xml). Please also consider the alternative ways to populate a jqxTree, presented in the widget’s demos: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Directory View #84404

    DaMentalOne
    Participant

    Dimitar,

    Would you be able to provide me with a way of converting my xml file?
    I have no clue how to do it myself….

    Thanks,

    DMO

    Directory View #84409

    Dimitar
    Participant

    Hi DMO,

    I am sorry, what I meant is to create/generate the XML in a specific way (to produce a record-based structure) and not in the way presented above.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.