JQuery Easyui using Combotree for multiple selections on the DataGrid

Source: Internet
Author: User

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
  1. Combotree: {
  2. Init:function (container, options) {
  3. var editor = jQuery (' <input type= ' text > '). AppendTo (container);
  4. Editor.combotree (options);
  5. return editor;
  6. },
  7. Destroy:function (target) {
  8. JQuery (target) combotree (' destroy ');
  9. },
  10. Getvalue:function (target) {
  11. return JQuery (target) combotree (' getValue ');
  12. },
  13. Setvalue:function (target, value) {
  14. JQuery (target) combotree (' SetValue ', value);
  15. },
  16. Resize:function (target, width) {
  17. JQuery (target) combotree (' resize ', width);
  18. }
  19. }


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
  1. Jquery.extend (JQuery.fn.datagrid.defaults.editors, {
  2. Combotree: {
  3. Init:function (container, options) {
  4. var editor = jQuery (' <input type= ' text > '). AppendTo (container);
  5. Editor.combotree (options);
  6. return editor;
  7. },
  8. Destroy:function (target) {
  9. JQuery (target) combotree (' destroy ');
  10. },
  11. Getvalue:function (target) {
  12. var temp = jQuery (target). Combotree (' getValues ');
  13. //alert (temp);
  14. return Temp.join (', ');
  15. },
  16. Setvalue:function (target, value) {
  17. var temp = value.split (', ');
  18. //alert (temp);
  19. JQuery (target) combotree (' setvalues ', temp);
  20. },
  21. Resize:function (target, width) {
  22. JQuery (target) combotree (' resize ', width);
  23. }
  24. }
  25. });


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.