带有数据表的 JSTree

Question

我在一个页面上有两列，左边是一个复选框 jstree，右边是一个 table using datatables。 table 行和树都在启动时加载。

我想在树上选择节点时显示一行，在未选中节点时隐藏该行，为此我使用 class。我在遍历数据 table 中的所有行并设置 class 时遇到问题，因此我可以对其进行过滤。这是我在下面使用的代码，但它不起作用。我无法获得 table 行的任何 ID。

table.rows().iterator( 'row', function ( context, index ) {
                var tableNode = $(this.row(index).node());
                tableNode.removeClass('VisibleRow').removeClass('HiddenRow').addClass('HiddenRow');
            var id = tableNode.id;
            var treeNode = data.instance.get_node(id);

            if(treeNode != undefined){
                var currentId = '#row-' + node.id;
                var rowInTable =  table.row(currentId).node();
                $(rowInTable).removeClass("HiddenRow");
                $(rowInTable).addClass("VisibleRow");
            }

});

如果有更好的方法，请告诉我。

Answer 1

我相信您可以使用下面的代码片段来完成。行迭代基于 jQuery，那里没有 DataTables-specific 逻辑。

同时检查演示 - Fiddle Demo

var $tableRows = $('#yourTableId').find('tr');

$('#yourTreeContainer').on('select_node.jstree', function(e, data) {

    $tableRows.each(function() {
        if (this.id === '#row-' + data.node.id) {
            $(this).removeClass('HiddenRow');
        } else {
            $(this).addClass('HiddenRow');
        }
    });

});

Answer 2

我创建了相同的文件并进行了一些更改并且它工作正常，但即使有隐藏行我也不希望数据表显示空页。有什么建议吗？

这是我的代码

$('#jstree')
  .jstree({
    core: {
      data: treeData
    },
    checkbox: {       
      three_state : false, // to avoid that fact that checking a node also check others
      whole_node : false,  // to avoid checking the box just clicking the node 
      tie_selection : false // for checking without selecting and selecting without checking
    },
    "plugins" : ["checkbox","conditionalselect"]
  })
  .on("check_node.jstree uncheck_node.jstree", function(e, data) {

   $tableRows.each(function(){  

   //$(this).addClass('HiddenRow'); //should not be there

     if( this.id === data.node.id ) {
       if(data.node.state.checked ){
         //alert("removeClass");
         $(this).removeClass('HiddenRow');
       }else{
         //alert("addClass");
         $(this).addClass('HiddenRow');
       };
     }else{

     }
   })
})

这是linkhttp://jsfiddle.net/cf7tata9/56/#&togetherjs=jqPTfx3gpk

带有数据表的 JSTree

JSTree with Datatables

javascript

jquery

datatables

jstree