datagrid格式如下

需求

1. 编辑：选中某一行后，点击编辑可以修改该行"值"字段。

2. 保存：编辑完成后，点击保存数据保存。

3. 删除：选中某一行后，点击删除，删除该数据

4. 撤销：撤销上一次删除

知识点

用到的easyUIAPI

checkbox：复选框
fit：冻结表头
fitColumns：列宽度自适应
singleSelect：行单选
onBeginEdit：当某一行进入编辑模式的时候触发
onAfterEdit：当某一行编辑完成后触发
$('#dataanagrid-content-dg').datagrid('getData')获取表格中的数据，返回结果为对象{total：xx，row：{}}
$('#dataanagrid-content-dg').datagrid('getSelected')获取选中行
$('#dataanagrid-content-dg').datagrid('getRowIndex', selectRow)获取选中行的索引
$('#dataanagrid-content-dg').datagrid('beginEdit', selectIndex);选中行进入编辑模式
$('#dataanagrid-content-dg').datagrid("deleteRow", selectIndex);删除选中行
$('#dataanagrid-content-dg').datagrid('endEdit', selectIndex);选中行退出编辑模式
$("#dataanagrid-content-dg").datagrid("insertRow", { index: deleteRowObj.index, row: deleteRowObj.row });在对应索引行插入数据
$("#dataanagrid-content-dg").datagrid("updateRow", {index: index,row: {"值": newItem,}});更新对应行数据
sessionStorage.setItem("deleteRowInfo", deleteRow);设置sessionStorage中deleteRowInfo值
sessionStorage.getItem("deleteRowInfo");获取sessionStorage中deleteRowInfo值
字符串转json：let deleteRowObj = JSON.parse(deleteRowInfo);
json转字符串：let jsonRow = JSON.stringify(row);

代码

<button class="sigle-button" onclick="$UI.clickButton('edit')">编辑</button>
<button class="sigle-button" onclick="$UI.clickButton('delete')">删除</button>
<button class="sigle-button" onclick="$UI.clickButton('save')">保存</button>
<button class="sigle-button" onclick="$UI.clickButton('recall')">撤销</button>

$('#dataanagrid-content-dg').datagrid({checkbox: true,fit: true,fitColumns: true,singleSelect: true,idField: '传感器',onBeginEdit: function (index, row) {sessionStorage.setItem("editDataFlag", "true");},onAfterEdit: function (index, row, changes) {let newItem = changes.值;newItem = newItem.replace(/(0+)$/g, "");if (newItem.indexOf(".") === newItem.length - 1) {newItem = newItem.substring(0, newItem.length - 1);}$("#dataanagrid-content-dg").datagrid("updateRow", {index: index,row: {"值": newItem,}});var row = $("#dataanagrid-content-dg").datagrid('getData').rows[index];let data = {'name': row.传感器.split(":")[0],'paratype': row.传感器.split(":")[1],'time': row.时间,'unit': row.单位,'data': row.值}changeItemData(data, 'edit')sessionStorage.setItem("editDataFlag", "false");$(this).datagrid('unselectRow', index);}
});

