在Spring MVC中使用bootstrap JQuery实现的TreeGrid 范例

1、服务端设计及实现

1.1 创建表sys_menus:

CREATE TABLE `sys_menus` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `name` varchar(50) DEFAULT NULL COMMENT '资源名称',

  `url` varchar(200) DEFAULT NULL COMMENT '资源URL',

  `type` int(11) DEFAULT NULL COMMENT '类型     1：菜单   2：按钮',

  `sort` int(11) DEFAULT NULL COMMENT '排序',

  `note` varchar(100) DEFAULT NULL COMMENT '备注',

  `parentId` int(11) DEFAULT NULL COMMENT '父菜单ID，一级菜单为0',

  `permission` varchar(500) DEFAULT NULL COMMENT '授权(如：user:create)',

  `createdTime` datetime DEFAULT NULL COMMENT '创建时间',

  `modifiedTime` datetime DEFAULT NULL COMMENT '修改时间',

  `createdUser` varchar(20) DEFAULT NULL COMMENT '创建用户',

  `modifiedUser` varchar(20) DEFAULT NULL COMMENT '修改用户',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=141 DEFAULT CHARSET=utf8 ;

 

1.2 DAO接口及方法定义

在此模块没有分页,没有查询,重点是要查询本菜单和上一级菜单.

public interface SysMenuDao {

List<Map<String,Object>> findObjects();

}

​​​​​​​1.3 Mapper元素定义

创建SysMenuMapper，并添加select元素，实现菜单信息的获取

 

<mapper namespace="com.jt.sys.dao.SysMenuDao">

<select id="findObjects" resultType="map">

Select m.*,

    (select p.name from sys_menus p where p.id = m.parentId) as

parentName

from sys_menus m

</select>

</mapper>

 

对于这个查询也可以这样写:

<mapper namespace="com.jt.sys.dao.SysMenuDao">

<select id="findObjects" resultType="map">

select m.*,p.name parentName

from sys_menus m left join sys_menus p

         on m.parentId=p.id

</select>

</mapper>

 

​​​​​​​1.4  Service 中方法的定义

定义SysMenuService接口以及实现类，并添加findObjects方法

@Service

public class SysMenuServiceImpl implements SysMenuService {

@Autowired

private SysMenuDao menuDao;

@Override

public List<Map<String, Object>> findObjects() {

return menuDao.findObjects();

}

}

 

​​​​​​​1.5  Controller中方法定义

 

@Controller

@RequestMapping("/menu/")

public class SysMenuController {

@Resource

private SysMenuService menuService;

@RequestMapping("listUI")

public String listUI(){

return "sys/menu_list";

}

@RequestMapping("doFindObjects")

@ResponseBody

public JsonResult doFindObjects(){

List<Map<String, Object>> list =menuService.findObjects();

return new JsonResult(1, "ok", list);

}

}

 

 

2、客户端设计及实现

2.1定义menu_list.html页面

重点关注table元素定义,假如使用是jquery的treeGrid插件库以树结构形式

呈现表格数据,那就需要按照treeGrid的表格定义规范定义table.

<div class="box-body table-responsive no-padding">

<table id="menuTable" class="table table-hover">

<thead>

   <tr>

<th data-field="selectItem" data-checkbox="true"></th>

  </tr>

</thead>

</table>

</div>

页面中添加js(第一步需要将treegrid插件库放到项目对应目录)

<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"/>

<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"/>

<script type="text/javascript" src="bower_components/treegrid/tree.table.js"/>

<script type="text/javascript">

/**

 * 初始化表格的列(这些列如何定义,按照treeGrid规范即可)

   我自己在实现时,是先treeGrid Demo案例,然后从demo中拷贝

   代码实现.

 */

var colunms = [

{

field : 'selectItem',

radio : true

},

{

title : '菜单ID',

field : 'id',

visible : false,

align : 'center',

valign : 'middle',

width : '80px'

},

{

title : '菜单名称',

field : 'name',

align : 'center',

valign : 'middle',

sortable : true,

width : '180px'

},

{

title : '上级菜单',

field : 'parentName',

align : 'center',

valign : 'middle',

sortable : true,

width : '180px'

},

{

title : '类型',

field : 'type',

align : 'center',

valign : 'middle',

sortable : true,

width : '100px',

formatter : function(item, index) {

if (item.type == 1) {

return '<span class="label label-success">菜单</span>';

}

if (item.type == 2) {

return '<span class="label label-warning">按钮</span>';

}

}

},

{

title : '排序号',

field : 'sort',

align : 'center',

valign : 'middle',

sortable : true,

width : '100px'

},

{

title : '菜单URL',

field : 'url',

align : 'center',

valign : 'middle',

sortable : true,

width : '160px'

},

{

title : '授权标识',

field : 'permission',

align : 'center',

valign : 'middle',

sortable : true

} ];

 

$(function(){

  doGetObjects();

});

function doGetObjects() {

var tableId="menuTable";

var table = new TreeTable(tableId,"menu/doFindObjects.do", colunms);

table.setExpandColumn(2);

table.init();//底层会发起异步请求加载数据,然后初始化表格

}

</script>

 

说明：本案例中会用到treeGrid库，需要将相应的js引入到当前页面