这两天我用easyui 框架做了一个编辑表单遇到个问题,自动刷新还是旧数据:
样例:
![](https://img.haomeiwen.com/i5949949/4dc540876d8ed0ef.png)
前端
样式:
#have{
width:600px;
height:200px;
}
.hope {
max-height: 180px; //限制高度
overflow-y: auto; //滑轮需要div包裹
}
<div class="hope">
<table id="have" title="师傅扣款记录" singleSelect="true" toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" >
<thead>
<tr>
<th field="orderId" width="100" editor="{type:'validatebox',options:{required:true}}">订单id</th>
<th field="creationTime" width="100" editor="text">时间</th>
<th field="goAmount" width="100" align="right" editor="numberbox">走保金额</th>
<th field="amount" width="100" align="right" editor="numberbox">财务扣款金额</th>
<th field="wdAmount" width="190" align="right" editor="numberbox">网点扣款金额</th>
<th field="financialDeductions" width="100" editor="numberbox">欠款金额</th>
<th field="name" width="100" editor="text">操作人</th>
<th field="comment" width="100" editor="text">备注</th>
</tr>
</thead>
</table>
</div>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#have').edatagrid('saveRow')">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#have').edatagrid('cancelRow')">Cancel</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#have').edatagrid('addRow')">添加</a>
</div>
js内容:
$(function () {
$('#have').edatagrid({
url: '${basePath}' + "/orderSys/deposit/getDepositId/" + ${id}, //查询
<%--updateUrl: '${basePath}'+ "/orderSys/deposit/getDepositupdate/"+"0",--%> //修改
saveUrl: '${basePath}'+ "/orderSys/deposit/getDepositupdates/" + ${id}, //添加
onAfterEdit: (rowIndex, rowData, changes) => { //添加之后触发
// let datas = $('#have').datagrid('getData')
// console.log('onAfterEdit',datas.rows.length,datas.rows,rowData)
// if (rowIndex > 0){
// let before = datas.rows[rowIndex - 1];
// rowData.financialDeductions = Number(before.financialDeductions) - Number(rowData.amount)
// console.log("aa",rowData.financialDeductions);
//
// }
$('#have').edatagrid('loading')
setTimeout(() => { //延迟加载
$('#have').edatagrid('load')
$('#have').edatagrid('loaded')
}, 2000)
}
});
});
其实用了easyui的框架的可编辑表单,每次添加都有自动刷新功能,但是问题来了,其实我们刷新的速度比添加快,造成拿的是旧数据,所以延迟2秒可以解决
网友评论