JSTree 字体真棒复选框

Question

我有一个使用 jsTree 的树结构，像这样：

<div id="SampleContainer">
<ul> 
  <li>
    Top 1
    <ul>
      <li>
        Sub 1
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
      <li>
        Sub 2
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
    </ul>
  </li>

</ul>
</div>

我想为复选框添加 font-awesome 图标：

我试过这样做：

$(document).ready(function(){
   $("#SampleContainer").jstree({
    "plugins": ["checkbox"],
    core: {
      "themes": {
        "icons": false,
        "responsive": true
      }
    }
  });
    $('#SampleContainer').on('ready.jstree click', function (e, data) {     
        $('a > i.jstree-checkbox').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-square-o');

    $('a > i.jstree-clicked').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-check-square');
      });     
       });

这个图标 'fa fa-square-o' 即将推出。看不到 onclick 'fa fa-check-square'.!

样本设计：

开发画面：

有人知道这个问题吗？

Answer 1

我添加了一个新的 toggleCheckClasses 函数，它根据复选框的状态添加/删除右边的 fa 类。我将此函数附加到 treejs-ready / click 处理程序中的树节点。

编辑：我添加了子元素的切换类

$(document).ready(function() {
    $("#SampleContainer").jstree({
        "plugins": ["checkbox"],
        core: {
            "themes": {
                "icons": false,
                "responsive": true
            }
        }
    });
    $('#SampleContainer').on('ready.jstree click', function(e, data) {
        $('a > i.jstree-checkbox')
            .removeClass('jstree-icon jstree-checkbox') // removing jstree classes
            .addClass('fa fa-square-o') // adding the fa non-checked checkbox class
            .on('click', function() { // attaching the handler that toggles the checked / unchecked class
                toggleCheckClasses($(this), $(this).hasClass('fa-square-o'));
            });
    });

    function toggleCheckClasses(element, show) {
        if (show) {
            element.removeClass('fa-square-o');
            element.addClass('fa-check-square-o');
        } else {
            element.removeClass('fa-check-square-o');
            element.addClass('fa-square-o');
        }

        var children = element.parent().siblings(".jstree-children").find(".jstree-anchor .fa");

        children.each(function() {
            toggleCheckClasses($(this), show);
        });

    }

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<div id="SampleContainer">
<ul> 
  <li>
    Top 1
    <ul>
      <li>
        Sub 1
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
      <li>
        Sub 2
        <ul>
          <li>
            A
          </li>
          <li>
            B
          </li>

        </ul>
      </li>
    </ul>
  </li>

</ul>
</div>

Answer 2

树中的交互在 jquery css 类操作中没有显示干净。

我用 high-resolution 图标创建了一个触摸友好的 jsTree

我写了一个额外的 CSS 文件，它用可缩放的平面 font-awesome 图标（FontAwesome 版本：4.7.0 FontAwesome v4）覆盖了 jsTree 的复选框和插入符号样式。

您可以使用以下 CSS 包含在 jsTree 的 CSS 文件和 FontAwesome v4.

之后

预览：

CSS:

.jstree-icon.jstree-checkbox, .jstree-no-dots .jstree-closed>.jstree-ocl, .jstree-no-dots .jstree-open>.jstree-ocl {
  background-image: none;
  background-position: initial;
  color: #767676;

  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jstree-icon.jstree-checkbox:before {
  content: "\f096";
  font-size: 17px;
}

.jstree-default-large.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:before, .jstree-default-large .jstree-checked>.jstree-checkbox:before {
  content: "\f046";
  font-size: 17px;
  margin-left: 2px; /* checkedSquare icon is wider -> margin simulates same square position as unchecked */
}

.jstree-default-large .jstree-anchor>.jstree-undetermined:before{
  content: "\f147";
  font-size: 17px;
}

.jstree-default-large>.jstree-no-dots .jstree-closed>.jstree-ocl:before{
  content: "\f0da";
  line-height: 32px;
}

.jstree-default-large>.jstree-no-dots .jstree-open>.jstree-ocl:before{
  content: "\f0d7";
  line-height: 32px;
}

所以不需要通过javascript/jquery.

来操作jsTree的DOM

文件夹图标是通过 jsTree() 初始化设置的（fontAwesome 的 fa-folder-open。Ecerything 颜色为 CSS。

.jstree({
    "types":   {
        "default": {
            "icon": "fa fa-folder-open treeFolderIcon",
        }
    },
    "plugins": plugins,
    "core":    {
        "themes": {"variant": "large"},
        }
    }
});

JSTree 字体真棒复选框

JSTree font awesome check Box

javascript

jquery

html

jstree

jstree-search