Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The way to spruce up a Checkbox Item List into a Tree format in Oracle APEX.
/*!
* apex-tree-checkbox. The way to spruce up a Checkbox Item List into a Tree format in Oracle APEX.
*
* Copyright (c) 2014 J. Reuben Wetherbee
* http://jrweth.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* Launch : October 2014
* Version : 1.0.1
* Released: Thursday 23rd October, 2014
*
* Description:
* This javascript library is used in conjunction with Oracle Aplication Express (Apex 4.2)
* to add checkboxes to a Tree Region in order to enable the user to
* make selections at the various levels of the tree and sync the selections with a
* hidden page item.
*
* Usage:
* - Include this code in your page by editing the page and including it in the
* "Javascript Function and Global Variable Declaration" or in the "Javascript File URLs
* - Create a hidden item (e.g. P100_EMPLOYEES)
* - Create a new "Tree" region and make sure the defining
* query returns the desired uniquely identifying id for the innermost tree items
* - Assign a static_id in the Tree Region "Attributes" section (e.g. EMPLOYEE_TREE)
* - Link the Tree and Item by adding the following to the page javascript "Execute when Page Loads"
* or a dynamic action set to run when the page loads:
* apexTreeCheckbox.init('#[TREE_STATIC_ID]','#[ITEM_ID]')
* (e.g.) apexTreeCheckbox.init('#EMPLOYEE_TREE', '#P100_EMPLOYEE_CHECKBOX');
*/
(function (apexTreeCheckbox, $) {
"use strict";
//function which checks to see if all children tree items are checked then check the parent
apexTreeCheckbox.setParentCheckboxes = function (treeDomSelector) {
$(treeDomSelector + ' li:not(.leaf)>input.apexTreeCheckbox').each(function () {
var $this = $(this);
if ($this.parent().find('li.leaf>input.apexTreeCheckbox:not(:checked)').size() === 0) {
$this.prop('checked', true);
}
});
};
//sync tree with item
apexTreeCheckbox.syncTreeWithItem = function (treeDomSelector, itemDomSelector) {
var selectedItems = $(itemDomSelector).val().split(":");
//loop through each check box and see if it is checked
$(treeDomSelector + ' input.apexTreeCheckbox').each(function () {
var $this = $(this);
if (selectedItems.indexOf($this.attr('data-tree_id')) >= 0) {
$this.prop('checked', true);
}
else {
$this.prop('checked', false);
}
});
apexTreeCheckbox.setParentCheckboxes(treeDomSelector);
};
//sync item with tree
apexTreeCheckbox.syncItemWithTree = function (treeDomSelector, itemDomSelector) {
var ids = [];
//loop through each check box and see if it is checked
$(treeDomSelector + ' li.leaf>input.apexTreeCheckbox:checked').each(function (index) {
ids[index] = $(this).attr('data-tree_id');
});
$(itemDomSelector).val(ids.join(":"));
console.log('set ' + itemDomSelector + " to " + ids.join(":"))
};
//initialize the checkbox tree and bind to the item
apexTreeCheckbox.init = function (treeDomSelector, itemDomSelector) {
//create all the checkboxes for each tree item
$(treeDomSelector + ' li').each(function () {
var $this = $(this),
$checkbox = $('<input type="checkbox" class="apexTreeCheckbox">');
$checkbox.attr('data-tree_id', $this.attr('id'));
$this.prepend($checkbox);
});
//set checked property for the tree checkboxes based on the item checkboxes
apexTreeCheckbox.syncTreeWithItem(treeDomSelector, itemDomSelector);
//setup click event on the tree item checkboxes
$(treeDomSelector).on('click', '.apexTreeCheckbox', function () {
var $this = $(this),
$children = $this.parent().find('input.apexTreeCheckbox');
//make all children checkboxes match the parent
$children.prop('checked', $this.prop('checked'));
//if unselecting then make sure parent checkboxes are unselected as well
if ($this.prop('checked') === false) {
$this.parentsUntil(treeDomSelector, 'li')
.children('input.apexTreeCheckbox').prop('checked', false);
}
//set the parents if necessary
apexTreeCheckbox.setParentCheckboxes(treeDomSelector);
//sync item with tree
apexTreeCheckbox.syncItemWithTree(treeDomSelector, itemDomSelector);
});
};
})(this.apexTreeCheckbox = this.apexTreeCheckbox || {}, jQuery);
@rickfrancisco

This comment has been minimized.

Copy link

rickfrancisco commented Dec 18, 2015

very usefull!

@shahid789

This comment has been minimized.

Copy link

shahid789 commented Jun 28, 2017

will this work in apex 5.0 with jstree?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.