【若依系统-前后端不分离版本的】怎么在列表中直接修改某个字段的值?
2023-02-18 16:31:18 时间
使用若依系统的时候,在列表中之间修改某个字段的值或者实现如下功能怎么实现?
这里凯哥使用两种方法来实现:
方法一:自己写代码来实现
思路:
可以参照列表中操作:
我们可以看到,在列表最后操作,其实是a标签的。我们可以模仿这个来写。
先来看看,凯哥实现的效果:
再来看看怎么实现的。
浏览器F12后,找到对应的数据。就是一个div.如下:
<html>
<head></head>
<body>
<div>
<span id="showPurchaseNumDate_0">90</span>
<div>
<input type="text" id="purchaseNumDate_0" oninput="purchaseNumDateChange(0)" placeholder="请输入进货数量" value="90" />
<a href="javascript:void(0)" onclick="return savePurchaseNum( '2', '0' )">保存</a>
</div>
</div>
</body>
</html>
其实这个是拼接出来的div.
我们回到上面,看看列表中操作是怎么拼接出来的:
就是使用了formatter这个熟悉。然后将拼接好的html片段return出去就可以了。
那么我们也模仿这个拼接我们需要的html片段:
找到我们需要修改的字段位置。然后如下图:
代码:
{
field: 'purchaseNum',
title: '进货数量',
width: 200,
formatter: function(value, row, index) {
var actions = [];
var data = row.purchaseNum;
if('null' == data || null == data){
data = '';
}
var optionDiv = '<div >' +
'<span id="showPurchaseNumDate_'+index+'">'+data+'</span>' +
' <div>' +
'<input type="text" id="purchaseNumDate_'+index+'" oninput="purchaseNumDateChange('+index+')" placeholder="请输入进货数量" value="'+data+'" >' +
' <a href="javascript:void(0)" onclick="return savePurchaseNum( \'' + row.id + '\', \'' + index + '\' )">保存</a> ' +
'</div>' +
'</div>';
actions.push(optionDiv);
return actions.join('');
}
},
参数说明:
row:就是这行数据的对象
其中row.purchaseNum是需要展示的字段值。
然后在修改input数据的时候,会实时回显在id为showPurchaseNumDate_序号的span上面。
这里使用到了input的oninput函数(在下面,凯哥会将对应js源码也贴出来),修改完之后,点击保存操作的时候,会调用保存方法。
两个js方法分别如下:
purchaseNumDateChange函数:
/**
* 获取修改数量的时候,实时修改span的值
* @param index
*/
function purchaseNumDateChange(index) {
var changeSpan = document.getElementById ("showPurchaseNumDate_"+index);
var data = document.getElementById ("purchaseNumDate_"+index).value;
changeSpan.innerHTML = data;
}
保存时候操作的savePurechaseNum()函数:
function savePurchaseNum(saveInfoId,index) {
var data = document.getElementById ("purchaseNumDate_"+index).value;
if(null == data || '' == data ||""==data || "null"==data){
alert("进货数量不能为空")
return ;
}
//验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
var reg = new RegExp("^[0-9]+(.[0-9]{2})?$");
if(!reg.test(data)){
alert("请输正实数!");
return;
}
if(confirm('确定需要修改进货数量吗?'))
{
//执行保存数量操作
$.ajax({
type : 'post', //传输类型
async : false, //同步执行
url : '/purchase/detail/savePurchaseNum', //请求后台数据的路径
data : { "id": saveInfoId, "purchaseNumStr": data },
dataType : 'json', //返回数据形式为json
success : function(result) {
var code = result.code;
if(0== code){
alert("更新成功");
}else{
alert("更新失败");
}
},
error : function(errorMsg) {
alert("修改失败");
}
});
return true;
}
return false;
}
这样就实现了.
方法二:根据示例demo
实例演示》》表格》》表格行内编辑
具体实现步骤:
1:在header中引入css
<th:block th:include="include :: bootstrap-editable-css" />
如下图:
2:在footer下面引入edittable的js
<th:block th:include="include :: bootstrap-table-editable-js" />
如下图:
3:在options中启用onEditableSave属性
onEditableSave: onEditableSave,
如下图:
4:在对应需要修改的字段中添加editable属性。如果需要校验的话也可以。如下图:
如果修改的字段是下拉框的话,同理。如下图:
5:修改保存时候触发的函数。
function onEditableSave (field, row, rowIndex, oldValue, $el) {
alert("字段名:" + field + ",当前值:" + row[field] + ",旧值:" + oldValue);
}
如下图:
我们来看看最后的效果:
相关文章
- 带你掌握java反序列化漏洞及其检测
- 这几种Java异常处理方法,你会吗?
- 教你用Java7的Fork/Join框架开发高并发程序
- Java变异出现错误:No enclosing instance of type XXX is accessible
- LeetCode - #70 爬楼梯(Top 100)
- LeetCode - #71 简化路径
- LeetCode - #72 编辑距离(Top 100)
- LeetCode - #73 矩阵置零
- LeetCode - #74 搜索二维矩阵
- [Maven进阶]聚合和继承
- Ichunqiu云境 - Delegation Writeup
- 在搭载 M1 及 M2 芯片 MacBook 设备上玩 Stable Diffusion 模型
- 在 Ubuntu 上安装 Discourse 开发环境
- 用户重复注册分析-多线程事务中加锁引发的bug
- 基于51单片机的简易抢答器
- 设计分享|74HC154译码器实现流水灯
- adobe photoshop软件2023最新版下载安装
- Photoshop2023最新完美版一键式安装教程
- DaVinci Resolve2023永久免费版下载安装教程
- 3dmax软件2023最新免费版下载