CheckBoxTree.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
  1. //dojo.provide("lib.CheckBoxTree");
  2. //dojo.provide("lib.CheckBoxStoreModel");
  3. // THIS WIDGET IS BASED ON DOJO/DIJIT 1.4.0 AND WILL NOT WORK WITH PREVIOUS VERSIONS
  4. //
  5. // Release date: 02/05/2010
  6. //
  7. //dojo.require("dijit.Tree");
  8. //dojo.require("dijit.form.CheckBox");
  9. require(["dojo/_base/declare", "dijit/tree/TreeStoreModel"], function (declare) {
  10. return declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
  11. {
  12. // checkboxAll: Boolean
  13. // If true, every node in the tree will receive a checkbox regardless if the 'checkbox' attribute
  14. // is specified in the dojo.data.
  15. checkboxAll: true,
  16. // checkboxState: Boolean
  17. // The default state applied to every checkbox unless otherwise specified in the dojo.data.
  18. // (see also: checkboxIdent)
  19. checkboxState: false,
  20. // checkboxRoot: Boolean
  21. // If true, the root node will receive a checkbox eventhough it's not a true entry in the store.
  22. // This attribute is independent of the showRoot attribute of the tree itself. If the tree
  23. // attribute 'showRoot' is set to false to checkbox for the root will not show either.
  24. checkboxRoot: false,
  25. // checkboxStrict: Boolean
  26. // If true, a strict parent-child checkbox relation is maintained. For example, if all children
  27. // are checked the parent will automatically be checked or if any of the children are unchecked
  28. // the parent will be unchecked.
  29. checkboxStrict: true,
  30. // checkboxIdent: String
  31. // The attribute name (attribute of the dojo.data.item) that specifies that items checkbox initial
  32. // state. Example: { name:'Egypt', type:'country', checkbox: true }
  33. // If a dojo.data.item has no 'checkbox' attribute specified it will depend on the attribute
  34. // 'checkboxAll' if one will be created automatically and if so what the initial state will be as
  35. // specified by 'checkboxState'.
  36. checkboxIdent: "checkbox",
  37. updateCheckbox: function(/*dojo.data.Item*/ storeItem, /*Boolean*/ newState ) {
  38. // summary:
  39. // Update the checkbox state (true/false) for the item and the associated parent and
  40. // child checkboxes if any.
  41. // description:
  42. // Update a single checkbox state (true/false) for the item and the associated parent
  43. // and child checkboxes if any. This function is called from the tree if a user checked
  44. // or unchecked a checkbox on the tree. The parent and child tree nodes are updated to
  45. // maintain consistency if 'checkboxStrict' is set to true.
  46. // storeItem:
  47. // The item in the dojo.data.store whos checkbox state needs updating.
  48. // newState:
  49. // The new state of the checkbox: true or false
  50. // example:
  51. // | model.updateCheckboxState(item, true);
  52. //
  53. this._setCheckboxState( storeItem, newState );
  54. //if( this.checkboxStrict ) { I don't need all this 1-1 stuff, only parent -> child (fox)
  55. this._updateChildCheckbox( storeItem, newState );
  56. //this._updateParentCheckbox( storeItem, newState );
  57. //}
  58. },
  59. setAllChecked: function(checked) {
  60. var items = this.store._arrayOfAllItems;
  61. this.setCheckboxState(items, checked);
  62. },
  63. setCheckboxState: function(items, checked) {
  64. for (var i = 0; i < items.length; i++) {
  65. this._setCheckboxState(items[i], checked);
  66. }
  67. },
  68. getCheckedItems: function() {
  69. var items = this.store._arrayOfAllItems;
  70. var result = [];
  71. for (var i = 0; i < items.length; i++) {
  72. if (this.store.getValue(items[i], 'checkbox'))
  73. result.push(items[i]);
  74. }
  75. return result;
  76. },
  77. getCheckboxState: function(/*dojo.data.Item*/ storeItem) {
  78. // summary:
  79. // Get the current checkbox state from the dojo.data.store.
  80. // description:
  81. // Get the current checkbox state from the dojo.data store. A checkbox can have three
  82. // different states: true, false or undefined. Undefined in this context means no
  83. // checkbox identifier (checkboxIdent) was found in the dojo.data store. Depending on
  84. // the checkbox attributes as specified above the following will take place:
  85. // a) If the current checkbox state is undefined and the checkbox attribute 'checkboxAll' or
  86. // 'checkboxRoot' is true one will be created and the default state 'checkboxState' will
  87. // be applied.
  88. // b) If the current state is undefined and 'checkboxAll' is false the state undefined remains
  89. // unchanged and is returned. This will prevent any tree node from creating a checkbox.
  90. //
  91. // storeItem:
  92. // The item in the dojo.data.store whos checkbox state is returned.
  93. // example:
  94. // | var currState = model.getCheckboxState(item);
  95. //
  96. var currState = undefined;
  97. // Special handling required for the 'fake' root entry (the root is NOT a dojo.data.item).
  98. // this stuff is only relevant for Forest store -fox
  99. /* if ( storeItem == this.root ) {
  100. if( typeof(storeItem.checkbox) == "undefined" ) {
  101. this.root.checkbox = undefined; // create a new checbox reference as undefined.
  102. if( this.checkboxRoot ) {
  103. currState = this.root.checkbox = this.checkboxState;
  104. }
  105. } else {
  106. currState = this.root.checkbox;
  107. }
  108. } else { // a valid dojo.store.item
  109. currState = this.store.getValue(storeItem, this.checkboxIdent);
  110. if( currState == undefined && this.checkboxAll) {
  111. this._setCheckboxState( storeItem, this.checkboxState );
  112. currState = this.checkboxState;
  113. }
  114. } */
  115. currState = this.store.getValue(storeItem, this.checkboxIdent);
  116. if( currState == undefined && this.checkboxAll) {
  117. this._setCheckboxState( storeItem, this.checkboxState );
  118. currState = this.checkboxState;
  119. }
  120. return currState; // the current state of the checkbox (true/false or undefined)
  121. },
  122. _setCheckboxState: function(/*dojo.data.Item*/ storeItem, /*Boolean*/ newState ) {
  123. // summary:
  124. // Set/update the checkbox state on the dojo.data store.
  125. // description:
  126. // Set/update the checkbox state on the dojo.data.store. Retreive the current
  127. // state of the checkbox and validate if an update is required, this will keep
  128. // update events to a minimum. On completion a 'onCheckboxChange' event is
  129. // triggered.
  130. // If the current state is undefined (ie: no checkbox attribute specified for
  131. // this dojo.data.item) the 'checkboxAll' attribute is checked to see if one
  132. // needs to be created. In case of the root the 'checkboxRoot' attribute is checked.
  133. // NOTE: the store.setValue function will create the 'checkbox' attribute for the
  134. // item if none exists.
  135. // storeItem:
  136. // The item in the dojo.data.store whos checkbox state is updated.
  137. // newState:
  138. // The new state of the checkbox: true or false
  139. // example:
  140. // | model.setCheckboxState(item, true);
  141. //
  142. var stateChanged = true;
  143. if( storeItem != this.root ) {
  144. var currState = this.store.getValue(storeItem, this.checkboxIdent);
  145. if( currState != newState && ( currState !== undefined || this.checkboxAll ) ) {
  146. this.store.setValue(storeItem, this.checkboxIdent, newState);
  147. } else {
  148. stateChanged = false; // No changes to the checkbox
  149. }
  150. } else { // Tree root instance
  151. if( this.root.checkbox != newState && ( this.root.checkbox !== undefined || this.checkboxRoot ) ) {
  152. this.root.checkbox = newState;
  153. } else {
  154. stateChanged = false;
  155. }
  156. }
  157. if( stateChanged ) { // In case of any changes trigger the update event.
  158. this.onCheckboxChange(storeItem);
  159. }
  160. return stateChanged;
  161. },
  162. _updateChildCheckbox: function(/*dojo.data.Item*/ parentItem, /*Boolean*/ newState ) {
  163. // summary:
  164. // Set all child checkboxes to true/false depending on the parent checkbox state.
  165. // description:
  166. // If a parent checkbox changes state, all child and grandchild checkboxes will be
  167. // updated to reflect the change. For example, if the parent state is set to true,
  168. // all child and grandchild checkboxes will receive that same 'true' state.
  169. // If a child checkbox changes state and has multiple parent, all of its parents
  170. // need to be re-evaluated.
  171. // parentItem:
  172. // The parent dojo.data.item whos child/grandchild checkboxes require updating.
  173. // newState:
  174. // The new state of the checkbox: true or false
  175. //
  176. if( this.mayHaveChildren( parentItem )) {
  177. this.getChildren( parentItem, dojo.hitch( this,
  178. function( children ) {
  179. dojo.forEach( children, function(child) {
  180. if( this._setCheckboxState(child, newState) ) {
  181. var parents = this._getParentsItem(child);
  182. if( parents.length > 1 ) {
  183. this._updateParentCheckbox( child, newState );
  184. }
  185. }
  186. if( this.mayHaveChildren( child )) {
  187. this._updateChildCheckbox( child, newState );
  188. }
  189. }, this );
  190. }),
  191. function(err) {
  192. console.error(this, ": updating child checkboxes: ", err);
  193. }
  194. );
  195. }
  196. },
  197. _updateParentCheckbox: function(/*dojo.data.Item*/ storeItem, /*Boolean*/ newState ) {
  198. // summary:
  199. // Update the parent checkbox state depending on the state of all child checkboxes.
  200. // description:
  201. // Update the parent checkbox state depending on the state of all child checkboxes.
  202. // The parent checkbox automatically changes state if ALL child checkboxes are true
  203. // or false. If, as a result, the parent checkbox changes state, we will check if
  204. // its parent needs to be updated as well all the way upto the root.
  205. // storeItem:
  206. // The dojo.data.item whos parent checkboxes require updating.
  207. // newState:
  208. // The new state of the checkbox: true or false
  209. //
  210. var parents = this._getParentsItem(storeItem);
  211. dojo.forEach( parents, function( parentItem ) {
  212. if( newState ) { // new state = true (checked)
  213. this.getChildren( parentItem, dojo.hitch( this,
  214. function(siblings) {
  215. var allChecked = true;
  216. dojo.some( siblings, function(sibling) {
  217. siblState = this.getCheckboxState(sibling);
  218. if( siblState !== undefined && allChecked )
  219. allChecked = siblState;
  220. return !(allChecked);
  221. }, this );
  222. if( allChecked ) {
  223. this._setCheckboxState( parentItem, true );
  224. this._updateParentCheckbox( parentItem, true );
  225. }
  226. }),
  227. function(err) {
  228. console.error(this, ": updating parent checkboxes: ", err);
  229. }
  230. );
  231. } else { // new state = false (unchecked)
  232. if( this._setCheckboxState( parentItem, false ) ) {
  233. this._updateParentCheckbox( parentItem, false );
  234. }
  235. }
  236. }, this );
  237. },
  238. _getParentsItem: function(/*dojo.data.Item*/ storeItem ) {
  239. // summary:
  240. // Get the parent(s) of a dojo.data item.
  241. // description:
  242. // Get the parent(s) of a dojo.data item. The '_reverseRefMap' entry of the item is
  243. // used to identify the parent(s). A child will have a parent reference if the parent
  244. // specified the '_reference' attribute.
  245. // For example: children:[{_reference:'Mexico'}, {_reference:'Canada'}, ...
  246. // storeItem:
  247. // The dojo.data.item whos parent(s) will be returned.
  248. //
  249. var parents = [];
  250. if( storeItem != this.root ) {
  251. var references = storeItem[this.store._reverseRefMap];
  252. for(itemId in references ) {
  253. parents.push(this.store._itemsByIdentity[itemId]);
  254. }
  255. if (!parents.length) {
  256. parents.push(this.root);
  257. }
  258. }
  259. return parents; // parent(s) of a dojo.data.item (Array of dojo.data.items)
  260. },
  261. validateData: function(/*dojo.data.Item*/ storeItem, /*thisObject*/ scope ) {
  262. // summary:
  263. // Validate/normalize the parent(s) checkbox data in the dojo.data store.
  264. // description:
  265. // Validate/normalize the parent-child checkbox relationship if the attribute
  266. // 'checkboxStrict' is set to true. This function is called as part of the post
  267. // creation of the Tree instance. All parent checkboxes are set to the appropriate
  268. // state according to the actual state(s) of their children.
  269. // This will potentionally overwrite whatever was specified for the parent in the
  270. // dojo.data store. This will garantee the tree is in a consistent state after startup.
  271. // storeItem:
  272. // The element to start traversing the dojo.data.store, typically model.root
  273. // scope:
  274. // The scope to use when this method executes.
  275. // example:
  276. // | this.model.validateData(this.model.root, this.model);
  277. //
  278. if( !scope.checkboxStrict ) {
  279. return;
  280. }
  281. scope.getChildren( storeItem, dojo.hitch( scope,
  282. function(children) {
  283. var allChecked = true;
  284. var childState;
  285. dojo.forEach( children, function( child ) {
  286. if( this.mayHaveChildren( child )) {
  287. this.validateData( child, this );
  288. }
  289. childState = this.getCheckboxState( child );
  290. if( childState !== undefined && allChecked )
  291. allChecked = childState;
  292. }, this);
  293. if ( this._setCheckboxState( storeItem, allChecked) ) {
  294. this._updateParentCheckbox( storeItem, allChecked);
  295. }
  296. }),
  297. function(err) {
  298. console.error(this, ": validating checkbox data: ", err);
  299. }
  300. );
  301. },
  302. onCheckboxChange: function(/*dojo.data.Item*/ storeItem ) {
  303. // summary:
  304. // Callback whenever a checkbox state has changed state, so that
  305. // the Tree can update the checkbox. This callback is generally
  306. // triggered by the '_setCheckboxState' function.
  307. // tags:
  308. // callback
  309. }
  310. });
  311. });
  312. require(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree"], function (declare, domConstruct) {
  313. return declare("lib._CheckBoxTreeNode", dijit._TreeNode,
  314. {
  315. // _checkbox: [protected] dojo.doc.element
  316. // Local reference to the dojo.doc.element of type 'checkbox'
  317. _checkbox: null,
  318. _createCheckbox: function () {
  319. // summary:
  320. // Create a checkbox on the CheckBoxTreeNode
  321. // description:
  322. // Create a checkbox on the CheckBoxTreeNode. The checkbox is ONLY created if a
  323. // valid reference was found in the dojo.data store or the attribute 'checkboxAll'
  324. // is set to true. If the current state is 'undefined' no reference was found and
  325. // 'checkboxAll' is set to false.
  326. // Note: the attribute 'checkboxAll' is validated by the getCheckboxState function
  327. // therefore no need to do that here. (see getCheckboxState for details).
  328. //
  329. var currState = this.tree.model.getCheckboxState(this.item);
  330. if (currState !== undefined) {
  331. this._checkbox = new dijit.form.CheckBox();
  332. //this._checkbox = dojo.doc.createElement('input');
  333. this._checkbox.type = 'checkbox';
  334. this._checkbox.attr('checked', currState);
  335. domConstruct.place(this._checkbox.domNode, this.expandoNode, 'after');
  336. }
  337. },
  338. postCreate: function () {
  339. // summary:
  340. // Handle the creation of the checkbox after the CheckBoxTreeNode has been instanciated.
  341. // description:
  342. // Handle the creation of the checkbox after the CheckBoxTreeNode has been instanciated.
  343. this._createCheckbox();
  344. this.inherited(arguments);
  345. }
  346. });
  347. });
  348. require(["dojo/_base/declare", "dijit/Tree"], function (declare) {
  349. return declare( "lib.CheckBoxTree", dijit.Tree,
  350. {
  351. onNodeChecked: function(/*dojo.data.Item*/ storeItem, /*treeNode*/ treeNode) {
  352. // summary:
  353. // Callback when a checkbox tree node is checked
  354. // tags:
  355. // callback
  356. },
  357. onNodeUnchecked: function(/*dojo.data.Item*/ storeItem, /* treeNode */ treeNode) {
  358. // summary:
  359. // Callback when a checkbox tree node is unchecked
  360. // tags:
  361. // callback
  362. },
  363. _onClick: function(/*TreeNode*/ nodeWidget, /*Event*/ e) {
  364. // summary:
  365. // Translates click events into commands for the controller to process
  366. // description:
  367. // the _onClick function is called whenever a 'click' is detected. This
  368. // instance of _onClick only handles the click events associated with
  369. // the checkbox whos DOM name is INPUT.
  370. //
  371. var domElement = e.target;
  372. // Only handle checkbox clicks here
  373. if(domElement.type != 'checkbox') {
  374. return this.inherited( arguments );
  375. }
  376. this._publish("execute", { item: nodeWidget.item, node: nodeWidget} );
  377. // Go tell the model to update the checkbox state
  378. this.model.updateCheckbox( nodeWidget.item, nodeWidget._checkbox.checked );
  379. // Generate some additional events
  380. //this.onClick( nodeWidget.item, nodeWidget, e );
  381. if(nodeWidget._checkbox.checked) {
  382. this.onNodeChecked( nodeWidget.item, nodeWidget);
  383. } else {
  384. this.onNodeUnchecked( nodeWidget.item, nodeWidget);
  385. }
  386. this.focusNode(nodeWidget);
  387. },
  388. _onCheckboxChange: function(/*dojo.data.Item*/ storeItem ) {
  389. // summary:
  390. // Processes notification of a change to a checkbox state (triggered by the model).
  391. // description:
  392. // Whenever the model changes the state of a checkbox in the dojo.data.store it will
  393. // trigger the 'onCheckboxChange' event allowing the Tree to make the same changes
  394. // on the tree Node. There are several conditions why a tree node or checkbox does not
  395. // exists:
  396. // a) The node has not been created yet (the user has not expanded the tree node yet).
  397. // b) The checkbox may be null if condition (a) exists or no 'checkbox' attribute was
  398. // specified for the associated dojo.data.item and the attribute 'checkboxAll' is
  399. // set to false.
  400. // tags:
  401. // callback
  402. var model = this.model,
  403. identity = model.getIdentity(storeItem),
  404. nodes = this._itemNodesMap[identity];
  405. // As of dijit.Tree 1.4 multiple references (parents) are supported, therefore we may have
  406. // to update multiple nodes which are all associated with the same dojo.data.item.
  407. if( nodes ) {
  408. dojo.forEach( nodes, function(node) {
  409. if( node._checkbox != null ) {
  410. node._checkbox.attr('checked', this.model.getCheckboxState( storeItem ));
  411. }
  412. }, this );
  413. }
  414. },
  415. postCreate: function() {
  416. // summary:
  417. // Handle any specifics related to the tree and model after the instanciation of the Tree.
  418. // description:
  419. // Validate if we have a 'write' store first. Subscribe to the 'onCheckboxChange' event
  420. // (triggered by the model) and kickoff the initial checkbox data validation.
  421. //
  422. var store = this.model.store;
  423. if(!store.getFeatures()['dojo.data.api.Write']){
  424. throw new Error("lib.CheckboxTree: store must support dojo.data.Write");
  425. }
  426. this.connect(this.model, "onCheckboxChange", "_onCheckboxChange");
  427. this.model.validateData( this.model.root, this.model );
  428. this.inherited(arguments);
  429. },
  430. _createTreeNode: function( args ) {
  431. // summary:
  432. // Create a new CheckboxTreeNode instance.
  433. // description:
  434. // Create a new CheckboxTreeNode instance.
  435. return new lib._CheckBoxTreeNode(args);
  436. }
  437. });
  438. });