mzDropDown Checkbox Tree

Methods

external:"jQuery.fn.mzDropDownTree"()

main callback to render a tree div from options object
Source:
Examples

Initialize basic tree. see example_basic

<div id="your-tree-id"></div>
<script>
$("#your-tree-id").mzDropDownTree({options})
</script>

Initialize basic tree with data attributes.

<div id="your-tree-id" data-label="Label" data-description="Description of the tree"></div>
<script>
$("#your-tree-id").mzDropDownTree({options})
</script>

declaring the static data property for the tree

  defaultOptions.data = {
      label:"Label of the option"
      value: "12345"
      children:{
      {
          label:"Label",
          value:"Value"
      },
      {
          label:"Label",
          value:"Value"
          children:[
              {
                  label:"Label",
                  value:"value"
              }
          ]

      } 
  }
}

Declaring remote data property.

-NOTE: That the remote data property must return a numeric childcount
returned data from URL source must include child count
{
  label:"Label"
  value: "value"
  children: 10|0|1
}
tree node is fetched again when the tree node is expanded.

defaultOptions.data{
  url:"URL TO YOUR SOURCE"
  method: "[POST|GET]" default is GET
  data: data 
}

Type Definitions

defaultOptions

The default options for the tree. Default options can be overridden by initinaliing the tree with options object the div's data-attributes
Type:
  • Object
Properties:
Name Type Attributes Description
key string Required key name of the tree, data is submitted against this key value
data Object Required data property for the tree, the tree is constructed from nested nodes of data object
Properties
Name Type Attributes Description
label string Label of the checkbox
value string | number Value of the checkbox to be submitted must be unique per tree instance
children object | array | number Object|Array Child label and value pair of objects to nest in the tree
icon object <optional>
 icon rendered before the label Optional,
Properties
Name Type Description
tag string [i|img] Tag to be rendered example:i or img
attributes object HTML 5 list of attributes to be rendered on the icon object
url string Optionally is a URL is provided to data, the tree will attempt to fetch the data from remote source. It will still expect the above data object with label|value|children properties
method string <optional>
 [GET|Post] Default is Get from URL source
data object <optional>
 an Object of key|value pair to be sent via URL
label string Label of the tree filter, tree filter is focused when this label is clicked.
description string The Description or help text for the tree
mode string <optional>
 The mode of the tree, its either a tree or flat.
default_value Array | Object The default values with
placeholder string <optional>
 The placeholder text field for the tree
select_options object <optional>
 selection configuration for the tree
Properties
Name Type Description
max_nodes number [unlimited=-1] maximum nodes that can be selected in the tree
selected_node_maxwidth number maximum width of the selected node displayed in the tree
toggle_select_parents boolean renders a checkbox for the parent node
toggle_parent_selects_children boolean all children are selected when a parent is selected
disable_children_on_parent_selection boolean all children are disabled when a parent is selected. This is useful if you want to determine children by using a wildcard * or id of the parent
toggle_select_all_siblings boolean if the parent does not select children there might be a need for sibling selector- The sibling selector can select all siblings in the same node
toggle_select_all_siblings_label string specify the node text for the sibling selector
max_selection_displayed_nodes number Maximum number of nodes displayed in the tree selectopms
more_nodes_text string More nodes text appended at the end of node selection
filter_options object Filter options for tree
Properties
Name Type Description
text_filter boolean Enables a text filter
min_text_characters number Minimum characters required for the text filter
tree_options object tree header options such as select all show selected etc.
Properties
Name Type Description
select_all boolean creates a select all option checkbox
select_all_text string text for select all checkbox. Defaults to "Select All"
expand_all boolean creates a expand all checkbox option
expand_all_text string sets the expand all text for the checkbox label
show_selected boolean creates the show selected option checkbox
show_selected_text string sets the show selected checkbox label
onNodeSelect object callback is engaged when a node is selected. It exposes node, nodes and totalNodes. Example: options.onNodeSelect:function(node, nodes, totalNodes)
onTreeRender object callback is engaged when the tree has finished rendering process. Add remove or modify tree nodes in this callback. options.OnTreeRender:function(tree){}
OnDetailOpen object callback is engaged on Remote Data property, when the detail arrow or sign has been clicked or the tree parent node is expanded, use this to modify the payload sent to the target URL. Example: options.onDetailOpen:function(data)
onTextFilterChange object callback is engaged when the filter has changed
onTextFilterFocus object callback is engaged when the the text filter receives focus. Use this to modify the open and close behavior of the tree
Source: