Documentation

1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos

jqcTreeList


This document matches version 1.6.0 .

The jqcTreeList component creates an expandable / collapsable tree using ul and li elements, based on data provided to its viewModel.

Data Objects

The data objects passed to the viewModel of the jqcTreeList must contain a field which holds the "parent id" of the data object. The "parent id" is the "id" of the data object which the given data object is a child of. Thus, these two data objects model a tree, even if the array is one-dimensional:

var dataObjects = [
    { id : "one"    , theLabel : "One"    , theParentId : null },
    { id : "one.one", theLabel : "One.One", theParentId : "one" }
];

The second data object's theParentId field contains the id of the first data object. Thus, the jqcTreeList knows that second data object is a child of the first, even if the data object array is one-dimensional.

Modeling a tree using a "parent id field" in each data object makes it easier to iterate and modify the array of data objects. It also makes it easier to extract a list of data objects from a database, where tree structures are often modeled using "parent id" columns in each database record . It also makes it easier for the viewModel to be used for other types of graph structures than just one-dimensional lists and trees.

If the data objects looks as in the example above, you would have to call treeList.viewModel.idField("id") and treeList.viewModel.parentIdField("theParentId"). Call these function from inside the postConfigure() function of a module.

jqcTreeList Example

<ul id="theTreeList" jqc-type="jqcTreeList"></ul>

<div id="outputDiv" style="margin-top:30px;"></div>

<span jqc-module="bootModule"></span>

<script>
    function bootModule() {
        var module = {};

        module.postConfigure = function() {
            var treeList = module.jqc.pageController.components.theTreeList;

            treeList.labelField("title");

            treeList.viewModel.parentIdField("parentId");

            treeList.clickItem(function(event, listItem, viewModelObject) {
                $("#outputDiv").html("You clicked: " + viewModelObject.dataObject.title );
            });

            var data = [
                { id : "1", title : "Horror Movies"}
                ,{ id : "2", title : "Friday the 13th", parentId : "1" }
                ,{ id : "3", title : "Nightmare on Elmstreet", parentId : "1" }

                ,{ id : "4", title : "Gangster Movies" }
                ,{ id : "5", title : "Godfather", parentId : "4" }
                ,{ id : "6", title : "American Gangster", parentId : "4" }
            ];

            treeList.viewModel.setData(data);
        }


        return module;
    }
</script>

Adding Click Listeners

You can add click listeners to a jqcTreeList using its clickItem() function. Here is the example from above with a click listener added:

<ul id="theTreeList" jqc-type="jqcTreeList"></ul>

<div id="outputDiv" style="margin-top:30px;"></div>

<span jqc-module="bootModule"></span>

<script>
    function bootModule() {
        var module = {};

        module.postConfigure = function() {
            var treeList = module.jqc.pageController.components.theTreeList;

            treeList.labelField("title");

            treeList.viewModel.parentIdField("parentId");
            
            treeList.clickItem(function(event, listItem, viewModelObject) {
                $("#outputDiv").html("You clicked: " + viewModelObject.dataObject.title );
            });
            

            var data = [
                { id : "1", title : "Horror Movies"}
                ,{ id : "2", title : "Friday the 13th", parentId : "1" }
                ,{ id : "3", title : "Nightmare on Elmstreet", parentId : "1" }

                ,{ id : "4", title : "Gangster Movies" }
                ,{ id : "5", title : "Godfather", parentId : "4" }
                ,{ id : "6", title : "American Gangster", parentId : "4" }
            ];

            treeList.viewModel.setData(data);
        }


        return module;
    }
</script>

You can also add a click listener declaratively using the jqc-click-item HTML attribute. Here is how that would look:

<ul id="theTreeList" jqc-type="jqcTreeList"
    jqc-click-item="bootModule.clickedItem"></ul>

<div id="outputDiv" style="margin-top:30px;"></div>

<span jqc-module="bootModule"></span>

<script>
    function bootModule() {
        var module = {};

        module.postConfigure = function() {
            var treeList = module.jqc.pageController.components.theTreeList;

            treeList.labelField("title");

            treeList.viewModel.idField("id"); // defaults to "id" anyways.
            treeList.viewModel.parentIdField("parentId");

            var data = [
                 { id : "1", title : "Horror Movies"}
                ,{ id : "2", title : "Friday the 13th", parentId : "1" }
                ,{ id : "3", title : "Nightmare on Elmstreet", parentId : "1" }

                ,{ id : "4", title : "Gangster Movies" }
                ,{ id : "5", title : "Godfather", parentId : "4" }
                ,{ id : "6", title : "American Gangster", parentId : "4" }
            ];

            treeList.viewModel.setData(data);
        }

        module.clickedItem = function(event, listItem, viewModelObject) {
                $("#outputDiv").html("You clicked: " + viewModelObject.dataObject.title );
        }

        return module;
    }
</script>

Attributes

You can use these attributes inside the HTML element declaring the jqcTreeList:

AttributeDescription
jqc-click-item The jqc-click-item specifies a name of a function to be called when an item in the tree is clicked. For instance, clickedItem or myModule.clickedItem.

Properties

PropertyDescription
viewModel The jqcViewModel containing the data objects (wrapped in view model objects) to be displayed in this jqcTreeList.

Functions

FunctionDescription
labelField(fieldName) Sets the name of the property (field) in the data objects to display.
selectedItems() Retrieves all the selected items in the list as an array of viewModelObjects.