javascript - 使用jquery绘制垂直线

Question

我有以下 json，我需要创建一个网格，并且在网格上方还需要根据值显示垂直线:

var arr = [];

 arr= [
   {"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
   {"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
   {"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
 ]

现在我需要创建一个网格，在网格之上，需要创建基于“值”的垂直条。由于有 3 个值，因此将创建 3 个柱。 Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted .同理，当第一个竖条被选中时，网格中的第一个行被选中。创建网格不是问题，因为我使用的是 KendoUI 网格，但创建垂直条和选择是我卡住的地方。有意见吗？

谢谢。

Answer 1

根据@Bogdan M. 关于使用 div 元素的建议，我设置了一个 jsFiddle demonstrating vertical bars built using jQuery .它将值的输入作为数字数组进行中继，并将这些值转换为 DOM 元素，并相应地设置它们的高度。

可以非常轻松地更新此演示以使用 OP 提供的数据结构，并且还可以添加选择行为功能。

可以在 the full demo on jsFiddle 中查看此最终版本(包含完整的解决方案，用于构建组件和为其分配选择行为) .

现在剩下的就是将选择功能的处理程序(作为单元格/行监听器)分配给 KendoUI 网格。