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

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

原文地址:https://www.cnblogs.com/haohj/p/9246315.html

时间: 2024-08-05 21:48:16

jeecg自定义编辑页面的相关文章

jeecg自定义datagrid查询

为什么要写这篇文章? 我们了解,使用 jeecg 提供的 CriteriaQuery 查询方式,确实能满足绝大数的需求,但是往往有那么个比较复杂的情况,需要我们直接去写 sql,比如多表查询呀等等等等~因此,就整理了 "自定义 datagrid 查询" 这篇文章,希望这篇文章对你有所帮助. 后台datagrid方法 在此就不详细描述业务需求了,假装巴拉巴拉巴拉一堆复杂业务描述,最终用一个十分简单的 sql 给表示了: SELECT t.* FROM `t_s_user` t; 看一下代

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以及在本页面隐藏详情页面显示编辑页面. 实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录.集合了 lightning:recordEditForm 以及 lightning:recordViewFor

jeecg自定义CriteriaQuery查询组装

@RequestMapping(params = "datagrid") public void datagrid(TbTendUserEntity tbTendUser, HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) { CriteriaQuery cq = new CriteriaQuery(TbTendUserEntity.class, dataGrid); // 查询条件

JEECG 3.6 自定义表单版本发布,智能快速开发平台

JEECG 3.6(智能快速开发平台) 自定义表单版本发布 平台介绍:JEECG(J2EE Code Generation),一款基于代码生成器的JAVA快速开发平台,集成强大代码生成器和在线开发机制,在线报表配置机制,自定义表单,数据权限等企业平台机制.---------------------------------------- Version:  jeecg-framework-3.6版 本:   JEECG 智能快速开发平台Date:      2015-12-04作 者:      

【JEECG技术博文】JEECG简单实例讲解自定义表单功能

JEECG简单实例讲解自定义表单功能 作者:任杰 http://blog.csdn.net/renjie0520/article/details/50286503 一.自定义表单功能简介 自定义表单是JEECG智能开发平台开发的一套可视化的表单设计功能,基于ueditor实现,bootstrap样式风格. 总体来讲,自定义表单功能概括起来如下: 1)表单预览,动态报表展示(列表数据展示) 2)表单数据填报,支持多数据表同时填报,一对多数据表填报,单表多条数据批量填报等 自定义表单支持用户自定义模

JEECG中datagrid方法自定义查询条件

自定义加添加查询条件的用法: CriteriaQuery cq = new CriteriaQuery(EquipmentEntity.class, dataGrid); //查询条件组装器 org.jeecgframework.core.extend.hqlsearch.HqlGenerateUtil.installHql(cq, equipment, request.getParameterMap()); cq.add(Restrictions.or(Restrictions.in("per

JEECG中修改时间相关自定义定时器

JEECG中使用,如下: @InitBinder public void initBinder(ServletRequestDataBinder binder) { binder.registerCustomEditor(Date.class, new DateConvertEditor()); } 其中的DateConvertEditor类是JEECG中用于将日期进行转换的类.其主要代码如下: private SimpleDateFormat datetimeFormat = new Simp

【jeecg移动开发能力】表单移动开发能力,提供多套表单模板(移动端、PC端),支持自定义

[一].请假表单风格(单表)  [1]移动端风格 [2]PC端风格一   [3]PC端风格二    [二].订单管理表单风格(一对多)  [1]移动端风格 [2]PC端风格一  [3]PC端风格二

UI标签库专题二:JEECG智能开发平台Column(列) 子标签

 1.1. Column(列) 子标签 1.1.1. 示例 <t:dgCol title="年龄" field="age" query="true" extend="{data-options:{required:false,groupSeparator:\"','\"},class:{value:'easyui-numberbox'}}"></t:dgCol> 1.1.2. 参