jeecg自定义编辑页面

Posted haohj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,设置表单是否是异步提交
  • 第三个参数是表单的提交地址

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

以上是关于jeecg自定义编辑页面的主要内容,如果未能解决你的问题,请参考以下文章

在JEECG-boot代码生成的基础上修改list页面(结合自定义的组件)

在JEECG-boot代码生成的基础上修改list页面(结合自定义的组件)

VsCode编辑器如何自定义代码片段

java开源项目jeecg结构与代码全解析

jeecgboot前端自定义组件JgEditable Table行编辑表格

VSCode自定义代码片段——声明函数