jstree节点选择及操作简单样例

jstree是一款不错的树形菜单插件，今天就简单记录下jstree树节点的选择与操作

基本的代码如下：

配置树

绑定事件

第一步：通过jstree()方法对树使用的插件和data进行配置，这里加入了checkbox插件，并且配置了被选中的保持样式。

第二步：通过on给树的节点绑定了click事件，这里获取树节点的id方法为

var id = $(e.target).parents('li').attr('id');

每当用户对树节点进行点击后，将自动添加该节点的内容到新的容器中，并且如果checkbox是不被选中状态，新容器也将相应的删除。

第三步：通过live给新容器绑定click事件，每当点击某个li，即做删除操作，通过this.id和处理找到新容器中li对应在树里的节点id后，使用deselect_node方法取消掉节点的选择状态。

备注：主要思路是树的节点和新容器中生成的li元素内容一一对应起来，通过id进行对应，为了便于区分以及同页面尽量不要出现同id的情况，所有新生成的元素id为其对应树节点id+'s'。

相应的效果图如下：

效果图

树节点可操作下侧li的动态添加与删除，同时li可以反操作改变树的节点选取。