- jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的,并根据MIT许可进行分发。
- jsTree易于扩展,可定义和配置,它支持HTML和JSON数据源以及AJAX加载。
- jsTree可以在盒子模型(内容框或边框)中正常运行,可以作为AMD模块加载,并具有用于响应式设计的内置移动主题,可以轻松自定义。它使用jQuery的事件系统,因此对树中各种事件的绑定回调是熟悉且容易的。
最近项目中有一个需求;一个社区下有很多网格,当用户点击选择网格的时候,就把不同类型的网格设置成不同的颜色;比如 有的网格只有信息员,就设置为蓝色;有的网格只有处理员设置成红色(这TM是什么需求);
关于JSTree设置节点颜色,查了好久,也没有解决;最后在自己的努力下,终于成了(真TM简单);先看看效果;
这个图片展示的是jsTree中文网的demo,点击下载下来就行;
AJAX demo 请求的是一个json文件,格式如下;
[{"id":1,"text":"Root node","a_attr" : {"style":"color:red"},"children":[{"id":2,"text":"Child node 1","a_attr" : {"style":"color:blue"}},{"id":3,"text":"Child node 2"}]}
]
其中 ` "a_attr" : {"style":"color:red"}, `是我调试后的代码;就是为节点设置颜色的;
如果你的需求是需要在后台处理,并且设置颜色,那么也有办法;
// 如果后台返回的是一个List<HashMap<String,Object>>树结构, 那么就这样写List<Map<String,Object>> mapList = new ArrayList<>();// 新建一个Map,把样式放入进去Map paraMap = new HashMap(1);paraMap.put("style","color:blue");// 把Map转成JSON,Object o = JSON.toJSON(paraMap);map.put("a_attr",o);mapList.add(map);return mapList;
如果你的需求是,a_attr中要放实体信息,不能只放样式;那么也有办法;
先给你的实体类加一个类型为String的style属性;然后entity.setStyle("color:blue"); 最后
stringObjectMap.put("a_attr", entity);
这样效果也能出来;
一杯茶,一包烟,一个BUG改一天;