前言
本文將演示如何使用Springboot
(後端框架)和layui
(前端框架)將數據庫中的數據渲染到前端頁面,以及對前端頁面的數據實現增刪改。
效果圖如下:
完整項目已上傳至GitHub,項目地址:https://github.com/ThinkMugz/mudemo
1 項目搭建
首先呢,把項目創建起來,後端項目結構就不說了,標準分層。然後,在resources
目錄下創建static
文件夾,用來放置各種前端文件。
圖中圈中的就是juqery
和layui
兩個框架的源碼文件,引入項目後,在我們自己寫的js
中引入相應的依賴,就可以使用大佬們提供的源碼了。例如:
<!--引用 layui.css,注意路徑要寫自己項目的-->
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
<!--引用 layui.js和jQuery,注意路徑要寫自己項目的-->
<script src="layui/layui.js"></script>
<script src="js/libs/jquery-2.1.1.min.js"></script>
更詳細內容請移步layui官網:https://www.layui.com/doc/
數據庫準備:
DROP TABLE IF EXISTS `goods`;
CREATE TABLE `goods` (
`id` int(11) DEFAULT NULL,
`name` varchar(255) DEFAULT NULL,
`type` varchar(255) DEFAULT NULL,
`price` decimal(10,0) DEFAULT NULL,
`size` double DEFAULT NULL,
`status` varchar(255) DEFAULT NULL,
`description` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of goods
-- ----------------------------
INSERT INTO `goods` VALUES ('1', 'iPhone', '1', '6000', '55', '1', '說明');
INSERT INTO `goods` VALUES ('2', 'watch', '1', '500', '35', '1', '說明');
INSERT INTO `goods` VALUES ('3', 'television', '1', '1000', '90', '1', '說明');
INSERT INTO `goods` VALUES ('4', 'computer', '1', '4500', '60', '1', '說明');
1 渲染數據與刷新
首先呢,在頁面放置一個元素 <table id="goods_table"></table>
<div style="margin: 5px 0 0 5px;width: 900px">
<button class="layui-btn" id="queryGoods">查詢商品</button>
<table id="goods_table" lay-filter="goods_bar"></table>
</div>
表格有兩個重要參數:id
和lay-filter
- id:在後面渲染表格時,會以id作爲紐帶
- lay-filter的值是表格頭部工具按鈕和行工具按鈕監聽事件的參數
然後通過 table.render() 方法指定該容器(可以看到elem
通過id
選擇的方式綁定到了前面的table
元素):
table.render({
elem: '#goods_table'
, id: 'goodsReload'
, even: true //開啓隔行背景
, url: '/goods/goodsList'
, request: {
pageName: 'pageNum',
limitName: 'pageSize'
}
, toolbar: '#goods_headerBar'
, title:
'商品詳情表'
, page:
true //開啓分頁
, limit: 5
, limits: [1, 5, 10, 20, 50, 100]
, cols:
[[{field: 'id', title: '編號', width: 60, align: 'center'}
, {field: 'type', title: '類 型', width: 76, align: 'center'}
, {field: 'name', title: '商品名稱', width: '8.5%', align: 'center'}
, {field: 'price', title: '價 格', width: '9.1%', align: 'center'}
, {field: 'size', title: '數 量', width: '9.5%', align: 'center'}
, {field: 'status', title: '狀 態', width: '7.5%', align: 'center'}
, {field: 'description', title: '說 明', align: 'center'}
, {
fixed: 'right',
title: '操作',
toolbar: '#goods_lineBar',
width: 160,
align: 'center'
}
]]
});
url
這個參數非常關鍵,它的作用是:
接口地址。默認會自動傳遞兩個參數:?page=1&limit=30(該參數可通過 request 自定義) page
代表當前頁碼、limit 代表每頁數據量
我們看看,前端到底發送了什麼請求,通過瀏覽器控制檯看到:
Request URL: http://localhost:8086/goods/goodsList?pageNum=1&pageSize=5
那麼後端返回給前端什麼數據呢:
{
"msg": "操作成功!",
"code": "0",
"data": [
{
"id": 1,
"name": "iPhone",
"type": "1",
"price": 6000.0,
"size": 55,
"status": 1,
"description": "說明"
},
{
"id": 2,
"name": "watch",
"type": "1",
"price": 500.0,
"size": 35,
"status": 1,
"description": "說明"
},
{
"id": 3,
"name": "television",
"type": "1",
"price": 1000.0,
"size": 90,
"status": 1,
"description": "說明"
},
{
"id": 4,
"name": "computer",
"type": "1",
"price": 4500.0,
"size": 60,
"status": 1,
"description": "說明"
}
],
"count": 4
}
那麼後端是怎麼從數據庫獲取數據,並將數據加工成前端要求的格式然後返給前端的呢?爲了方便,我直接在controller
中寫邏輯了:
@RequestMapping(value = "/goodsList", method = RequestMethod.GET)
public JSONObject getGoodsList(@RequestParam("pageNum") int pageNum, @RequestParam("pageSize") int pageSize) {
JSONObject result = new JSONObject();
try {
PageHelper.startPage(pageNum, pageSize);
PageInfo<Good> pageInfo = new PageInfo(goodsMapper.getGoodsList());
result.put("code", "0");
result.put("msg", "操作成功!");
result.put("data", pageInfo.getList());
result.put("count", pageInfo.getTotal());
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "查詢異常!");
}
return result;
}
goodsMapper.getGoodsList()
呢,就是與數據庫交互的方法了:
@Select("SELECT * FROM mutest.goods")
List<Good> getGoodsList();
經過PageHelper
的分頁處理,將前端傳來的pageNum
和pageSize
織入sql語句中:
SELECT * FROM mutest.goods LIMIT 0,5
至此,渲染數據的前後端已經完成,那麼刷新數據是怎麼實現的呢?
首先,要頁面放置頭部工具按鈕,包括新增和刷新:
<!--頭部工具按鈕-->
<script type="text/html" id="goods_headerBar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">
<i class="layui-icon"></i> 新 增
</button>
<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="refresh" style=" margin-left: 15px">
<i class="layui-icon"></i> 刷 新
</button>
</div>
</script>
然後,監聽頭部按鈕點擊事件:
// 監聽頭部工具欄
table.on('toolbar(goods_bar)', function (obj) {
switch (obj.event) {
case 'refresh':
// 執行一個表格重載即實現刷新功能
table.reload('goodsReload', {
where: '',
contentType: 'application/x-www-form-urlencoded',
page: {
curr: 1 //重新從第 1 頁開始
},
url: '/goods/goodsList',
method: 'get'
});
break;
}
});
<table id="goods_table" lay-filter="goods_bar"></table>
有這麼幾點需要強調一下:
toolbar
是頭部工具事件,與之對應的還有tool
(行工具),後面括號中的goods_bar
是與table
元素的lay-filter
的值對應起來的table.reload('goodsReload'
中的goodsReload
是與table.render
的id對應起來的,通過再次向特定url
請求數據實現了表格的重載。
2 新增和編輯
新增和編輯在本文中,是使用彈層來實現的。思路是這樣的:
- 首先,準備一個
div
元素,其display
設置爲none
- 通過新增和編輯按鈕的點擊事件觸發彈出
form
,在form
內填寫好內容 - 通過點擊彈層中的【提交】按鈕,將
form
提交到後端對應的接口,從而實現後端數據的更新 - 提交完成後,ajax請求的success回調中添加表格重載,完成前端數據更新
2.1 彈層
彈層的div元素是這樣的:
<div class="layui-row" id="open_div" style="display:none;">
<form id="add_form" class="layui-form" action="" style="margin-top: 20px;align:center;">
<!--隱藏字段action,用來區分增加和編輯行爲-->
<input type="hidden" name="action" id="action">
<!--隱藏字段id,用於提供編輯需要的主鍵-->
<input type="hidden" name="id" id="id">
<!--隱藏字段request_type,用於提供請求方式:get,post,put-->
<input type="hidden" name="request_type" id="request_type">
<div class="layui-form-item" style="display: table;width: 96%">
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">類  型</label>
<div class="layui-input-block">
<select id="" name="type" lay-filter="type" lay-verify="required">
<option value="">請選擇</option>
<option value="國產">國產</option>
<option value="進口">進口</option>
</select>
</div>
</div>
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">產品名稱</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="請輸入產品名稱"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="display: table;width: 96%">
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">價  格</label>
<div class="layui-input-block">
<input type="text" name="price" placeholder="請輸入價格"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">數  量</label>
<div class="layui-input-block">
<input type="text" name="size" placeholder="請輸入數量"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="width: 96%">
<label class="layui-form-label">說  明</label>
<div class="layui-input-block">
<input type="text" name="description" placeholder="請輸入產品說明"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="margin-left: 40%">
<div class="layui-btn-group">
<button class="layui-btn" lay-submit="" lay-filter="update_submit">提 交</button>
<button type="reset" class="layui-btn layui-btn-primary">重 置</button>
</div>
</div>
</form>
</div>
接下來,我們看打開彈層時,做了什麼?首先是【新增】事件:
// 監聽頭部工具欄
table.on('toolbar(goods_bar)', function (obj) {
switch (obj.event) {
// 根據增加行爲給form隱藏項賦值
case 'add':
var data = {};
data.action = 'addGood';
data.request_type = 'post';
// 調用打開彈層的工具方法
open_form("#open_div", data, '添加商品', '620px', '282px');
break;
}
});
【編輯】事件:
table.on('tool(goods_bar)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
var id = data.id;
switch (layEvent) {
case 'edit':
// 根據編輯行爲爲form隱藏項賦值
data.action = 'updateGood';
data.request_type = 'post';
open_form("#open_div", data, '編輯用例', '620px', '282px');
break;
}
});
仔細觀察,div中有很多隱藏元素,之所以隱藏起來,是因爲這些值必須要傳遞給後端,且不能被用戶篡改,而是由程序賦值
- id:就是你所操作的數據的主鍵,通過該值來告知後端,我要修改的是哪條數據。【新增】沒有對id賦值,因爲id設爲自增字段,插庫時無需傳入id
- action:區分新增和編輯的重要字段,【新增】賦值
addGood
,【編輯】賦值updateGood
- request_type:區分
get
請求和post
請求的字段,新增和編輯都賦值post
**open_form
和setForm
是兩個工具方法,前者是打開彈層,後者是爲form
初始化(也是編輯彈窗會代入數據的實現方法),源碼見 3.2 工具方法部分。
2.2 form submit
當打開彈層並填入內容後,當然是要提交了。通過監聽form的提交按鈕點擊事件來實現表單提交:
form.on('submit(update_submit)', function (data) {
var uri = data.field.action;
var type = data.field.request_type;
$.ajax({
type: type,
url: '/goods/' + uri,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data.field),
dataType: "json",
success: function (result) {
if (result.code == "0") {
table.reload('goodsReload', {
contentType: 'application/x-www-form-urlencoded',
page: {
curr: 1 //重新從第 1 頁開始
},
url: '/goods/goodsList',
method: 'get'
});
layer.msg('修改成功', {icon: 1, time: 1000});
} else { //失敗
layer.alert(result.msg, {icon: 2}, function () {
layer.close(index);
});
}
}
});
layer.close(index);//關閉彈出層
return false;
});
【新增】和【編輯】使用的是同一套提交邏輯,而後端接口肯定不是同一個,所以action
在打開彈層時被賦值,而提交時引用該值,從而指向了各自的後端接口。
後端接口:
// 新增接口
@RequestMapping(value = "/addGood", method = RequestMethod.POST)
public JSONObject addGood(@RequestBody JSONObject request) {
JSONObject result = new JSONObject();
try {
goodsMapper.addGood(request);
result.put("code", "0");
result.put("msg", "操作成功!");
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "新增商品異常!");
}
return result;
}
// 編輯接口
@RequestMapping(value = "/updateGood", method = RequestMethod.POST)
public JSONObject updateGood(@RequestBody JSONObject request) {
JSONObject result = new JSONObject();
try {
goodsMapper.updateGood(request);
result.put("code", "0");
result.put("msg", "操作成功!");
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "修改商品異常!");
System.out.println(e.getMessage());
}
return result;
}
// 新增sql
@Insert("INSERT INTO mutest.goods(type,name,price,size,status,description)VALUES(#{type},#{name},#{price},#{size},#{status},#{description})")
int addGood(JSONObject request);
// 編輯sql
@Update("UPDATE mutest.goods SET type=#{type},name=#{name},price=#{price},size=#{size},status=#{status},description=#{description} WHERE id=#{id}")
void updateGood(JSONObject request);
3 完整代碼
3.1 後端
pom.xml依賴
項目用到的完整的pom.xml依賴如下:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>mudemo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>mudemo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<swagger.version>2.8.0</swagger.version>
<google.guava>23.0</google.guava>
<fastjson.version>1.2.47</fastjson.version>
<druid.version>1.1.9</druid.version>
<poi.version>3.17</poi.version>
<jwt.version>0.9.0</jwt.version>
<mybatis.version>1.3.2</mybatis.version>
</properties>
<dependencies>
<!--web-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.1</version>
</dependency>
<!--連接池-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>${druid.version}</version>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--data:省略set、get方法-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>${fastjson.version}</version>
</dependency>
<!--分頁插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
實體類
package mudemo.model;
import lombok.Data;
/**
* @author guozhengMu
* @version 1.0
* @date 2019/8/26 16:16
* @description
* @modify
*/
@Data
public class Good {
private int id;
private String name;
private String type;
private double price;
private int size;
private int status;
private String description;
}
controller層
package mudemo.controller;
import com.alibaba.fastjson.JSONObject;
import mudemo.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* @author guozhengMu
* @version 1.0
* @date 2019/8/26 16:51
* @description
* @modify
*/
@RestController
@RequestMapping(value = "/goods")
public class GoodsController {
@Autowired
private GoodsService goodsService;
@RequestMapping(value = "/goodsList", method = RequestMethod.GET)
public JSONObject getGoodsList(@RequestParam("pageNum") int pageNum, @RequestParam("pageSize") int pageSize) {
return goodsService.getGoodsList(pageNum, pageSize);
}
@RequestMapping(value = "/updateGood", method = RequestMethod.POST)
public JSONObject updateGood(@RequestBody JSONObject request) {
return goodsService.updateGood(request);
}
@RequestMapping(value = "/addGood", method = RequestMethod.POST)
public JSONObject addGood(@RequestBody JSONObject request) {
return goodsService.addGood(request);
}
@RequestMapping(value = "/deleteGood", method = RequestMethod.GET)
public JSONObject deleteGood(@RequestParam("id") int id) {
return goodsService.deleteGood(id);
}
}
接口層實現層
接口層省略,這裏只貼上接口實現類:
package mudemo.service.impl;
import com.alibaba.fastjson.JSONObject;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import mudemo.dao.GoodsMapper;
import mudemo.model.Good;
import mudemo.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* @author guozhengMu
* @version 1.0
* @date 2019/8/26 16:55
* @description
* @modify
*/
@Service(value = "GoodsService")
public class GoodsServiceImpl implements GoodsService {
@Autowired
private GoodsMapper goodsMapper;
@Override
public JSONObject getGoodsList(int pageNum, int pageSize) {
JSONObject result = new JSONObject();
try {
PageHelper.startPage(pageNum, pageSize);
PageInfo<Good> pageInfo = new PageInfo(goodsMapper.getGoodsList());
result.put("code", "0");
result.put("msg", "操作成功!");
result.put("data", pageInfo.getList());
result.put("count", pageInfo.getTotal());
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "查詢異常!");
}
return result;
}
@Override
public JSONObject addGood(JSONObject request) {
JSONObject result = new JSONObject();
try {
goodsMapper.addGood(request);
result.put("code", "0");
result.put("msg", "操作成功!");
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "新增商品異常!");
}
return result;
}
@Override
public JSONObject updateGood(JSONObject request) {
JSONObject result = new JSONObject();
try {
goodsMapper.updateGood(request);
result.put("code", "0");
result.put("msg", "操作成功!");
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "修改商品異常!");
System.out.println(e.getMessage());
}
return result;
}
@Override
public JSONObject deleteGood(int id) {
JSONObject result = new JSONObject();
try {
goodsMapper.deleteGood(id);
result.put("code", "0");
result.put("msg", "操作成功!");
} catch (Exception e) {
result.put("code", "500");
result.put("msg", "刪除商品異常!");
}
return result;
}
}
dao層
package mudemo.dao;
import com.alibaba.fastjson.JSONObject;
import mudemo.model.Good;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface GoodsMapper {
@Select("SELECT * FROM mutest.goods")
List<Good> getGoodsList();
@Insert("INSERT INTO mutest.goods(type,name,price,size,status,description)VALUES(#{type},#{name},#{price},#{size},#{status},#{description})")
int addGood(JSONObject request);
@Update("UPDATE mutest.goods SET type=#{type},name=#{name},price=#{price},size=#{size},status=#{status},description=#{description} WHERE id=#{id}")
void updateGood(JSONObject request);
@Delete("DELETE FROM mutest.goods WHERE id=#{id}")
void deleteGood(@Param("id") int id);
}
3.2 前端
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息</title>
<!--根據自己的項目目錄修改-->
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
</head>
<body>
<table id="goods_table" lay-filter="goods_bar"></table>
<div class="layui-row" id="open_div" style="display:none;">
<form id="add_form" class="layui-form" action="" style="margin-top: 20px;align:center;">
<!--隱藏字段action,用來區分增加和編輯行爲-->
<input type="hidden" name="action" id="action">
<!--隱藏字段id,用於提供編輯需要的主鍵-->
<input type="hidden" name="id" id="id">
<!--隱藏字段request_type,用於提供請求方式:get,post,put-->
<input type="hidden" name="request_type" id="request_type">
<div class="layui-form-item" style="display: table;width: 96%">
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">類  型</label>
<div class="layui-input-block">
<select id="" name="type" lay-filter="type" lay-verify="required">
<option value="">請選擇</option>
<option value="國產">國產</option>
<option value="進口">進口</option>
</select>
</div>
</div>
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">產品名稱</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="請輸入產品名稱"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="display: table;width: 96%">
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">價  格</label>
<div class="layui-input-block">
<input type="text" name="price" placeholder="請輸入價格"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="display: table-cell;width: 50%">
<label class="layui-form-label">數  量</label>
<div class="layui-input-block">
<input type="text" name="size" placeholder="請輸入數量"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="width: 96%">
<label class="layui-form-label">說  明</label>
<div class="layui-input-block">
<input type="text" name="description" placeholder="請輸入產品說明"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="margin-left: 40%">
<div class="layui-btn-group">
<button class="layui-btn" lay-submit="" lay-filter="update_submit">提 交</button>
<button type="reset" class="layui-btn layui-btn-primary">重 置</button>
</div>
</div>
</form>
</div>
<script src="layui/layui.js"></script>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="utils/common.js"></script>
<!--頭部工具按鈕-->
<script type="text/html" id="goods_headerBar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">
<i class="layui-icon"></i> 新 增
</button>
<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="refresh" style=" margin-left: 15px">
<i class="layui-icon"></i> 刷 新
</button>
</div>
</script>
<!--行工具按鈕-->
<script type="text/html" id="goods_lineBar">
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">刪除</a>
</script>
<script>
layui.use(['table', 'layer', 'form', 'laypage'], function () {
var table = layui.table;
var form = layui.form;
table.render({
elem: '#goods_table'
, id: 'goodsReload'
, even: true //開啓隔行背景
, url: '/goods/goodsList'
, request: {
pageName: 'pageNum',
limitName: 'pageSize'
}
, toolbar: '#goods_headerBar'
, title:
'商品詳情表'
, page:
true //開啓分頁
, limit: 5
, limits: [1, 5, 10, 20, 50, 100]
, cols:
[[{field: 'id', title: '編號', width: 60, align: 'center'}
, {field: 'type', title: '類 型', width: 76, align: 'center'}
, {field: 'name', title: '商品名稱', width: '8.5%', align: 'center'}
, {field: 'price', title: '價 格', width: '9.1%', align: 'center'}
, {field: 'size', title: '數 量', width: '9.5%', align: 'center'}
, {field: 'status', title: '狀 態', width: '7.5%', align: 'center'}
, {field: 'description', title: '說 明', align: 'center'}
, {
fixed: 'right',
title: '操作',
toolbar: '#goods_lineBar',
width: 160,
align: 'center'
}
]]
});
// 監聽頭部工具欄
table.on('toolbar(goods_bar)', function (obj) {
switch (obj.event) {
// 根據增加行爲給form隱藏項賦值
case 'add':
var data = {};
data.action = 'addGood';
data.request_type = 'post';
// 調用打開彈層的工具方法
open_form("#open_div", data, '添加商品', '620px', '282px');
break;
case 'refresh':
// 執行一個表格重載即實現刷新功能
table.reload('goodsReload', {
where: '',
contentType: 'application/x-www-form-urlencoded',
page: {
curr: 1 //重新從第 1 頁開始
},
url: '/goods/goodsList',
method: 'get'
});
break;
}
});
table.on('tool(goods_bar)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
var id = data.id;
switch (layEvent) {
case 'edit':
// 根據編輯行爲爲form隱藏項賦值
data.action = 'updateGood';
data.request_type = 'post';
open_form("#open_div", data, '編輯用例', '620px', '282px');
break;
case 'del':
layer.confirm('真的刪除該行麼', function (index) {
obj.del(); //刪除對應行(tr)的DOM結構,並更新緩存
//向服務端發送刪除指令
$.ajax({
type: "get", //數據提交方式(post/get)
url: "/goods/deleteGood?id=" + id, //提交到的url
contentType: "application/json; charset=utf-8",
dataType: "json",//返回的數據類型格式
success: function (result) {
layer.msg(result.msg, {icon: 1, time: 1000});
}, error: function (e) {
console.log(e, 'error');
layer.msg("查詢商品異常,請聯繫管理員!", {icon: 1, time: 1000});
}
});
layer.close(index);
});
break;
}
});
form.on('submit(update_submit)', function (data) {
var uri = data.field.action;
var type = data.field.request_type;
$.ajax({
type: type,
url: '/goods/' + uri,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data.field),
dataType: "json",
success: function (result) {
if (result.code == "0") {
table.reload('goodsReload', {
contentType: 'application/x-www-form-urlencoded',
page: {
curr: 1 //重新從第 1 頁開始
},
url: '/goods/goodsList',
method: 'get'
});
layer.msg('修改成功', {icon: 1, time: 1000});
} else { //失敗
layer.alert(result.msg, {icon: 2}, function () {
layer.close(index);
});
}
}
});
layer.close(index);//關閉彈出層
return false;
});
});
</script>
</body>
</html>
工具方法
var index;
function open_form(element, data, title, width, height) {
if (title == null || title == '') {
title = false;
}
if (width == null || width == '') {
width = '100%';
}
if (height == null || height == '') {
height = '100%';
}
index = layer.open({
type: 1,
title: title,
area: [width, height],
fix: false, //不固定
maxmin: true,//開啓最大化最小化按鈕
shadeClose: true,//點擊陰影處可關閉
shade: 0.4,//背景灰度
// skin: 'layui-layer-rim', //加上邊框
content: $(element),
success: function () {
$(element).setForm(data);
layui.form.render(); // 下拉框賦值
}
});
}
$.fn.setForm = function (jsonValue) {
var obj = this;
$.each(jsonValue, function (name, ival) {
var $oinput = obj.find("input[name=" + name + "]");
if ($oinput.attr("type") === "checkbox") {
if (ival !== null) {
var checkboxObj = $("[name=" + name + "]");
var checkArray = ival.split(";");
for (var i = 0; i < checkboxObj.length; i++) {
for (var j = 0; j < checkArray.length; j++) {
if (checkboxObj[i].value === checkArray[j]) {
checkboxObj[i].click();
}
}
}
}
} else if ($oinput.attr("type") === "radio") {
$oinput.each(function () {
var radioObj = $("[name=" + name + "]");
for (var i = 0; i < radioObj.length; i++) {
if (radioObj[i].value == ival) {
radioObj[i].click();
}
}
});
} else if ($oinput.attr("type") === "textarea") {
obj.find("[name=" + name + "]").html(ival);
} else {
obj.find("[name=" + name + "]").val(ival);
}
})
};