Directory View

[DaMentalOneParticipant]

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

[DimitarParticipant]

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/

[DaMentalOneParticipant]

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

[DimitarParticipant]

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/

[DaMentalOneParticipant]

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

[DimitarParticipant]

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/

[Author]

Posts