View on GitHub

Erffun's small codes

Is there anybody OUT THERE?

Erff Json Tree with lazy support (ver. 1)

Erff jsonTree is a small jquery plugin (minified version is only 3.13kb) for create a treeview from json data and support lazy loading.

Simple Tree

Code:
$('#simpleTreeContainer').jsonTree(jsonData, {
    mandatorySelect: true,
    selectedIdElementName: 'simpleTreeContainer',
    selectedItemId: 'simpleTreeContainer'
});

Simple Tree with checkbox

Code:
$('#checkboxTreeContainer').jsonTree(jsonData, {
    selectedIdElementName: 'checkboxTreeContainer',
    selectedItemId: 'checkboxTreeContainer',
    showCheckBox: true,
    checkBoxText: "with sub items",
    checkBoxElementName: 'checkboxSelectedNode',
    checkBoxElementId: 'checkboxSelectedNode',
    selectedItemIsChecked: true
});

Lazy loading Tree

Code:
$('#lazyTreeContainer').jsonTree(lazyData, {
    mandatorySelect: true,
    selectedIdElementName: 'lazyTreeContainer',
    selectedItemId: 'lazyTreeContainer',
    lazyLoad: true,
    lazyRequestUrl: 'subitems.js',
    lazySendParameterName: 'id',
});

JsonTree options:

showCheckBox : boolean

When using showCheckbox, checkboxes will appear in side of each tree item.

default value is : false

checkBoxText : string

The text of checkboxes, This item can be used when "showCheckBox" is true.

default value is : Apply Sub Items

checkBoxElementName : string

The 'name' attribute of selected item's checkbox for send check result to form action.

default value is : chkApplySub

checkBoxElementId : string

The 'id' attribute of selected item's checkbox.

default value is : chkApplySub

selectedIdElementName : string

The 'name' attribute of selected item. Use for send selected value to form action.

default value is : hdnSelected

selectedItemId : string

The 'id' attribute of selected item.

default value is : 0

selectedItemIsChecked : boolean

When this property was true, selected item's checkbox will checked.

default value is : false

mandatorySelect : boolean

When Using mandatory, user force to select an item. first item will selected,by default.

default value is : false

lazyLoad : boolean

with this option, you can load sub items ondemand (when click on expand icon)

default value is : false

lazyRequestUrl : string

The url for fetching json data.

default value is : (empty)

lazySendParameterName : string

The name of parameter for send selected item's id with this name to lazyRequestUrl.

for example: if lazyRequestUrl = 'http://yourdomain.com/treeItems.json' and lazySendParameterName = 'selectedId' and selected item id = 89 generated request will be : http://yourdomain.com/treeItems.json?selectedId=89

default value is : id

lazyLoadMethod : string

Action method of sending lazy loading request

default value is : GET

onSelect : function

When using this option, you can pass a function for invoke after select each tree item.

default value is : function (selectedId, selectedLi, $clickedLi) { }

JsonTree options:

Json model must be in following pattern:

ItemId : string or integer

Value of item

Title : string

Shown as Title of item

Selected : bool

When this property was true, this item will selected after loading model. only one item can be true, if you use more than one item, the last item will selected

HasSubItem :

If using lazyloading, this item can determine that this item has subItems or not