php 可以编辑treegrid,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)

品类数据信息查询及呈现

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 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 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 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 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里面

Hello, Bootstrap Table!

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

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

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 '正常'

}

return '锁定'

}

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

5.修改后的代码如下：

Hello, Bootstrap Table!

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 '正常'

}

return '锁定'

}

页面运行效果如图所示：