Saturday, May 5, 2018

JQuery TreeView Example And Stylish Select DropDown

Create TreeView example:
Here container is the boundary within tree dropdown will contains.
If you open this tree view in popup, container will be popup body.
var tree = $("div.tree-inside-this-div").treeView({
    json: r,
    openAll: 0,
    noText: "Select...",
    change: function (value) {
        console.log(value);
    },
    value: "1.1.2.2.3.2",
    container: $(document.body)
});
To set specific value or to select desired tree node:
tree.value("100");
You can put a attribute named "selected": true to auto select node when create tree.

"children": [
  {
    "id": "1.1.2.2.3.2.4.1",
    "text": "Label - 4.1",
    "selected": true
  },
  {
    "id": "1.1.2.2.3.2.4.2",
    "text": "Label - 4.2"
  }
]

You can also convert select to stylish dropdown:
$(document.body).find("select").selectView();

You also can use this tree view for custom action menu using below command


$(document.body).find("select.action_menu").actionView({
    actionWidth: 140
});

And finally you download source code from here.

No comments:

Post a Comment