Print Page - custom 3 state tree check boxes

I am using a tree to control user access to the screens, the tree is attached to a user, and the user gets access to the tree items that are checked.

It works very well, but now I need to use the same tree to specify whether the access is read-only or full write access.

So my idea is to somehow change the tree-check icons for ones that represent read-only, read-write and no access (un-checked).

So each time you click the checkbox it would cycle through [ read-only, read-write, no-access ]

Is this possible to achieve relatively easy and will I be able to differentiate between the different check-type in the data ?

Please refer to the code below:

Code:

$('#tt').tree({
	checkbox: false,
	formatter:function(node){
		var s = '<span style="display:inline-block;width:16px;height:16px" class="tree-flag tree-checkbox'+(node.flag||0)+'">&nbsp;</span>';
		return s + node.text;
	}
}).bind('click', function(e){
	var flag = $(e.target).closest('span.tree-flag');
	if (flag.length){
		var t = flag.closest('div.tree-node');
		var f = 0;
		if (flag.hasClass('tree-checkbox0')){
			f = 1;
		} else if (flag.hasClass('tree-checkbox1')){
			f = 2;
		} else {
			f = 0;
		}
		$('#tt').tree('update',{
			target: t[0],
			flag: f
		})
	}
})

Use a 'flag' property to represent the current node state(read-only,read-write,no access). Use the 'formatter' function to display the node's checkbox regarding its flag. Click a un-checked node, the node will be checked. Click it again, it will be indeterminate. etc.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on January 30, 2015, 01:07:33 AM