数据字典-treeview树的实现
什么是数据字典?
顾名思义数据字典=数据+字典 ,字典是用来查询东西的,所以数据字典就是描述数据信息的集合.数据字典是一种通用的程序设计方法,程序中有很多主体,每个主体的都有很多属性,每种属性都有很多取值并且不断变化.
使用数据字典的优点: 1.简化了主体类的业务逻辑 2.高了系统的灵活性、通用性，减少了主体和属性的耦合度 3.使数据库表结构和程序结构条理上更清楚，更容易理解
数据字典表设计
1.二级数据字典设计方案 ,第一级:数据字典目录 第二级:数据字典明细
2.层次表设计,多级字典的设计
使用多级字典的设计使用树状结构
bootstrap-treeview插件
1.下载js插件
下载路径：https://www.jq22.com/jquery-info10461
官网路径：https://www.npmjs.com/package/bootstrap-treeview
2.引入项目中
<link rel="stylesheet" href="/static/js/plugins/bootstrap-treeview/bootstrap-treeview.min.css">
<script src="/static/js/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
3.定义树状结构标签,对应好样式的id
4.加载树状结构数据
5.查询目录树中的数据,后台
观察结构
- bootstrap-treeview格式
[
//无子节点
{
text:"xxx"
},
//带子节点
{
text:"yyy",
nodes:[
{
text:"yyy子节点"
},
{
text:"yyy子节点"
}
]
}
]
- 数据字典表结构数据
[
{
id:1,
name:"业务",
sn:"business",
intro:"..."
parent_id:null,
parent_name:null,
children:[
{
id:2,
name:"车险",
sn:"",
intro:"..."
parent_id:1,
parent_name:"业务",
},{
id:3,
name:"财产险",
sn:"",
intro:"..."
parent_id:1,
parent_name:"业务",
}
]
}
]
观察表结构,进行数据查询
bootstrap-treeview数据结构，带有明显的层级结构,通过观察结构基本一致,区别在于
treeview属性 text 跟 nodes 数据字典表数据是name,children
按照bootstrap-treeview插件要求,对数进行处理,实现树状结构,所以我们需要思考的是将表结构的name和children替换成插件结构中的text 跟 nodes
-
我们可以直接将表名中的替换成bootstrap-treeview数据结构中的属性即可,但是后期改的话会很麻烦(不推荐)
-
使用Map方式替换(推荐)
思考:如何进行转换?
方案二: 使用Map替换,进行数据改造
1.使用JSON.toString()把集合对象变成JSON格式字符串
2.再利用字符串的replaceAll的替换方法,将name替换成text,children替换为nodes
3.替换完后,把json格式字符串转回集合对象
//参数1:list集合json格式字符串,参数2:集合泛型
通过JSON.parseArray(str,Map.class)
思路:
- 通过观察,父节点(parent_id)都为null,可以通过查询顶级目录parent_id=null的数据
- 通过遍历所有数据拿到根节点,查询所有(儿子)子节点
- 进行数据转换
- 页面的treeview插件用到属性 text 跟 nodes,而查询出来的数据是name,children
实现部分代码
- SystemDictionaryController控制器
@Controller
@RequestMapping("/systemDictionary")
public class SystemDictionaryController {
@Autowired
private ISystemDictionaryService systemDictionaryService;
//处理分页查询页面请求
@RequestMapping("/list")
public String list(@ModelAttribute("qo") SystemDictionaryQueryObject qo, Model model){
PageInfo<SystemDictionary> pageInfo = systemDictionaryService.query(qo);
model.addAttribute("pageInfo",pageInfo);
return "systemDictionary/list";
}
//获取树状结构数据 异步
@RequestMapping("/treeData")
@ResponseBody
public List<Map> treeData(){
return systemDictionaryService.queryTreeData();
}
}
- ISystemDictionaryService实现接口
//查询树状结构的数据
List<Map> queryTreeData();
- SystemDictionaryServiceImp接口实现类
@Override
public List<Map> queryData() {
//查询parent_id为null的父节点
//查询所有数据
List<SystemDictionary> all = systemDictionaryMapper.selectAll();
ArrayList<SystemDictionary> list = new ArrayList<>(); //存储节点
//遍历所有数据
for (SystemDictionary systemDictionary : all) {
//判断parent_id是否为空
if (systemDictionary.getParentId() == null) {
//如果是空,那就加进list集合,拿到根节点
list.add(systemDictionary);
//拿到二级节点,这样只能拿到二级
// systemDictionary.setChildren(findChildren(all,systemDictionary.getId()));
}
//想要要全部 下级节点,需要进行不断的拿自己节点,可以使用递归,定义一个方法
allChildren(all,list);
}
//数据转换.把list集合转成JSON格式的字符串
String str = JSON.toJSONString(list);
//转成字符串,name,children
str=str.replaceAll("name","text").replaceAll("children","nodes");
//替换后,转成Map集合
List<Map> maps = JSON.parseArray(str, Map.class);
return maps;
}
-----------------------------------------------------------------------------
//找子节点的方法,把子节点添加到父节点中
public List<SystemDictionary> findChildren(List<SystemDictionary> all ,Long parentId) {
ArrayList<SystemDictionary> list = new ArrayList<>(); //存储节点
//遍历所有数据
for (SystemDictionary children : all) {
//判断如果自己拿到的parentId,等于我传入跟节点的id,那就加进list集合中
if (children.getParentId()==parentId){
list.add(children);
}
}
return list;
}
-------------------------------------------------------------------------------
/**
* 参数一:全部数据 ,参数二:全部儿子对象集合
* @param all
* @param children
*/
private void allChildren(List<SystemDictionary> all, List<SystemDictionary> children) {
//对儿子进行判断,为空就不拿了
if (children==null ||children.size()==0){
return;
}
//如果还有儿子, 那就调用找儿子的方法,找到子节点(儿子)
for (SystemDictionary child : children) {
child.setChildren(findChildren(all,child.getId()));
//儿子的儿子....
//递归
allChildren(all,child.getChildren());
}
}
- list页面实现
<script>
$(function () {
var tree; //抽出tree,存的是一个jQuery对象
$.get("/systemDictionary/treeData", function (data) {
tree = $('#treeview-searchable').treeview({
color: "#428bca",
//levels: 1,
data: [{text: "数据字典", nodes: data}],
onNodeSelected: function (event, node) { //节点选中触发事件
if (node.id == undefined) {
return;
}
//console.log(node);
//拿到node.id是用来查询数据库的数据,拿到nodeId是为了点击查询后,进行下一步回显
window.location.href = '/systemDictionary/list?parentId=' + node.id + '&nodeId=' + node.nodeId;
}
});
//选中当前节点,点击的节点
tree.treeview('selectNode', [${qo.nodeId}, {silent: true}]);
//展开给点节点
tree.treeview('expandNode', [${qo.nodeId}, {silent: true}]);
//如果只是点击当前节点并展开,也只是展开一层,我们需要点击下一层怎么办?
if ('${qo.nodeId}' != 0) {
var node = tree.treeview('getNode', ${qo.nodeId}); //返回当前节点的id
while (node.parentId) {
var parent = tree.treeview('getParent', node);//返回当前给定节点的父节点
tree.treeview('expandNode', [parent, {silent: true}]); //展开当前节点
node = tree.treeview('getNode', node.parentId); //返回当前节点的id
}
}
});
});
</script>
最后展示效果
1550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