clickButton = function (tag) {$.ajax({url: '/Search/GetAccountID',type: 'get',dataType: 'text',async: false,success: function (response) {let selectRow, selectIndex;if (response !== '管理员') {editAlert("无权限操作！", 500);return;}if (window.sessionStorage.getItem('dataAnaFlag') !== "原始数据生成") {editAlert("只可操作原始数据！", 1000);return;}if ($('#dataanagrid-content-dg').datagrid('getData').total === 0) {editAlert("请选择监测站与测计！", 1000);return;}if (tag !== 'recall' ) {selectRow = $('#dataanagrid-content-dg').datagrid('getSelected');selectIndex = $('#dataanagrid-content-dg').datagrid('getRowIndex', selectRow);if (selectRow.传感器.split(":")[1].indexOf("雨量") !== -1) {alert("雨量数据不支持编辑与删除！")return;}}if (tag === 'edit') {let editDataFlag = window.sessionStorage.getItem("editDataFlag");if (editDataFlag === "true") {editAlert("请先保存上次更改数据！", 1000);return;}if (selectRow === null) {editAlert("请选择需要更改的数据！", 1000);return;}// 开始编辑$('#dataanagrid-content-dg').datagrid('beginEdit', selectIndex);} else if (tag === 'delete') {if (selectRow === null) {editAlert("请选择需要删除的数据！", 1000);return;}let row = $("#dataanagrid-content-dg").datagrid('getData').rows[selectIndex];$('#dataanagrid-content-dg').datagrid("deleteRow", selectIndex);let jsonRow = JSON.stringify(row);let deleteRow = `{"index":"${selectIndex}","row":${jsonRow}}`sessionStorage.setItem("deleteRowInfo", deleteRow);let data = {'name': row.传感器.split(":")[0],'paratype': row.传感器.split(":")[1],'time': row.时间,'unit': row.单位,'date': row.值}changeItemData(data, 'delete')} else if (tag === 'save') {$('#dataanagrid-content-dg').datagrid('endEdit', selectIndex); } else if (tag === 'recall') {let deleteRowInfo = sessionStorage.getItem("deleteRowInfo");if (deleteRowInfo === null) {editAlert("未执行删除操作！", 1000);return;}let deleteRowObj = JSON.parse(deleteRowInfo);deleteRowObj.row.值 = Number(deleteRowObj.row.值);deleteRowObj.index = Number(deleteRowObj.index);$("#dataanagrid-content-dg").datagrid("insertRow", { index: deleteRowObj.index, row: deleteRowObj.row });sessionStorage.removeItem("deleteRowInfo");let data = {'name': deleteRowObj.row.传感器.split(":")[0],'paratype': deleteRowObj.row.传感器.split(":")[1],'time': deleteRowObj.row.时间,'unit': deleteRowObj.row.单位,'date': deleteRowObj.row.值}changeItemData(data, 'recall')}}})}

/**
* 数据库操作
* @param {any} options 修改的数据
* @param {any} flag 删/改/增
*/
function changeItemData(options, flag) {let data = {'admi': options.name,'item': options.paratype,'time': options.time,'data': options.data,'type': flag}$.ajax({url: '/Monitoring/changeItemData',type: 'post',dataType: 'text',data: data,async: false,success: function (response) {if (response == "1") {alert("操作成功!");} else if (response == "1") {alert("操作失败!");}}})
}

/*** 弹窗* @param {any} msg 弹出语句* @param {any} time 延时*/
function editAlert(msg, time) {$.messager.show({title: '提示',msg: msg,timeout: time,showType: 'slide',style: {top: document.body.scrollTop + document.documentElement.scrollTop}});
}

EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现相关推荐

Easyui之Datagrid(数据表格)
Datagrid 前言 1.概念 2.常见使用案例 3.datagrid属性 4.datagrid事件 5.datagrid方法 6.案例演示 7.为什么使用datagrid 总结前言今天为大家分 ...
（五）EasyUI使用——datagrid数据表格
DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并. ...
DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination ...
datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件（el-datagrid）...
背景 element-ui 中的 el-table 组件只提供了数据展示,而分页功能作为一个单独的组件 el-pagination,并没有像 Ant Design 一样集成到 el-able 组件中, ...
Easyui中DataGrid（数据表格）
Easyui中DataGrid(数据表格) 1.DataGrid简介 2.实现过程 2.1jsp页面的代码块(两种方式) 第一种第二种 3.DataGrid属性 4.实践操作 4.1界面创建 4.2 ...
easyui中datagrid表格如何正确显示和隐藏
最近遇到了一个问题,是关于easyui数据表格的显示和隐藏的,一般显示元素可以通过dispaly:block(或show())和display:none (hide())控制显示隐藏的但是这个eas ...
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
.easyui（DataGrid数据查询）
1.DataGrid 1.1 DataGrid基本属性 1.1.1 基本属性 url : '', // 初始化请求路径 fitcolumns : false, ...
datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...

EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现

datagrid格式如下

需求

1. 编辑：选中某一行后，点击编辑可以修改该行"值"字段。

2. 保存：编辑完成后，点击保存数据保存。

3. 删除：选中某一行后，点击删除，删除该数据

4. 撤销：撤销上一次删除

知识点

用到的easyUIAPI

代码

EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现相关推荐

最新文章

热门文章

EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现

datagrid格式如下

需求

1. 编辑：选中某一行后，点击编辑可以修改该行"值"字段。

2. 保存：编辑完成后，点击保存数据保存。

3. 删除：选中某一行后，点击删除，删除该数据

4. 撤销： 撤销上一次删除

知识点

用到的easyUIAPI

代码

EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现相关推荐

最新文章

热门文章

4. 撤销：撤销上一次删除