在angularjs中构建树结构

时间:2016-09-23 05:18:24

标签: javascript angularjs node.js treeview

我想在angularjs中动态构建一个树,结构从数据库中检索如下。

RSpec.configure do |config|
  config.before :all do
    ENV['PRECOMPILE_ASSETS'] ||= begin
      case self.class.metadata[:type]
      when :feature, :view
        STDOUT.write "Precompiling assets..."

        require 'rake'
        Rails.application.load_tasks
        Rake::Task['assets:precompile'].invoke

        STDOUT.puts " done."
        Time.now.to_s
      end
    end
  end
end

如果级别0,则其主节点和级别1变为父节点,级别2变为父子节点,级别3变为该子节点等等。

我尝试了很多例子并且没有用,唯一的事情就是我认为要做很多if语句,但我需要更短更有效的方法。

1 个答案:

答案 0 :(得分:0)

您可以使用jsTree.jsTree是jquery插件,它提供交互式树。它完全免费,开源并在MIT许可下分发。 jsTree易于扩展,可扩展,可配置,支持HTML& JSON数据源和AJAX加载。您可以在https://www.jstree.com/

上找到更多详细信息

这是代码

$('#jstree_demo').jstree({
  "core" : {
    "animation" : 0,
    "check_callback" : true,
    "themes" : { "stripes" : true },
    'data' : {
      'url' : function (node) {
        return node.id === '#' ?
          'ajax_demo_roots.json' : 'ajax_demo_children.json';
      },
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  },
  "types" : {
    "#" : {
      "max_children" : 1,
      "max_depth" : 4,
      "valid_children" : ["root"]
    },
    "root" : {
      "icon" : "/static/3.3.2/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
  "plugins" : [
    "contextmenu", "dnd", "search",
    "state", "types", "wholerow"
  ]
});

您也可以在https://www.jstree.com/demo/

找到工作演示

以下是使用jstree https://www.jstree.com/docs/json/

的数据格式