『贴代码』
我的博文
个人作品
优选问答
「搜索」
【本期话题】更多
三人寄语更多
逻辑注解清晰的代码优于那些一眼看不明白的语法糖
点赞:0
对于答案来说,更重要的是找到答案的这个过程而不是答案本身!
点赞:0
设置后,UI不会变更,要不给他一个SetTimeout试试,原因自己想
点赞:0
测试没问题的不一定没问题,测试有问题的那肯定有问题!
点赞:2
时间与空间总是在换来换去,鱼和熊掌往往不可同得!
点赞:0
抛开需求谈架构是无意义的事情!
点赞:0
需求就是系统的千年杀,相爱相杀那种!
点赞:0
时好时坏的结果,往往是多线程引起的逻辑混乱导致的!
点赞:0
谋而后动,往往会让你对自己的代码更具信心!
点赞:1
慎用redis的同步我的意见是redis都走异步!!!
点赞:0
框架PasteForm实际开发案例,支持多级对象的表单看看有多简单只要几个特性即可!(1)
尘埃 2025-04-05 27 3 0
你知道么,包含多层级对象的表单在PasteForm中是这么的简单,只需要一个特性即可!

更多特性PasteForm的介绍,请前往PasteForm操作文档查看 PasteForm操作文档与介绍


;

PasteForm框架的主要思想就是对Dto进行标记特性,然后管理端的页面就会以不一样的UI呈现
使用PasteForm框架开发,让你免去开发管理端的烦恼,你只需要专注于业务端和用户端!

今天来分享的主要有以下几个点
1.多级嵌套,也可以说是外表或者是子表集合模式
2.按需显示,比如某一个选项选择a的时候,哪些要输入,选择b的时候又是哪些要输入

带子页面和可选输入的UI

先看UI
在这里插入图片描述
如果我选择条件包邮,则变成下面的
在这里插入图片描述
注意看上图的条件包邮,后面又新增+ 删除 收缩的操作,也就是可以以当前为范本新增一个对象的!
思考下,看UI可以知道条件包邮是下一级的东西,然后地区选择应该是一个array对吧,一起看看Dto长啥模样

Dto

    ///<summary>
    ///运费模板
    ///</summary>
    public class TemplateInfoAddDto
    {
        ///<summary>
        ///模板名称
        ///</summary>
        [MaxLength(64)]
        [Required]
        public string name { get; set; }

        ///<summary>
        ///计费类型
        ///</summary>
        [MaxLength(8)]
        [PasteLselect(PasteFormString.SelectValuationType, "", 1)]
        public string valuation_type { get; set; } = "PIECE";

        ///<summary>
        ///发货期限 SendTime_TWENTYFOUR_HOUR SendTime_FOUTYEIGHT_HOUR
        ///</summary>
        [MaxLength(32)]
        [PasteLselect(PasteFormString.SelectSendTime, "", 1)]
        public string send_time { get; set; } = "SendTime_TWENTYFOUR_HOUR";

        ///<summary>
        ///运输方式 EXPRESS:快递
        ///</summary>
        [MaxLength(16)]
        [PasteSelect(PasteFormString.SelectDeliveryType)]
        public string delivery_type { get; set; } = "EXPRESS";

        ///<summary>
        ///计费方式
        ///</summary>
        [MaxLength(16)]
        [PasteLselect(PasteFormString.SelectShippingMethod, "", 1)]
        [ColumnDataType("changeui", "CONDITION_FREE", "group:regexp:condition_free_detail_list__(.*)", "")]
        [ColumnDataType("changeui", "NO_FREE", "group:regexp:freight_calc_method_list__(.*)", "")]
        public string shipping_method { get; set; } = "FREE";

        /////<summary>
        /////条件包邮
        /////</summary>
        //public string all_condition_free_detail_json { get; set; }

        /////<summary>
        /////条件包邮
        /////</summary>
        //[PasteDirectsun]
        //public AllConditionFreeDetail all_condition_free_detail { get; set; } = new AllConditionFreeDetail();

        /// <summary>
        /// 条件包邮
        /// </summary>
        [PasteDirectsun]
        [PasteHidden]
        public List<ConditionFreeDetail> condition_free_detail_list { get; set; } = new List<ConditionFreeDetail> { };

        /////<summary>
        /////计费方法 默认运费,指定地区运费等
        /////</summary>
        //public string all_freight_calc_method_json { get; set; }

        /////<summary>
        /////计费方法 默认运费,指定地区运费等
        /////</summary>
        //[PasteDirectsun]
        //public AllFreightCalcMethod all_freight_calc_method { get; set; } = new AllFreightCalcMethod();

        /// <summary>
        /// 计费方法
        /// </summary>
        [PasteDirectsun]
        [PasteHidden]
        public List<FreightCalcMethod> freight_calc_method_list { get; set; } = new List<FreightCalcMethod> { };

        /////<summary>
        /////不发货区域
        /////</summary>
        //public string not_send_area_json { get; set; }

        ///<summary>
        ///
        ///</summary>
        [PasteGroupItem("g_no_area", "不发货地区", false)]
        [PasteSunform("../area/index.html?datainfo=address_infos",420)]
        public List<AddressShort> not_send_area { get; set; }
    }

