mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-01-24 06:49:16 +01:00
348 lines
17 KiB
HTML
Executable File
348 lines
17 KiB
HTML
Executable File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
|
|
lang="en" dir="ltr">
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
|
|
dhtmlxtree:checkboxes_manipulation [DHX documentation]
|
|
</title></head>
|
|
|
|
<body>
|
|
<div class="dokuwiki">
|
|
|
|
<div class="stylehead">
|
|
|
|
<div class="header">
|
|
<a class="logo" href="http://dhtmlx.com" title="DHTMLX Home Page"></a>
|
|
<span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>
|
|
|
|
<div class="search-field">
|
|
<form action="/dhtmlx/docs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> </div>
|
|
<div class="buttons">
|
|
<a class="doc"></a>
|
|
<a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
|
|
</div>
|
|
<!-- <div class="pagename">
|
|
[[<a href="#" title="Backlinks">dhtmlxtree:checkboxes_manipulation</a>]]
|
|
</div>
|
|
<div class="logo">
|
|
<a href="/dhtmlx/docs/doku.php" name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">DHX documentation</a> </div>
|
|
|
|
<div class="clearer"></div>-->
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="bar" id="bar__top">
|
|
<div class="bar-left" id="bar__topleft">
|
|
<form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form> <form class="button btn_revs" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form> </div>
|
|
|
|
<div class="bar-right" id="bar__topright">
|
|
<form class="button btn_recent" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form> <form action="/dhtmlx/docs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
|
</div>
|
|
|
|
<div class="clearer"></div>
|
|
</div> -->
|
|
|
|
<!-- <div class="breadcrumbs">
|
|
<span class="bchead">Trace:</span> <span class="bcsep">»</span> <span class="curid"><a href="/dhtmlx/docs/doku.php?id=dhtmlxtree:checkboxes_manipulation" class="breadcrumbs" title="dhtmlxtree:checkboxes_manipulation">checkboxes_manipulation</a></span> </div>
|
|
-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="page">
|
|
<!-- wikipage start -->
|
|
<!-- TOC START -->
|
|
<div class="toc">
|
|
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
|
|
<div id="toc__inside">
|
|
|
|
<ul class="toc">
|
|
<li class="clear">
|
|
|
|
<ul class="toc">
|
|
<li class="level2"><div class="li"><span class="li"><a href="#checkboxes_manipulation" class="toc">Checkboxes Manipulation</a></span></div>
|
|
<ul class="toc">
|
|
<li class="level3"><div class="li"><span class="li"><a href="#enabling_disabling_checkboxes" class="toc">Enabling/Disabling Checkboxes</a></span></div></li>
|
|
<li class="level3"><div class="li"><span class="li"><a href="#checkboxes_state_manipulation" class="toc">Checkboxes State Manipulation</a></span></div></li></ul>
|
|
</li></ul>
|
|
</li></ul>
|
|
</div>
|
|
</div>
|
|
<!-- TOC END -->
|
|
|
|
<p>
|
|
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif" class="media" alt="" /><a href="../index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><img src="icons___tree.gif" class="media" alt="" /><a href="index.html" class="wikilink1" title="dhtmlxtree:toc">dhtmlxtree</a></div></div>
|
|
|
|
</p>
|
|
|
|
<h2><a name="checkboxes_manipulation" id="checkboxes_manipulation">Checkboxes Manipulation</a></h2>
|
|
<div class="level2">
|
|
|
|
<p>
|
|
dhtmlxTree operates the advanced chechbox system. Besides usual two-state checkboxes (checked item, unchecked item), there is the possibility to use three-state checkboxes with “partly-checked” value.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="53-293" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Edit" class="button" title="Checkboxes Manipulation" /></div></form></div>
|
|
<h3><a name="enabling_disabling_checkboxes" id="enabling_disabling_checkboxes">Enabling/Disabling Checkboxes</a></h3>
|
|
<div class="level3">
|
|
|
|
</div>
|
|
|
|
<h4><a name="enabling_standard_checkboxes" id="enabling_standard_checkboxes">Enabling Standard Checkboxes</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
Method enableCheckboxes() does the very thing:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">enableCheckBoxes</span><span class="br0">(</span>mode<span class="sy0">,</span> hidden<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
<p>
|
|
|
|
The parameters here are as follows:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> mode(true|false) - false stands for hiding all the checkboxes, while true stands for showing them all in the tree;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> hidden - setting it to true means that checkboxes are not rendered, but can be shown by showItemCheckbox() method.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
In case of creating checkboxes with the help of the above mentioned method, they will possess the usual checkbox states:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> checked;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> unchecked.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h4><a name="enabling_three-state_checkboxes" id="enabling_three-state_checkboxes">Enabling Three-State Checkboxes</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
The following method is responsible for enabling three-state checkboxes:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">enableThreeStateCheckboxes</span><span class="br0">(</span><span class="kw2">true</span>|false<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
<p>
|
|
|
|
The following states are available for three-state checkboxes:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> checked;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> unchecked;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> partially checked.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
The third state takes place when the item has several child nodes among which there are checked and unchecked ones.
|
|
</p>
|
|
|
|
<p>
|
|
It should be noted that in case when three-state checkboxes are enabled, a click on a parent unchecked checkbox will result in checking it together with all its child items, and vice versa.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<h4><a name="disabling_a_checkbox" id="disabling_a_checkbox">Disabling a Checkbox</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
A checkbox of a certain item can be disabled. The parameters that are to be specified:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> itemId - id of the item in question;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> mode(true|false) - indicates whether the checkbox is disabled (true) or enabled (false).</div>
|
|
</li>
|
|
</ul>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">disableCheckbox</span><span class="br0">(</span>itemId<span class="sy0">,</span>mode<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
</div>
|
|
|
|
<h4><a name="enabling_checkboxes_for_specific_items" id="enabling_checkboxes_for_specific_items">Enabling Checkboxes for Specific Items</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
The user can set checkboxes for some specific items only. This can be done in the following way:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">enableCheckBoxes</span><span class="br0">(</span><span class="kw2">true</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span>;
|
|
...
|
|
<span class="me1">tree</span>.<span class="me1">showItemCheckbox</span><span class="br0">(</span>id<span class="sy0">,</span> mode<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
<p>
|
|
|
|
The parameters here are:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> id - id of the item;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> mode (true|false) - whether the checkbox will be visible (true) or not (false).</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h4><a name="enabling_smart_checkboxes" id="enabling_smart_checkboxes">Enabling Smart Checkboxes</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
Method enableSmartCheckboxes() enables three-state checkboxes logic. By default it is set to false:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">enableSmartCheckboxes</span><span class="br0">(</span><span class="kw2">true</span>|false<span class="br0">)</span>; <span class="co1">// false by default</span>
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
</div>
|
|
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="294-2663" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Edit" class="button" title="Enabling/Disabling Checkboxes" /></div></form></div>
|
|
<h3><a name="checkboxes_state_manipulation" id="checkboxes_state_manipulation">Checkboxes State Manipulation</a></h3>
|
|
<div class="level3">
|
|
|
|
</div>
|
|
|
|
<h4><a name="checking_unchecking_tree_item" id="checking_unchecking_tree_item">Checking/Unchecking Tree Item</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
Any checkbox in the tree can be easily checked|unchecked from script with the help of the following method:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">setCheck</span><span class="br0">(</span>id<span class="sy0">,</span> mode<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
<p>
|
|
|
|
The parameters are as follows:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> id - id of the item in question;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> mode (true|false) - if set to true, the item will be checked, while false means unchecking the item.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
It should be noted that according to three-state checkboxes' logic, if a parent item was checked with the help of setCheck() method, all its child items will become checked as well.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<h4><a name="checking_unchecking_tree_branch" id="checking_unchecking_tree_branch">Checking/Unchecking Tree Branch</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
Along with checking a tree item, a tree branch can also be easily checked/unchecked from script in the following way:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
tree.<span class="me1">setSubChecked</span><span class="br0">(</span>id<span class="sy0">,</span> state<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
<p>
|
|
|
|
The parameters are as follows:
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> id - id of the item in question;</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> state (true|false) - if set to true, the branch of items will be checked, while false means unchecking the branch.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h4><a name="getting_checkbox_s_state" id="getting_checkbox_s_state">Getting Checkbox's State</a></h4>
|
|
<div class="level4">
|
|
|
|
<p>
|
|
|
|
State of the specified item's checkbox can be got in the following way:
|
|
|
|
</p>
|
|
<pre class="code javascript"> <span class="sy0"><</span>script<span class="sy0">></span>
|
|
<span class="kw2">var</span> checkState <span class="sy0">=</span> tree.<span class="me1">isItemChecked</span><span class="br0">(</span>itemId<span class="br0">)</span>;
|
|
<span class="sy0"></</span>script<span class="sy0">></span>
|
|
</pre>
|
|
</div>
|
|
<div class="secedit"><form class="button btn_secedit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="lines" value="2664-" /><input type="hidden" name="rev" value="1279031295" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Edit" class="button" title="Checkboxes State Manipulation" /></div></form></div>
|
|
<!-- wikipage stop -->
|
|
</div>
|
|
|
|
<div class="clearer"> </div>
|
|
|
|
|
|
<div class="stylefoot">
|
|
|
|
<div class="meta">
|
|
<div class="user">
|
|
</div>
|
|
<!-- <div class="doc">
|
|
dhtmlxtree/checkboxes_manipulation.txt · Last modified: 2010/07/13 17:28 (external edit) </div>
|
|
</div>-->
|
|
|
|
|
|
<!--<div class="bar" id="bar__bottom">-->
|
|
<!--<div class="bar-left" id="bar__bottomleft">-->
|
|
<!--<form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form>-->
|
|
<!--<form class="button btn_revs" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
|
|
<!--</div>-->
|
|
<!--<div class="bar-right" id="bar__bottomright">-->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!--<form class="button btn_index" method="get" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
|
|
<!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a> -->
|
|
<!--</div>-->
|
|
<!--<div class="clearer"></div>-->
|
|
<!--</div>-->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="footerinc">
|
|
|
|
|
|
</div>
|
|
|
|
<div class="no"><img src="/dhtmlx/docs/lib/exe/indexer.php?id=dhtmlxtree%3Acheckboxes_manipulation&1279804935" width="1" height="1" alt="" /></div>
|
|
<div class="footer">
|
|
<div class="footer-logo"></div>
|
|
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
|
<form class="button btn_edit" method="post" action="/dhtmlx/docs/doku.php"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Edit this page" class="button" accesskey="e" title="Edit this page [E]" /></div></form> </div>
|
|
</body>
|
|
</html>
|