jsTree Checkbox plug-in options

Help / Discuss
1

Hi!

Tell me how to configure / use the jsTree Checkbox plug-in options

$.jstree.defaults.checkbox.three_state
$.jstree.defaults.checkbox.visible

and others.

Current JSX code:

require(['jquery', "$!services.webjars.url('org.xwiki.platform:xwiki-platform-tree-webjar', 'require-config.min.js', {'evaluate': true})"], function($) {
  require(['tree'], function($) {
    var docUrl = "$escapetool.javascript($request.getParameter('prmDoc'))";
    $('.xtree').on("changed.jstree", function (e, data) {
      var i, j, treeSelectedValue = [];
      for (i = 0, j = data.selected.length; i < j; i++) {
        var selId = data.instance.get_node(data.selected[i]).id ;
        var selText = data.instance.get_node(data.selected[i]).text;
        var SetItem = $(this).map(function() {return selId + ":" + selText}).get().join();
        treeSelectedValue.push(SetItem);
      };
    if (selText != docUrl) {sendTreeSelectedValue(docUrl, treeSelectedValue)}; //https://github.com/vakata/jstree/issues/1978 "Suppress firing the changed.jstree event upon initialization"

    function sendTreeSelectedValue(docUrl, value) {
      var UrlParams = {'xpage': 'plain','outputSyntax': 'plain', 'hdwTypeValue': JSON.stringify(value)};
      new Ajax.Request(docUrl, {
        parameters: UrlParams,
        onSuccess : function(response) {}
      });
    }
  });
  });
});

Tree data (as Custom Display):

{{tree checkboxes="true" icons="false" showRoot="false" edges="false"}}

  {{html}}
    <ul> 
      <li><a>Group 1</a>
        <ul>
          <li><a>SubGroup 1</a></li>
            <ul>
              <li><a>Item 11</a></li>
              <li><a>Item 12</a></li>
              <li><a>Item 13</a></li>
            </ul> 
          <li><a>SubGroup 2</a></li>
            <li><a>Item 21</a></li>
            <li><a>Item 22</a></li>
          </ul>
        </li>
        <li>
          <a>SubGroup 3</a>
          <ul>
            <li><a>Item 31</a></li>
            <li><a>Item 32</a></li>
          </ul>
        </li>
        <li>
          <a>Item 4</a>
        </li>
      </ul>
  {{/html}}

Thanks

2

It’s not possible if you use the {{tree}} macro. You need to use directly the underlying tree widget. I’ve added an example here https://extensions.xwiki.org/xwiki/bin/view/Extension/Tree%20Widget#HStaticTree .

1 Like
3

Cool!

Thanks, it’s works, but <li data-jstree='{"checkbox_disabled":true}'>checked</li> doesn’t :frowning:
Is there a problem of non-matching versions?