JQuery Easyui using Combotree for multiple selections on the DataGrid

The DataGrid itself has an editing function, and according to the official instructions, add the editor attribute to the column you want to edit. The specific types are as follows:
Text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.

Recently want to use Combotree to achieve a can choose a tree, the way encountered some problems, put here to share:

1. Basic wording:
Editor= "{type: ' Combotree ', Options:{url: ' Datagrid_data.json ', Multiple:true}}"
Here type refers to the type of editor, in order to implement the multi-select tree, we use Combotree. Options is the Combotree option, note that because it extends from combo and tree, its options can be selected from these three controls.
URL refers to the source of data loading, here we use the Datagrid_data.json file in the demo. Multiple is the key to multi-choice, I have been in the tree's options to find, such as checkbox=true, the implementation of the tree's multi-select no problem, but not in the Combotree, and later found the combo option, Try this multiple, finally solved the problem.

2. Save the data:
Once you've written it, you'll be able to implement a multi-select tree on the DataGrid, but after saving you'll find that the selected data is separated by commas, but only the first data is saved. Editor uses Combotree's source code as follows (in jquery.easyui.min.js):

Java code

2. Combotree: {
4. Init:function (container, options) {
6. var editor = jQuery (' <input type= ' text > '). AppendTo (container);
8. Editor.combotree (options);
10. return editor;
12. },
14. Destroy:function (target) {
16. JQuery (target) combotree (' destroy ');
18. },
20. Getvalue:function (target) {
22. return JQuery (target) combotree (' getValue ');
24. },
26. Setvalue:function (target, value) {
28. JQuery (target) combotree (' SetValue ', value);
30. },
32. Resize:function (target, width) {
34. JQuery (target) combotree (' resize ', width);
36. }
38. }

Note that the GetValue and SetValue methods, they call the Combotree (' GetValue '), and Combotree (' SetValue ', value); By looking at the API (combo methods) you can find GetValue and SetValue are used to get and set single values, and if you want to set and get multiple values, you need to getvalues,setvalues
So rewrite the combotree extension:

Java code

2. Jquery.extend (JQuery.fn.datagrid.defaults.editors, {
4. Combotree: {
6. Init:function (container, options) {
8. var editor = jQuery (' <input type= ' text > '). AppendTo (container);
10. Editor.combotree (options);
12. return editor;
14. },
16. Destroy:function (target) {
18. JQuery (target) combotree (' destroy ');
20. },
22. Getvalue:function (target) {
24. var temp = jQuery (target). Combotree (' getValues ');
26. //alert (temp);
28. return Temp.join (', ');
30. },
32. Setvalue:function (target, value) {
34. var temp = value.split (', ');
36. //alert (temp);
38. JQuery (target) combotree (' setvalues ', temp);
40. },
42. Resize:function (target, width) {
44. JQuery (target) combotree (' resize ', width);
46. }
48. }
50. });

That is, the value obtained from Combotree is a comma-delimited (delimiter can be changed, the default is a comma) of the string, the previous SetValue method only takes the first element, if you convert an array, you can pass as a parameter to the Setvalues method, So the DataGrid takes it all.

OK after the above two steps, the DataGrid on the direct operation of the multi-tree on the implementation of, of course, we only use some of the simple options, if you need more features, you can refer to the official API:
http://www.jeasyui.com/documentation/index.php#

JQuery Easyui using Combotree for multiple selections on the DataGrid