专栏首页更流畅、简洁的软件开发方式【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

  我们在做增删改查的时候,必可避免的要做表单,那么表单是怎么弄出来的呢?拖拽控件、手写、js创建还是第三方控件(包括js版)? 以前用服务器控件写了一套表单控件,用起来感觉也挺方便的,只是效率太低,太占用服务器的资源。想了好久也没想到如何提高效率,最后改成了纯js版的。

  js属于初学,代码还很简陋,大家见笑了。现在是越学习js,越是感到js的强大!

需求、目的: 1、 在前台网页,使用js自动创建表单 2、 可以控制表单里的控件类型,比如文本框、下拉列表框、在线编辑器等。 3、 可以获取用户输入的数据,可以进行验证 4、 可以进行排版 5、 修改数据时,可以把原有数据绑定到表单。 实现方式: 1、 js + json + 第三方js脚本、控件 2、 json对表单进行描述,比如标题、控件类型、控件大小、下拉列表框的item如何填充等。 3、 第三方脚本实现复杂功能,比如选择日期、在线编辑、数据验证等。 4、 Js脚本根据json的描述,创建表单(table形式),创建表单里面的控件(比如文本框),然后对表单和控件进行修饰。 5、 提取用户输入的数据,然后进行验证。然后可以用ajax的方式提交给服务器。(提交部分表单控件不负责)。 思路: 1、 对表单进行归纳总结,抽象出来几种情况。比如有多少种控件、表格有几种表现形式。 其他的还没想好怎么表达出来。

使用方式: 使用就很简单了,因为俺比较懒,所以我做的东东,第一目标就是——用着省事。 1、 引用一堆js,其中自己的只有两个,一个创建控件,一个创建表单,还有一个验证数据。

2、 写一段“引导”脚本。这个基本是c#风格,当然也可以写成js风格。看个人喜好了。

        var Nature = {};
        Nature.Controls = {};
        
        var form;   //表单控件
        
        function create() {
            $("#divForm").html("");
            //创建表单
            var formEvent = {
                divID: "divForm",
                callback: formCallback   //回调函数
            };
            form = new Nature.Controls.Form(formEvent);
            form.create();

            $("#divButton").show();

        }
        
        function formCallback(formState) {
            switch (formState) {
            case 401:
                //查看
                 
                break;
            case 402:
                //添加
                 
                break;
            case 403:
            case 408:
                //修改
              
                break;

            }
            
        }

        //获取用户输入的信息
        function getValue() {
            //验证数据
            var re = checkData();

            if (!re) {
                return;
            }
            
            //获取用户输入的信息,json格式,然后可以ajax提交到数据库
            var value = form.getValue("dataForm");
           
            //下面仅在演示时用,显示用户输入了啥。
            var meta = eval("(" + $("#json").val() + ")");
            var controlInfo = meta.controlInfo;
            
            var re = "";
            for (var key in value) {
                var id = key.substring(1, key.length);
                re += controlInfo[id].ColName + ":   \t" + value[key] + "\n";
            }

            $("#msg").val(re);
        }

        function checkData() {
            //自带的验证功能。
            var re = CheckForm();

            if (re == true) {
                //验证通过,查看是否有自定义的js文件的验证
                if (typeof (cuscheck) != "undefined") {
                    //有自定义的验证,执行
                    re = cuscheck();
                }
            }
            return re;
        }

问与答: 问:为啥重复制造轮子? 答:搜索了一下js表单控件,没有发现特出名的。当然了肯定有做好的,只是我没有发现。再有也不是完全自己写的,有很多第三方现成的js拿来用的,比如my97。 问:写这个json也太复杂了,还不如自己做个表单方便。 答:这个json确实挺复杂的,但是他不是手动写出来的,而是自动生成的。原理类似于代码生成器。所以用起来还是挺方便的。 问:一个页面能放几个表单控件? 答:大于等于一个。因为是new出来的,所以每个表单控件都可以互补干扰。只要属性没有设置错误就可以区分开。

问:还有其他的功能吗? 答:当然还有其他的功能,比如设置文本框 只读(readonly),设置默认值,设置帮助信息,表单布局等,这些都可以通过修改json的属性值来实现。

问:json的结构到底是啥样的? 答:这个可以看在线演示,还可以修改值来看看变化。

附:第三方js 1、 jQuery。这个就不多说了。 2、 my97。选择日期的,很好很强大 3、 kindereditor。选择他是因为可以直接在页面里使用。因为是纯js的表单控件,所以服务器控件形式的在线编辑器是不好用了。 4、 数据验证。这个好像有很多已经很成熟的了,只是一直没时间研究。目前用的是一个比较古老的js脚本,出处已经不记得了。

在线演示:

js版的表单控件 :http://www.naturefw.com/demo/jsform.htm  (下面是一个iframe。好像有缓存。)

不知道大家是怎么处理表单的,有兴趣的话,欢迎一起聊聊!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【自然框架】表单控件 之 一个表单修改多个表里的记录

          FormView 确实挺方便的,不过他也有几个小问题,只把FormView拖到页面里是不行的,还得再拽几个文本框、下拉列表框这一类的控件,还得布局。...

    用户1174620
  • 【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能

        myPage分页控件发出来之后,虽然开源了,但是没有给一个简单一点的 demo,真是漏掉了一个很重要的部分。     先说明一下使用myPage分页...

    用户1174620
  • .net firamework 框架里面的控件的继承关系。

         记得当初学习VB6.0的时候,入门的书,一上来就是控件的介绍,控件的属性、事件的使用,拖拽一个文本框、一个按钮,然后再双击按钮,在按钮的事件里面给文本...

    用户1174620
  • 腾讯云无缝切换服务器

    神无月
  • VisualItemModel在子Item使用index的问题

    VisualItemModel与ListView的delegate的自动index使用有所不同。

    Qt君
  • Bufbomb缓冲区溢出攻击实验详解-CSAPP

    zhwhong
  • 假设检验的例子

    在假设检验的时候,你只能根据手头已有的证据做出决策,数据来源于样本,如果样本有偏,那么就会根据有偏数据做出错误的决策。

    小末快跑
  • 用社群思维和大数据,透视90后的群体特性

    最近热播的大型纪录片《互联网时代》中,《长尾理论》作者克里斯·安德森说了一段话:“20世纪的合作模式是企业模式,企业雇佣雇员,人们在同一个屋檐下,为了某个大目标...

    机器学习AI算法工程
  • 洞察|90后旅行大数据:字斟句酌求点赞,说走就走仅占9%

    以滴滴大数据在北京的抽样为例,到2月20日,有约17%的春节前返乡人口留在家乡或去往别的城市,与上广深三地相比,由北京迁往其他一线城市的人群占比较高,以杭州为代...

    灯塔大数据
  • 95后基本不用微信,90后研究报告!

    195后基本不用微信,98%的微信用户是都是成年人。而QQ社群中,10-29岁的用户占比达到80%。

    华章科技

扫码关注云+社区

领取腾讯云代金券