layui+ssm實現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)功能
更新時間：2023年12月08日 09:33:39 作者：洛洛不覺
在使用layui加載后端數(shù)據(jù)請求時,對數(shù)據(jù)選項框進行雙擊即可實現(xiàn)數(shù)據(jù)的輸入編輯更改,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
layui實現(xiàn)數(shù)據(jù)表格雙擊編輯數(shù)據(jù)更新
在使用layui加載后端數(shù)據(jù)請求時，對數(shù)據(jù)選項框進行雙擊即可實現(xiàn)數(shù)據(jù)的輸入編輯更改
代碼塊
var form = layui.form, table = layui.table,
layer = parent.layer === undefined ? layui.layer : parent.layer,
laypage = layui.laypage;
var util = layui.util;
$ = layui.jquery;
//數(shù)據(jù)表格
table.render({
id: 'categoryList',
elem: '#categoryList',
url: ctx + "/book/getCategoryList", //數(shù)據(jù)接口
cellMinWidth: 80,
toolbar: '#toolbar',
editTrigger: 'dblclick',// 觸發(fā)編輯的事件類型（默認 click ）
limit: 10,//每頁條數(shù)
limits: [10, 20, 30, 40],
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
css: [
// 對開啟了編輯的單元格追加樣式
'.layui-table-view td[data-edit]{color: #16B777;}'
].join(''),
cols: [[ //表頭
{type: 'numbers', title: '序號', width: 80},//序號列
{field: 'categoryName', title: '類別名稱', align: 'center', edit: 'textarea'},// edit: 'textarea'主要標記當(dāng)前項是否啟用編輯
{field: 'categoryDesc', title: '類別說明', align: 'center', edit: 'textarea'},
{
field: 'categoryDate',
title: '創(chuàng)建時間',
sort: true,
align: 'center',
templet: '<div>{{ formatTime(d.categoryDate,"yyyy-MM-dd hh:mm:ss")}}</div>'
},
{
fixed: 'right', title: '操作', align: 'center', templet: function (d) {
return '<button class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">編輯</i></button>'
+ '<button class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete">刪除</i></button>';
}
},
]],
page: true
});
/*
* 單元格雙擊編輯事件
* */
table.on('edit(categoryList)', function (obj) {
var field = obj.field; // 得到修改的字段
var value = obj.value // 得到修改后的值
var cateId = obj.data.cateId; // 獲取當(dāng)前修改數(shù)據(jù)的id
// 值的校驗
if (value.replace(/\s/g, '') === '') {
layer.msg('修改值不能為空！');
return obj.reedit(); // 重新編輯
}
// 編輯后續(xù)操作，如提交更新請求，以完成真實的數(shù)據(jù)更新
var index = top.layer.msg('正在將新數(shù)據(jù)寫入數(shù)據(jù)庫，請稍候...', {icon: 16, time: false, shade: 0.8});
var msg;
setTimeout(function () {
$.ajax({
type: "POST",
url: ctx + "/book/updateCate",
data: {
cateId: cateId, // 獲取當(dāng)前修改數(shù)據(jù)的id
field: field,// 得到修改的字段
value: value,// 得到修改后的值
},
success: function (d) {
if (d.code == 0) {
msg = d.msg;
} else {
msg = d.msg;
}
},
error: function (jqXHR, textStatus, errorThrown) {
layer.msg("獲取數(shù)據(jù)失敗！ 先檢查sql 及 Tomcat Localhost Log 的輸出");
}
}).done(function () {
top.layer.close(index);
top.layer.msg(msg);
layer.closeAll("iframe");
setTimeout(function () {
parent.location.reload();
}, 1000);
});
}, 2000);
});
});這里只要使用layui和后端ssm框架實現(xiàn)，所以后端代碼
controller代碼
/*
* 數(shù)據(jù)更新操作
* */
// 更新分類信息的接口
@RequestMapping("/updateCate")
@ResponseBody
//根據(jù)前端提供的id,更改的字段，更改的值進行查詢更新
public ResultUtil updateCate(Integer cateId, String field, String value) throws ParseException {
// 打印傳入的分類ID、字段和值
/* System.out.println(cateId);
System.out.println(value);
System.out.println(field);*/
// 根據(jù)分類ID獲取分類實體
CategoryEntity categoryEntity = bookService.getCategoryById(cateId);
// 打印獲取到的分類實體
System.out.println(categoryEntity);
// 插入當(dāng)前時間作為修改時間
Date data = new Date();
// 創(chuàng)建一個SimpleDateFormat對象，用于格式化日期
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
// 使用SimpleDateFormat對象將Date對象轉(zhuǎn)換為字符串格式的日期
String nowTime = simpleDateFormat.format(data);
// 使用SimpleDateFormat對象將字符串格式的日期解析為Date對象
Date date1 = simpleDateFormat.parse(nowTime);
// 如果獲取到的分類實體不為空
if (categoryEntity != null) {
// 根據(jù)字段名進行相應(yīng)的操作
switch (field) {
case "categoryDesc":
categoryEntity.setCategoryDesc(value);
break;
case "categoryName":
categoryEntity.setCategoryName(value);
break;
default:
// 如果字段名不符合要求，返回錯誤信息
return ResultUtil.error("提交的數(shù)據(jù)有問題，請檢查！");
}
// 設(shè)置修改時間
categoryEntity.setCategoryDate(date1);
// 更新分類實體
bookService.updateCategory(categoryEntity);
// 返回成功信息
return ResultUtil.ok("數(shù)據(jù)信息更新成功！");
}
// 如果獲取到的分類實體為空，返回錯誤信息
return ResultUtil.error("提交的數(shù)據(jù)有問題，請檢查！");
}service
/*
* 數(shù)據(jù)更新
* */
void updateCategory(CategoryEntity categoryEntity);
/*
* 根據(jù)id機型查詢數(shù)據(jù)
*
* */
CategoryEntity getCategoryById(Integer cateId);serviceImpl
/*
* 數(shù)據(jù)更新
* */
@Override
public void updateCategory(CategoryEntity categoryEntity) {
categoryDao.updateCategory(categoryEntity);
}
/*
* 根據(jù)id查詢數(shù)據(jù)
* */
@Override
public CategoryEntity getCategoryById(Integer cateId) {
return categoryDao.getCategoryById(cateId);
}dao
/*
* 數(shù)據(jù)更新updateCategory
* */
void updateCategory(CategoryEntity categoryEntity);
/*
* 根據(jù)id查詢數(shù)據(jù)
* */
CategoryEntity getCategoryById(Integer cateId);mapper.xml
<!--根據(jù)id查詢數(shù)據(jù)-->
<select id="getCategoryById"
resultType="layui.library.manager.project.entity.CategoryEntity">
SELECT *
FROM tb_book_category
where cateId = #{cateId}
</select>
<!--數(shù)據(jù)更新-->
<update id="updateCategory" parameterType="layui.library.manager.project.entity.CategoryEntity">
update tb_book_category
<set>
<if test="categoryName!=null">
categoryName=#{categoryName},
</if>
<if test="categoryDesc!=null">
categoryDesc=#{categoryDesc},
</if>
<if test="categoryDate!=null">
categoryDate=#{categoryDate}
</if>
</set>
where cateId=#{cateId}
</update>到此這篇關(guān)于layui+ssm實現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)的文章就介紹到這了,更多相關(guān)layui數(shù)據(jù)表格雙擊編輯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
兩款JS腳本判斷手機瀏覽器類型跳轉(zhuǎn)WAP手機網(wǎng)站
本文通過兩款js腳本判斷手機瀏覽器類型跳轉(zhuǎn)到wap手機網(wǎng)站，感興趣的小伙伴快來學(xué)習(xí)吧2015-10-10
最近項目寫了一些js，水平有待提高,比較常用的一些js函數(shù)。2009-01-01
最近正在看《javascript設(shè)計模式》，其中有一個'就地編輯'的示例，用來表現(xiàn)不同的繼承方式，看完之后想自己憑理解寫一個類似的東西。2010-05-05
本文主要介紹了js面向?qū)ο缶幊痰南嚓P(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)團購或秒殺批量倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
有時候一些js代碼并不希望在別的瀏覽器下運行，就需要事先判斷一下，方便下面的操作。2010-03-03
這篇文章主要介紹了基于BootStarp的Dailog 的相關(guān)資料,需要的朋友可以參考下2016-04-04
javascript發(fā)表評論或者留言時的展開效果...2007-07-07
大家應(yīng)該都知道基本圖表一共有六種，分別是柱狀圖、折線圖、散點圖、氣泡圖、餅圖和雷達圖。前面五種圖形都已經(jīng)介紹過如何實現(xiàn)了，今天我們一起來看看最后的雷達圖。有需要的朋友們可以參考學(xué)習(xí)下。2016-09-09