jQuery datatreeview basic setup - maikelbos0/VDT GitHub Wiki

Include the following script files and the style sheets in your page(s). The style sheet jquery-datatreeview.style.css provides basic styling; use it as a template if you want to provide your own styling. If you have installed the NuGet package you should find the script files in the Scripts folder and the style sheet in the Content folder.

<link rel="stylesheet" href="Content/jquery-datatreeview.min.css" />
<link rel="stylesheet" href="Content/jquery-datatreeview.style.min.css" />
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-datatreeview.min.js"></script>

The plugin creates an in-place treeview on any element of your choosing by calling the datatreeview function on the jQuery object. In the options it expects at least a property data which contains an array of node data. It supports creating multiple treeviews at the same time for a jQuery object containing more than one element.

<div id="example-tree" data-field-name="tree-nodes"></div>

<script type="text/javascript">
    $('#example-tree').datatreeview({
        data: [
            { value: 1, text: 'Foo' },
            {
                value: 2,
                text: 'Bar',
                children: [
                    { value: '2a', text: 'Bar child', selected: true },
                    { value: '2b', text: 'Another'}
                ]
            },
            { value: 3, text: 'Baz' }
        ]
    });
</script>

This creates a treeview with 2 levels and some elements selected. The created checkboxes will have the name "tree-nodes" so they can be posted in a form or otherwise manipulated in a generic way. Data nodes can be nested as many levels as required.