Rails 5：来自日期哈希的 JS 树视图

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

在查看此哈希时打印出来：

{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}}}

在控制器中我有这个：

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

如何将上面的 hash 变成一些漂亮的 javascript 树视图？ 对于example like here：

如果有任何提示，我将不胜感激。谢谢！

加法

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

更新

在视图中有这个填充树视图的代码：

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

请问如何将年份（在下面的示例中为 2017 年、2016 年）设为根节点？我想摆脱“根”。

data 的 JS 像这样：

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

会像这样摆脱“节点”：

在“儿童 1”、“儿童 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 %> ]