jeecg自定义编辑页面
重写按钮方法
将系统生成的代码
<t:dgToolBar title="编辑" icon="icon-edit" url="tbFwzGongDanController.do?goUpdate"
funname="update"></t:dgToolBar>
换成
<t:dgToolBar title="编辑" icon="icon-edit" height="500" width="850" funname="updatePlus"></t:dgToolBar>
实现编辑按钮的方法
updatePlus = () => {
var row = $("#tbFwzGongDanList").datagrid('getSelected');
if (row.id == '' || row.id == null) {
alert("请先选择工单!");
return;
} else {
const url = "tbFwzGongDanController.do?goOutUpdate&id=" + row.id;
openwindow("编辑", url, "tbFwzGongDanList", 850, 500)
}
}
因为我在上面实现编辑按钮时使用的是openwindow,所以打开的弹出层是没有任何按钮的,现在需要在页面添加四个按钮:确定,结算,结算完成,反结算
jeecg使用的弹出层框架是:lhgDialog窗口组件
查看IhgDialog官方文档的示例,为页面添加按钮可以这样写
var api = frameElement.api, W = api.opener;
api.button({
name: '确定',
focus: true,
callback: ok
},
{
name: '结算',
callback: pay
}, {
name: '结算完成',
callback: completeSettlement
},
{
name: '反结算',
callback: antiClearing
});
然后是实现这四个按钮的方法,由于我新添加的四个按钮都需要向后台提交更新数据,所以我需要考虑的是如何提交jeecg生成的编辑页面的表单
根据生成的表单代码可以看出,jeecg使用了Validform来校验表单
<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table" callback="closeWindow"
action="tbFwzGongDanController.do?doOutUpdate" tiptype="1">
查看官方文档知道,可以手动提交表单,并自定义提交后的回调方法,那么上面的按钮实现方法就可以这样写
//确定
function ok() {
//通过表单id获取表单对象
var form = $("#formobj1").Validform({
//自定义表单提交回调方法,数据提交,后台处理完会回调这个方法
callback: function (data) {
//调用父页面的方法,将后台返回的提示信息在父页面提示
W.tipMessage(data.msg);
//后台处理结束,手动关闭弹窗
api.close()
}
});
//设置表单以ajax方式提交
//因为只有以ajax方式提交数据,才会在后台处理完回调
form.ajaxPost(false, false, "tbFwzGongDanController.do?doOutUpdate")
//按钮的实现方法默认返回true
//如果返回true,那么点击按钮会直接关掉弹窗
//如果返回false,那么点击按钮不关闭弹窗
return false
};
表单的ajaxPost方法有三个参数
- 第一个参数类型为Boolean,设置表单提交时是否校验表单信息的合法性
- 第二个参数类型为Boolean,设置表单是否是异步提交
- 第三个参数是表单的提交地址
这样一个自定义的编辑页面就写完了。