数据字典如何玩(一) 之显示

逻辑概念以及实现的需求效果

• 前提须知:bootstrap分页插件使用,

逻辑图

前端效果图

• 左边为数据目录列表, 点击左边数据目录后,右边则会显示出相应的数据明细,点击数据明细(若此明细是属于上级明细)后也会显示出对应的下级明细
  

准备工作

• 根据以下表结构,使用mybatis逆向工程生成对应的文件

数据库表结构

• 数据字典目录
  
• 数据字典明细表结构
  

实体类部分

• 逆向工程后,数据明细实体类属性需要更改,将type_id改成type名的数据目录对象,将parent_id改成parent名的明细对象
• 因为数据字典明细和数据字典目录,是多对一关系,所以需要在数据字典明细中设置字典目录对象 作为属性type
  

定义过滤查询对象

• typeId过滤,查找指定数据目录对象的 数据明细信息
• parentId过滤,查找指定上级明细 下的 数据明细信息
  
• 此部分用于分页,被以上类继承,主要为了分页插件服务
  

后端部分

控制器部分

• 获取页面所需数据,将所有数据目录对象放在页面左边排列,将被过滤后的明细对象放在右边显示
• 记得给qo参数 加 @ModelAttribute(“qo”),才可回显数据

 //    处理查询所有字典明细的请求,响应HTML
    @RequiredPermission(name = "字典明细页面", expression = "systemDictionaryItem:list")
    @RequestMapping("/list")
    public String list(Model model, @ModelAttribute("qo") SystemDictionaryItemQueryObject qo) {
        model.addAttribute("dictionaries",systemDictionaryService.listAll());//获取所有数据目录对象
        model.addAttribute("pageInfo", systemDictionaryItemService.query(qo));//根据过滤信息,获取所有数据明细对象
        return "systemDictionaryItem/list";//WEB-INF/views/systemDictionaryItem/list.jsp
    }

获取过滤后数据明细对象的业务层实现类方法

• 这里使用到了分页插件的方式,具体不多做解释,不懂请跳转至:分页插件使用
  

 public PageInfo<SystemDictionaryItem> query(Queryobject qo) {
//分页插件  不需要我们写count语句,它会自动生成
//分页插件  高查sql不需要我们自己写limt,它会在你原本的sql上自动拼接limit上去并执行
//分页插件  limit是插件自动计算参数并拼接上去,qo
//分页插件  提供PageInfo类,用于封装分页相关数据,不需要自己写PageResult类
        PageHelper.startPage(qo.getCurrentPage(), qo.getPageSize());//开始分页(对下一个sql进行分页),传当前页和每页显示数量
        List<SystemDictionaryItem> systemDictionaryItems = systemDictionaryItemMapper.selectForList(qo);
        return new PageInfo<>(systemDictionaryItems);
    }

查询数据明细使用到的sql部分

• 也就是以上业务层方法中的systemDictionaryItemMapper.selectForList(qo);
• 传入的是qo过滤对象(实际即SystemDictionaryItemQueryObject),对过滤对象的属性进行过滤判断
• 自己连自己,也是数据明细与其上级明细 连,获取所有数据明细,若有上级明细则封装进实体类对应的上级明细属性中, (记住,必须使用内连接,left join,才可以 不管此明细有没上级明细 都可以查找出来)
  

resultMap 封装部分

• 将以上sql语句查找到的上级明细属性 封装进明细实体类中的 上级明细对象中去
  

前端部分

分页部分

分页插件的js部分

• 注意这里有使#searchForm表单进行了提交

  //分页
    $(function(){
        $("#pagination").twbsPagination({
                totalPages: ${pageInfo.pages} || 1, //总页数
                startPage: ${pageInfo.pageNum} || 1, //当前页
                visiblePages:5, //显示几页
                first:"首页",
                prev:"上页",
                next:"下页",
                last:"尾页",
                initiateStartPageClick:false,
                onPageClick:function(event,page){//点击页数 会执行方法
					$("#currentPage").val(page);
					$("#searchForm").submit();
				}
		});
    })

分页插件独有的表单部分

• 放进显示页面中,每次点击’上一页’ 和’下一页’的时候,分页插件都会使此表单进行提交,进行过滤
• 将后端qo过滤对象的值 放入进去,并且用input的hidden进行隐藏,保证每次的’下一页’ 都是过滤后的效果

   <!--高级查询--->
                        <form class="form-inline" id="searchForm" action="/systemDictionaryItem/list" method="post">
                            <input type="hidden" name="currentPage" id="currentPage" value="1">
                            <input type="hidden" name="typeId"  value="${qo.typeId}">
                            <input type="hidden" name="parentId"  value="${qo.parentId}">
                            <a href="#" class="btn btn-success btn-input" style="margin: 10px">
                                <span class="glyphicon glyphicon-plus"></span> 添加
                            </a>
                        </form>

显示页面部分

数据目录部分

• 放在页面的左边,将所有数据目录显示出来 供用户点击
• 点击则传过滤属性typeId(数据明细的typeId也就是数据目录的id) 给到后台list,再次更新页面
  

数据明细部分

• 放在页面的右边,点击数据明细标题则传过滤属性parentId给到后台list更新页面
• 点击明细,则将此明细的下级明细数据出来
  

js部分

• 点击数据目录被点击时 会有高亮效果

 <#if qo.typeId?? >
    $("a[data-id=${qo.typeId}]").addClass('active');//设置高亮代码
    </#if>