Building on the Quick Start example, you can add check boxes to your tree nodes using the showCheckBoxes option. In addition to the usual checked and unchecked states, you can allow a third state, indeterminate, that shows a square in a parent item's checkbox when there is a mix of states for related child items. To enable this, set the allowTriState option to true.
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which shows check boxes.
Drop down and copy script to paste in <head> section
Script |
Copy Code
|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#tree").wijtree({
showCheckBoxes: true,
allowTriState: true
});
});
</script> |
- No changes are necessary in the <body> section of your HTML file. The basic <ul> tag is sufficient to create the tree.
- Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click Tree Node 1 and check one of its child nodes to see the indeterminate state.
See Also
Reference
Widgets