上面用到了几个特性,简单介绍下,如果你要了解具体的特性用法,可以查阅PasteForm的操作文档
PasteForm文档
应该说是说明文档比较贴切

lselect

这个是select的变种,以横向模式展示可选项,支持单选和多选模式,选中的为蓝色粗体模式

changeui

这个是最近添加的特性,表示基于当前字段的最新值,进行UI的显示隐藏操作,目前只支持在select或者lselect后面执行
选择条件包邮后的UI变动就是这个特性生效的!

directsun

表示的是以对象模式读取当前对象,一般用于非基础数据类型,比如上面的

        /// <summary>
        /// 计费方法
        /// </summary>
        [PasteDirectsun]
        [PasteHidden]
        public List<FreightCalcMethod> freight_calc_method_list { get; set; } = new List<FreightCalcMethod> { new FreightCalcMethod { } };

上面是一个集合List,所以在UI中会以组别形式呈现,还支持+和删除操作,注意初始化的时候要new一项,不然UI中没有数据的!
非List也是支持的,比如

        /// <summary>
        /// 计费方法
        /// </summary>
        [PasteDirectsun]
        public FreightCalcMethod freight_calc_method_list { get; set; }

sunform

这个就很有意思了,表示以iframe的形式载入一个页面,这个页面要实现一个函数

/**
 * 提交表单 提交表单的数据,最好前面加一层转化啥的
 **/
function funcSubmitForm() {
    //把当前页面的内容读取成obj或者array,具体看需求
}

这样就可以实现有些特别复杂的直接写一个个性化的页面来实现!

问题

目前遇到一个问题,看上面的,如果某一个UI中的字段等没有被显示,而特性又标记required的时候,这个时候肯定有问题的,因为提交的时候会被阻断了!(因为必填你没填)

首先使用:hidden(判断元素是否显示)是不行的,因为组别的展开和收缩也是这个

还有一个是表单项有层级关系的,比如组隐藏了,就包含他里面的所有表单项了

这个问题我估计会使用class的名称来判定,如果是多级套的问题,其实class也有问题的。。。

如果你有好的建议欢迎留言,我会很开心看到你的建议的

下期见

评论列表
尘埃
3 27 0
快捷注册
热门推荐更多
PasteBuilder
;
最新动态
  • 144.****.110 正在查看 PasteForm中是如何处理Enum枚举类型的? !
  • 144.****.110 正在查看 PasteForm中是如何处理Enum枚举类型的? !
  • 191.****.16 正在查看 PasteSpiderV5在WindowsServer中以Service的方式运行 !
  • 191.****.16 正在查看 PasteSpiderV5在WindowsServer中以Service的方式运行 !
  • 94.****.202 正在查看 PasteSpider升级服务器上的一个服务或集群服务 !
  • 94.****.202 正在查看 PasteSpider升级服务器上的一个服务或集群服务 !
  • 124.****.177 正在查看 PasteSpider之占位符,宏,对象属性遍历的说明 !
  • 124.****.177 正在查看 PasteSpider之占位符,宏,对象属性遍历的说明 !
  • 75.****.154 正在查看 在centos7中安装docker !
  • 75.****.154 正在查看 在centos7中安装docker !
  • 62.****.48 正在查看 框架PasteForm实际开发案例,支持多级对象的表单看看有多简单只要几个特性即可!(1) !
欢迎加入QQ讨论群 296245685 [PasteSpider]介绍 [PasteForm]介绍 @2022-2023 PasteCode.cn 版权所有 ICP证 闽ICP备2021013869号-2