javascript - rails 5 : JS treeview from hash of dates

Question

我有一个模型，其中找到不同的日期，然后按年、月、日对值进行分组:

def self.tree
  dates = MyModel.order("date_trunc('day', datetime_column) DESC")
           .distinct.pluck("date_trunc('day', datetime_column)")
  hash = Hash.new { |h, y| h[y] = Hash.new { |h2, m| h2[m] = {} } }
  dates_by_ymd = dates.each_with_object(hash) do |date, h|
    h[date.year][date.strftime('%B')][date.strftime('%b %d')] = date
  end
end

在 View 中打印出这个哈希值:

{2016=>{"November"=>{"Nov 20"=>Sun, 20 Nov 2016 05:20:00 UTC +00:00}, "December"=>{"Dec 12"=>Mon, 12 Dec 2016 04:05:00 UTC +00:00, "Dec 24"=>Sat, 24 Dec 2016 18:51:33 UTC +00:00, "Dec 30"=>Fri, 30 Dec 2016 06:20:00 UTC +00:00}}, 2017=>{"December"=>{"Dec 12"=>Tue, 12 Dec 2017 15:15:00 UTC +00:00}}}

在 Controller 中我有这个:

def update_placements
  @placements = #code which finds placements
  @treeview = @placements.tree
  respond_to do |format|
    format.js
  end
end

如何将上面的散列转换为一些漂亮的 javascript TreeView ？ 对于 example like here :

如果有任何我应该关注的提示，我将不胜感激。谢谢!

添加

此外，我需要能够获取特定日期的记录。基本上它会打开年、月、日，然后填充特定日期的记录。我正在考虑将年、月、日一起加载，然后每天的记录将单独加载，因为表可能会变得很大。可以在购买 datetime_column 中找到当天的记录。

更新

View 中有填充 TreeView 的代码:

<div id="tree">
    <script>
       $('#tree').jstree({
           'core' : {
               'data' : [ <%= raw @treeview %> ]
              }
          });
    </script>
</div>

如何将年份(在下面的示例中为 2017 年、2016 年)作为根节点？我想摆脱“根”。

带有数据的JS如下:

$('#tree').jstree({
    'core' : {
        'data' : [ { 'text' : 'Child 1' }, 'Child 2' ]
         }
});

会像这样摆脱“节点”:

在“Child 1”、“Child 2”中...我需要填充我的 2016 年、2017 年等。上面 JS 中的“文本”就是代码中的“数据”。

Answer 1

一旦你有dates_ymd :

{2017=>
  {1=>
    {8=>#<Date: 2017-01-08 ((2457762j,0s,0n),+0s,2299161j)>,
     3=>#<Date: 2017-01-03 ((2457757j,0s,0n),+0s,2299161j)>}},
 2015=>
  {12=>{5=>#<Date: 2015-12-05 ((2457362j,0s,0n),+0s,2299161j)>},
   11=>{7=>#<Date: 2015-11-07 ((2457334j,0s,0n),+0s,2299161j)>}}}

您可以使用此方法:

def to_js_tree(hash = tree, node = :root)
  hash.each_with_object({data: node}){|(k,v), new_hash|
    new_hash[:children] ||= []
    if v.is_a?(Hash)
      new_hash[:children] << to_js_tree(v,k)
    else
      new_hash[:children] << {data: k, :children => [{data: v}]}
    end
  }
end

示例:

pp to_js_tree(dates_by_ymd)
# =>
{:data=>:root,
 :children=>
  [{:data=>2017,
    :children=>
     [{:data=>1,
       :children=>
        [{:data=>8,
          :children=>
           [{:data=>#<Date: 2017-01-08 ((2457762j,0s,0n),+0s,2299161j)>}]},
         {:data=>3,
          :children=>
           [{:data=>#<Date: 2017-01-03 ((2457757j,0s,0n),+0s,2299161j)>}]}]}]},
   {:data=>2015,
    :children=>
     [{:data=>12,
       :children=>
        [{:data=>5,
          :children=>
           [{:data=>#<Date: 2015-12-05 ((2457362j,0s,0n),+0s,2299161j)>}]}]},
      {:data=>11,
       :children=>
        [{:data=>7,
          :children=>
           [{:data=>
              #<Date: 2015-11-07 ((2457334j,0s,0n),+0s,2299161j)>}]}]}]}]}

和

puts to_js_tree(dates_by_ymd).to_json
#=> {"data":"root","children":[{"data":2017,"children":[{"data":1,"children":[{"data":8,"children":[{"data":"2017-01-08"}]},{"data":3,"children":[{"data":"2017-01-03"}]}]}]},{"data":2015,"children":[{"data":12,"children":[{"data":5,"children":[{"data":"2015-12-05"}]}]},{"data":11,"children":[{"data":7,"children":[{"data":"2015-11-07"}]}]}]}]}

就您而言，您可以直接调用:

@placements.to_js_tree.to_json

如果你已经定义了

def self.to_js_tree(hash = tree, node = :root)

在您的展示位置模型中。

更新

如果你不想要一个以年份作为子节点的根节点，而是一个以多棵树和年份作为根的数组，你可以添加一个新的 to_js_trees方法:

def to_js_trees(hash = tree)
  hash.map{|year, year_tree|
    to_js_tree(year_tree, year)
  }
end

注:@treeview现在已经是一个数组了，所以你可以使用'data' : <%= raw @treeview %>而不是'data' : [ <%= raw @treeview %> ]