功能列表展示
1) 因为可以使用ajax技术了
就可以先访问网页，在网页中发现缺少数据，再通过ajax请求数据
2) 在网页中，准备使用layui-treetable组件自动展示功能列表(tree + table)
treetable不是layui自带组件
不需要自己找组件，让layui自己找
需要额外引入
a) 将treetable组件的文件夹复制到项目的web目录下
b) 在网页中引入layui的2个文件（js，css）
c) js代码中让layui关联treetable组件，并使用treetable组件
1. webapps根目录中引入layui框架
2. webapps目录中引入treetable-lay插件包
3. 在需要treetable组件的网页中引入layui相关文件(css,js)
不需要引入treetable的js和css
4. 网页代码可以参考
01.html ( html , js )
* tree.json ( 数据结构 )
5. 使用详情参考官方文档：https://gitee.com/whvse/treetable-laylayui.config({
base: ‘/treetable-lay/‘ //指定treetable组件所在的文件夹目录
}).use([‘treeTable’], function () { //use() 使用指定的layui组件
var treeTable = layui.treeTable;
}); //通过 config 又引入了新的组件
* 具体参考：treetable /readme.txt<-- fun.jsp --> <%@ page pageEncoding="utf-8" %> <html> <head> <%@ include file="comm.html"%> </head> <body> <%--展示功能信息 * 希望美观一些：layui * 展示树形结构(所属关系) layui-tree * 展示表格结构 layui-table * --> layui-treetable--%> <!-- 数据展示的位置 --> <div id="funGrid"></div> <!-- layui-js代码实现 --> <script> layui.config({ base: '/treetable-lay/' //指定treetable组件所在的文件夹目录 }).use(['treeTable'], function () { //use() 使用指定的layui组件 var treeTable = layui.treeTable; treeTable.render({ elem:'#funGrid', //指定渲染的位置 url:'funAll', //使用ajax技术，请求表格中要展示的数据 cols:[[ // 告诉组件按照什么样的表格格式取展示数据(第1个展示什么，第2个展示什么。。。) {type:'numbers'}, // <td> {type:'checkbox'}, // <td> {title:'功能名称',field:'fname'}, // <td> {title:'功能类别',field:'ftype',templet:'<div>{{d.ftype==1?\'<span class="layui-badge layui-bg-green">菜单</span>\':\'<span class="layui-badge" >按钮</span>\'}}</div>'}, {title:'请求url',field:'fhref'}, {title:'权限范围',field:'auth'} ]], tree:{ // 设置查询数据之间的子父关系 iconIndex: 2, //指定展开合并图标出现在哪一列 idName:'fid', pidName:'pid', isPidData:true, //表示按照id和pid的关系，实现子父级别 } }); }); </script> </body> </html>3) 使用treetable组件，帮我们ajax请求数据，并自动组装数据
a) 在网页中定义一个标签指定treetable组件组装数据的位置
数据展示的表格可以用div，也可以用table，最后写的都不是这个
b) 在js中渲染treetable，通过配置信息告诉treetable组件如何处理表格
treeTable.render({
elem:’#funGrid’, //指定渲染的位置
url:’funAll’, //使用ajax技术，请求表格中要展示的数据
cols:[[ // 告诉组件按照什么样的表格格式取展示数据(第1个展示什么，第2个展示什么。。。)
{title:’功能名称’,field:’fname’}, //
{title:’功能类别’,field:’ftype’},
{title:’请求url’,field:’fhref’},
{title:’权限范围’,field:’auth’}
]]
}); ```java <— users.jsp —> <%@ page pageEncoding=”utf-8” contentType=”text/html; UTF-8” %> <%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core“ %><link rel="stylesheet" type="text/css" href="layui/css/layui.css" /> <script src="layui/layui.js"></script><div> <a href="userImport.jsp" class="layui-btn layui-btn-normal layui-btn-sm"> <i class="layui-icon"></i>数据导入</a> </div> <table class="layui-table"> <thead> <tr> <th>编号</th> <th>用户名</th> <th>用户名</th> <th>用户名</th> <th>用户名</th> <th>密码</th> <th>密码</th> <th>密码</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody> <!-- 循环组装 jstl+el--> <c:forEach items="${requestScope.info.data}" var="user"> <tr > <td>${user.uid}</td> <td>${user.uname}</td> <td>${user.uname}</td> <td>${user.uname}</td> <td>${user.uname}</td> <td>${user.upass}</td> <td>${user.upass}</td> <td>${user.upass}</td> <td>${user.upass}</td> <td> <a href="" class="layui-btn layui-btn-warm layui-btn-xs"> <i class="layui-icon"></i>编辑 </a> <a href="" class="layui-btn layui-btn-danger layui-btn-xs"> <i class="layui-icon"></i>删除 </a> </td> </tr> </c:forEach> </tbody> </table> <!-- 在这个div标签中显示翻页栏 --> <div id="page-tool"></div>
</body>
c) treetable组件会通过url属性向服务器发送(ajax技术的)请求<br /> 服务器按照业务需求，需要返回所有的功能信息(List->JsonStr)<br /> 服务器使用封装的mvc框架处理请求<br /> i) 引入mvc框架源码<br /> ii) 引入mvc框架的依赖(jar)<br /> iii) 在web.xml中配置框架核心入口<br /> iv) 在web.xml中配置核心入口时指定映射关系注解所在的类的所在包
```java
<servlet>
<servlet-name>mvc</servlet-name>
<servlet-class>org.duyi.web7.DispatcherServlet</servlet-class>
<init-param>
<param-name>controller-scan</param-name>
<param-value>com.duyi.qxgl07.controller</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>mvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
d) 创建controller和方法，通过注解配置映射关系
将查询结果直接响应
此次响应回浏览器的内容treetable组件使用
这就要求响应回去的内容必须符合treetable规范
对象{
code:0, //数据正确
msg:’’, //错误提示
data:[funs]
}
e) treetable在展示数据时，类别默认展示的1和2
treetable提供了配置，实现展示数据的格式化 (按照我们自定义需求展示内容)
treetable-cols设置templet自定义模板
{title:’功能类别’,field:’ftype’,templet:’菜单‘},
{title:’功能类别’,field:’ftype’,templet:’{{d.?}}’},
在templet自定义版本对应的字符串中，使用{{d}}相当于得到了当前单元所在行的记录
—>{title:’功能类别’,field:’ftype’,templet:’
扩展： 自定义内容 + 徽章
//FunController.java
package com.duyi.qxgl07.controller;
import com.duyi.qxgl07.domain.Fun;
import com.duyi.qxgl07.service.FunService;
import org.duyi.web7.annotation.Controller;
import org.duyi.web7.annotation.RequestMapping;
import org.duyi.web7.annotation.ResponseBody;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
public class FunController {
private FunService service = new FunService();
@RequestMapping("/funAll")
@ResponseBody //list-jsonStr -- 直接响应 将list对象转化成字符串
public Map<String,Object> findAll(){
//查找所有的功能信息
List<Fun> funs = service.findAll() ;
//将查询结果按照layui-treetable组件的规范组装，并响应
Map<String,Object> map = new HashMap<String,Object>();
map.put("code",0);
map.put("msg","出错啦");
map.put("data",funs) ;
return map;
}
}
//FunService.java
package com.duyi.qxgl07.service;
import com.duyi.qxgl07.dao.FunDao;
import com.duyi.qxgl07.domain.Fun;
import orm.SqlSession;
import java.util.List;
public class FunService {
//产生接口的实现类
FunDao dao = new SqlSession().getMapper(FunDao.class);
public List<Fun> findAll(){
return dao.findAll() ;
}
}
//FunDao.java
package com.duyi.qxgl07.dao;
import com.duyi.qxgl07.domain.Fun;
import orm.annotation.Select;
import java.util.List;
public interface FunDao {//产生接口的实现类
@Select("select * from t_fun")
public List<Fun> findAll();
}
若有收获，就点个赞吧
0 人点赞
