jeecg自定义编辑页面

Posted 2020-11-20 haohj

重写按钮方法

将系统生成的代码

<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，设置表单是否是异步提交
• 第三个参数是表单的提交地址

这样一个自定义的编辑页面就写完了。