TreeGrid 实现增删改查

考试

业务描述

将数据库中的品类(商品分类)信息从数据库中加载到客户端然后以tree结构方式进行数据的呈现,并在此table的基础之上拓展其它业务操作(添加,修改,删除)

系统原型设计

1)参考https://www.bootstrap-table.com网址中的treeGrid进行数据呈现
具体demo网址: https://examples.bootstraptable.com/#extensions/treegrid.html#view-source

2)参考http://www.treejs.cn网址中的demo进行实现?
具体demo网址:
http://www.treejs.cn/v3/faq.php#_206

项目创建及初始化

1)数据库初始化
2)创建Springboot项目14-springboot-category
3)添加相关依赖(mysql,springjdbc,mybatis,springweb,thymeleaf,lombok,devtools,actuator,...)
4)配置文件初始化配置实现

业务核心API设计

1)POJO(Category)，代码如下：
2)DAO (CategoryDao-com.cy.pj.category.dao-@Mapper)，代码如下
3)com.cy.pj.category.service.CategoryService，@Service，代码如下
-com.cy.pj.category.service.CategoryServiceImpl-@Service
4)Controller(CategoryController-com.cy.pj.category.controller-@RestController)

访问https://gitee.com/JasonCN2008...

品类数据信息查询及呈现

1)品类POJO对象设计及实现

package com.cy.pj.category.pojo;
import lombok.Data;
import java.util.Date;
@Data
public class Category {
    private Integer id;
    private String name;
    private Integer parentId;
    private String remark;
    private Date createdTime;
}

2)数据逻辑对象方法设计及实现

package com.cy.pj.category.dao;
import com.cy.pj.category.pojo.Category;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface CategoryDao {
    @Select("select * from tb_category")
    List<Category> findCategorys();
}

3)业务逻辑对象方法设计及实现

CategoryService 页面

package com.cy.pj.category.service;
import com.cy.pj.category.pojo.Category;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public interface CategoryService {
    List<Category> findCategorys();
}

CategoryServiceImpl页面

package com.cy.pj.category.service;
import com.cy.pj.category.dao.CategoryDao;
import com.cy.pj.category.pojo.Category;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@Slf4j
@Service
@RestController
public class CategoryServiceImpl implements CategoryService {
    @Autowired
 private CategoryDao categoryDao;
    @Override
 public List<Category> findCategorys() {
        return categoryDao.findCategorys();
    }
}

4)控制逻辑对象方法设计及实现

package com.cy.pj.category.controller;
import com.cy.pj.category.pojo.Category;
import com.cy.pj.category.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class CategoryController {
    @Autowired
 private CategoryService categoryService;
    @GetMapping("/category/doFindCategorys")
    public List<Category> doFindCategorys(Model model) {
        return categoryService.findCategorys();
    }
}

5)客户端页面设计及实现

创建一个html页面，命名为treegrid-1.html

这里head的内容必须是你已经下载了static里面的所有内容
否则就用https://examples.bootstrap-table.com/#extensions/treegrid.html#view-source；这个网址上的在线下载的链接
这个页面是访问https://examples.bootstrap-table.com/#extensions/treegrid.html#view-source；之后复制的内容，修改如图所示的地方：

1.在你下载好了离线版的static里面所有的内容之后，粘贴下面代码在treegrid-1.html的head里面

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/treegrid/bootstrap-table.css">
<link rel="stylesheet" href="/treegrid/jquery.treegrid.css">
<link rel="stylesheet" href="/treegrid/bootstrap-table.css">

2.在treegird.html的body里添加如下代码：

<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/treegrid/jquery.treegrid.js"></script>
<script src="/treegrid/bootstrap-table.js"></script>
<script src="/treegrid/bootstrap-table-treegrid.min.js"></script>

3.把网址上的代码粘贴进body里，代码如下：

网址：https://examples.bootstrap-ta...

<script>
  var $table = $('#table')

  $(function() {
    $table.bootstrapTable({
      url: 'json/treegrid.json',
      idField: 'id',
      showColumns: true,
      columns: [
        {
          field: 'ck',
          checkbox: true
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: 'statusFormatter'
        },
        {
          field: 'permissionValue',
          title: '权限值'
        }
      ],
      treeShowField: 'name',
      parentIdField: 'pid',
      onPostBody: function() {
        var columns = $table.bootstrapTable('getOptions').columns

        if (columns && columns[0][1].visible) {
          $table.treegrid({
            treeColumn: 1,
            onChange: function() {
              $table.bootstrapTable('resetView')
            }
          })
        }
      }
    })
  })

  function typeFormatter(value, row, index) {
    if (value === 'menu') {
      return '菜单'
    }
    if (value === 'button') {
      return '按钮'
    }
    if (value === 'api') {
      return '接口'
    }
    return '-'
  }

  function statusFormatter(value, row, index) {
    if (value === 1) {
      return '<span class="label label-success">正常</span>'
    }
    return '<span class="label label-default">锁定</span>'
  }
</script>

4.修改下图圈起来地方的代码：

5.修改后的代码如下：

<!doctype html>

<html lang="en">

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="/treegrid/bootstrap-table.css">

    <link rel="stylesheet" href="/treegrid/jquery.treegrid.css" >

    <link rel="stylesheet" href="/treegrid/bootstrap-table.css" >

</head>

<body>

<table id="table"></table>

<script src="/jquery/jquery.min.js" ></script>

<script src="/bootstrap/js/bootstrap.js"></script>

<script src="/treegrid/jquery.treegrid.js"></script>

<script src="/treegrid/bootstrap-table.js"></script>

<script src="/treegrid/bootstrap-table-treegrid.min.js"></script>

<script>

    var $table = $('#table')

    $(function() {

        $table.bootstrapTable({

            url: '/category/doFindCategorys',

            idField: 'id',

            showColumns: true,

            columns: [

                {

                    field: 'ck',

                    checkbox: true

                },

                {

                    field: 'name',

                    title: '名称'

                },

                {

                    field: 'remark',

                    title: '备注',

                },

            ],

            treeShowField: 'name',

            parentIdField: 'parentId',

            onPostBody: function() {

                var columns = $table.bootstrapTable('getOptions').columns

                if (columns && columns[0][1].visible) {

                    $table.treegrid({

                        treeColumn: 1,

                        onChange: function() {

                            $table.bootstrapTable('resetView')

                        }

                    })

                }

            }

        })

    })

    function typeFormatter(value, row, index) {

        if (value === 'menu') {

            return '菜单'

        }

        if (value === 'button') {

            return '按钮'

        }

        if (value === 'api') {

            return '接口'

        }

        return '-'

    }

    function statusFormatter(value, row, index) {

        if (value === 1) {

            return '<span class="label label-success">正常</span>'

        }

        return '<span class="label label-default">锁定</span>'

    }

</script>

</body>

</html>

页面运行效果如图所示：