撰写时间:2019年2月20日星期三

在我们做项目的过程中,有时候需要用到一些带复选框的树形数据来做一些特殊的操作,这类数据相对于一般树形数据来说,它是可以点击复选框进行对每条数据进行选中的,可以进行批量的数据处理,所以需要大批量的处理数据的时候这类带复选框的树形数据就比较方便了。那么该怎么做呢,首先我们需要一个插件 ztree
首先我们要把控件拉到项目里面去,首先是引入插件的CSS样式和JS代码
然后绑定树形数据的代码
CSS
树形控件设置带复选框数据
JS树形控件设置带复选框数据
引入插件完成后,我们就要在HTML里面给控件写出一个装数据的容器了树形控件设置带复选框数据
HTML写完后,现在就是查询出数据,将数据以我们需要的树形结构绑定到这个容器里面显示出来了,
Controller控制层查询数据:
树形控件设置带复选框数据
Views视图层获取数据,定义一个数组,循环判断把数据都装到数组里面去,在根据id获取到我们HTML里面容器,然后把这个数组绑定到容器上面去,最后就是启动项目,显示出树形结构数据了。
树形控件设置带复选框数据
引入插件复选框的JS代码
树形控件设置带复选框数据
然后定义一个方法返回点击复选框时返回的 树形ID 、名称和选中状态
树形控件设置带复选框数据
树形控件设置带复选框数据
这时候你获取到了树形ID 、名称和选中状态,具体想做什么功能就根据自己的实际要求去做。

界面显示:
树形控件设置带复选框数据

相关文章: