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 '锁定'
}
页面运行效果如图所示:
php 可以编辑treegrid,TreeGrid 实现增删改查相关推荐
- VUE2.0增删改查附编辑添加model(弹框)组件共用
为什么80%的码农都做不了架构师?>>> Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https: ...
- FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
- FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
- FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶......
2019独角兽企业重金招聘Python工程师标准>>> FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的 ...
- html编辑ko,BootstrapTable+KnockoutJS相结合实现增删改查解决方案(三)两个Viewmodel搞定增删改查...
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
- 可编辑树Ztree的使用(包括对后台数据库的增删改查)
找了很多网上关于Ztree的例子和代码才搞定. 首先,关于Ztree的代码不介绍了,网上下载之后,引用下列四个文件就能使用了. 1.关于配置选项.主要通过回调函数来实现向后台发送数据,实现增删改查. ...
- ztree java 增删改_Ztree实现增删改查
1.和另一篇文章--[TreeGrid 实现增删改查]前面的内容一致,只需要创建一个html页面,命名为ztree-01.html,粘贴如下网址的代码进入ztree-01.html. 访问http:/ ...
- vs连接mysql建一个表并增删查改_VS连接SQL Server数据库,增删改查详细教程(C#代码)...
工具: 1.Visual Studio (我使用的是vs2013) 2.SQL Server (我使用的是sql server2008) 操作: 1.打开SQL Server,打开后会看到数据库的初 ...
- Python Web实战:Python+Django+MySQL实现基于Web版的增删改查
本文使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能. 1.创建项目(sms) 创建Django项目 django-admi ...
- python增删改查的框架_简单的Django框架增删改查操作
Django之orm对MysqL数据库的增删改查操作简介: 利用Django中orm来查找数据库中的数据,对数据库进行增.删.改.查: 增:新增数据 # 操作数据库user表新增记录 # 方式1: u ...
最新文章
- MySQL双机热备部署
- 那么多短视频特效,凭什么抖音出的这么火
- Linux下用户组、文件权限
- Wire:Linux开源聊天应用
- mysql是自动表锁定吗_MySQL数据库表怎么锁定
- 几个预编译指令的用法
- 训练集 验证集_训练与验证、测试集数据分布不同的情况
- 百度时间显示_文章的发布时间对百度优化网站重要吗
- Django框架——HttpResponse对象
- java.net.MalformedURLException: unknown protocol: c 这个错一般有两种原因导致: 1、URL协议、格式或者路径错误,...
- Android定位(是否使用GPS进行定位)
- Maven下载及安装配置
- rubyonrails安装
- 基于java springboot vue elementui购物商城源码(毕设)
- java将xlsx类型excel导出加水印(真实水印非表面加图片)
- python实现图像格式转换(bmp、jpg、png)
- 【matlab实现多种股票数据同列收盘价格分析走势图,以及涨跌幅变化曲线第二篇】
- 将1自动补位为01_英雄联盟如何避免被自动补位到辅助位置
- 二维码怎么做之批量制作二维码
- 【Homeassistant 与Ultrasonic Distance超声波距离传感器握手】