为什么要写这个例子：做表单的时候，表单包含主子表，对于子表的编辑，使用的是easyui datagrid的行编辑功能，由于业务比较复杂，实现起来比较麻烦，代码写的也很多，因为插件的封装，无法操作原始的html标签，一些功能不知如何实现，所以想到了avalon，希望对于行编辑的功能，能找到更好的解决方案。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>avalon 例子</title>
  6.     <script type="text/javascript" src="avalon.js"></script>
  7.     <style type="text/css">
  8.         body
  9.         {
  10.             font-size: 12px;
  11.         }
  12.  
  13.         table td
  14.         {
  15.             padding: 3px;
  16.             border: solid 1px #ddd;
  17.             height: 30px;
  18.         }
  19.  
  20.         .selected
  21.         {
  22.             background-color: #ddd;
  23.         }
  24.  
  25.         .hide
  26.         {
  27.             display: none;
  28.         }
  29.     </style>
  30.     <script>
  31.         var model = avalon.define({
  32.             $id: "test",
  33.             array: [
  34.             ],
  35.             blur: function (el) {
  36.                 el.selected = false
  37.  
  38.                 model.valid(el.code.rules, el);
  39.             },
  40.             focus: function (el) {
  41.                 el.selected = true
  42.             },
  43.             add: function () {
  44.                 model.array.push({
  45.                     name: "",
  46.                     code: {
  47.                         value: "",
  48.                         valid: true,
  49.                         msg: "",
  50.                         rules: [{
  51.                             rule: /^[+-]?\d*\.?\d+$/,
  52.                             msg: "请填写数字",
  53.                             valid: true
  54.                         }, {
  55.                             rule: /^(.|\n){,}$/,
  56.                             msg: "长度不能大于5",
  57.                             valid: true
  58.                         }]
  59.                     },
  60.                     selected: false
  61.                 });
  62.             },
  63.             valid: function (rules, el) {
  64.                 var bl = true;
  65.                 el.code.valid = true;
  66.                 el.code.msg = "";
  67.                 for (var i = ; i < rules.length; i++) {
  68.                     var reg = new RegExp(rules[i].rule);
  69.                     if (el.code.value != "" && !reg.test(el.code.value)) {
  70.                         bl = false;
  71.                         el.code.valid = false;
  72.                         el.code.rules[i].valid = false;
  73.                         el.code.msg += el.code.rules[i].msg + "；";
  74.                     }
  75.                 }
  76.                 return bl;
  77.             }
  78.         });
  79.     </script>
  80. </head>
  81. <body style="background-color: #fff;">
  82.     <div ms-controller="test">
  83.         <input type="button" value="添加" ms-click="add" />
  84.         <br />
  85.         <br />
  86.         <table cellpadding="" cellspacing="" style="border-collapse: collapse;">
  87.             <thead>
  88.                 <tr>
  89.                     <td style="width: 180px;">名称
  90.                     </td>
  91.                     <td style="width: 350px;">编号
  92.                     </td>
  93.                     <td style="width: 40px;">操作
  94.                     </td>
  95.                     <td style="width: 200px;">输入结果
  96.                     </td>
  97.                 </tr>
  98.             </thead>
  99.             <tbody ms-repeat-el="array">
  100.                 <tr ms-class="selected:el.selected">
  101.                     <td>
  102.                         <input type="text" ms-duplex="el.name" ms-blur="blur(el)" ms-focus="focus(el)" />
  103.                     </td>
  104.                     <td>
  105.                         <input type="text" ms-duplex="el.code.value" ms-blur="blur(el)" ms-focus="focus(el)" />
  106.                         <span ms-class="hide:el.code.valid" style="color: red; font-size: 12px;">{{el.code.msg}}</span>
  107.                     </td>
  108.                     <td>
  109.                         <a href="javascript:void(0)" ms-click="$remove">删除</a>
  110.                     </td>
  111.                     <td>{{el.name?el.name+"："+el.code.value:""}}
  112.                     </td>
  113.                 </tr>
  114.             </tbody>
  115.         </table>
  116.     </div>
  117. </body>
  118. </html>

效果图：

版本2代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>avalon 例子</title>
  6.     <script type="text/javascript" src="avalon.js"></script>
  7.     <style type="text/css">
  8.         body
  9.         {
  10.             font-size: 12px;
  11.         }
  12.  
  13.         table td
  14.         {
  15.             padding: 3px;
  16.             border: solid 1px #ddd;
  17.             height: 30px;
  18.         }
  19.  
  20.         .selected
  21.         {
  22.             background-color: #ddd;
  23.         }
  24.  
  25.         .hide
  26.         {
  27.             display: none;
  28.         }
  29.     </style>
  30.     <script>
  31.         var items = ["name", "code"];
  32.         var model = avalon.define({
  33.             $id: "test",
  34.             array: [
  35.             ],
  36.             trclick: function (el) {
  37.                 if (!el.selected) {
  38.                     if (validModel(items, model)) el.selected = true;
  39.                 }
  40.             },
  41.             add: function () {
  42.                 if (validModel(items, model)) {
  43.                     model.array.push({
  44.                         name: {
  45.                             value: "",
  46.                             valid: true,
  47.                             msg: "",
  48.                             rules: [{
  49.                                 rule: "notnull"
  50.                             }, {
  51.                                 rule: /^(.|\n){,}$/,
  52.                                 msg: "长度不能大于5",
  53.                                 valid: true
  54.                             }]
  55.                         },
  56.                         code: {
  57.                             value: "",
  58.                             valid: true,
  59.                             msg: "",
  60.                             rules: [{
  61.                                 rule: "notnull"
  62.                             }, {
  63.                                 rule: /^[+-]?\d*\.?\d+$/,
  64.                                 msg: "请填写数字",
  65.                                 valid: true
  66.                             }, {
  67.                                 rule: /^(.|\n){,}$/,
  68.                                 msg: "长度不能大于5",
  69.                                 valid: true
  70.                             }]
  71.                         },
  72.                         selected: true
  73.                     });
  74.                 }
  75.             }
  76.         });
  77.     </script>
  78.     <script>
  79.         //验证
  80.         function valid(items, el) {
  81.             var bl = true;
  82.             for (var k = ; k < items.length; k++) {
  83.                 var item = el[items[k]];
  84.                 item.valid = true;
  85.                 item.msg = "";
  86.                 for (var i = ; i < item.rules.length; i++) {
  87.                     if (item.rules[i].rule == "notnull") {
  88.                         if (item.value == "") {
  89.                             bl = false;
  90.                             item.valid = false;
  91.                             item.msg += "必填；";
  92.                         }
  93.                     }
  94.                     else {
  95.                         var reg = new RegExp(item.rules[i].rule);
  96.                         if (item.value != "" && !reg.test(item.value)) {
  97.                             bl = false;
  98.                             item.valid = false;
  99.                             item.rules[i].valid = false;
  100.                             item.msg += item.rules[i].msg + "；";
  101.                         }
  102.                     }
  103.                 }
  104.             }
  105.             return bl;
  106.         }
  107.  
  108.         //验证
  109.         function validModel(items, model) {
  110.             var bl = true;
  111.             for (var i = ; i < model.array.length; i++) {
  112.                 if (model.array[i].selected) {
  113.                     bl = valid(items, model.array[i]);
  114.                     if (bl) {
  115.                         model.array[i].selected = false;
  116.                     }
  117.                 }
  118.             }
  119.             return bl;
  120.         }
  121.     </script>
  122. </head>
  123. <body style="background-color: #fff;">
  124.     <div ms-controller="test">
  125.         <input type="button" value="添加" ms-click="add" />
  126.         <br />
  127.         <br />
  128.         <table cellpadding="" cellspacing="" style="border-collapse: collapse;">
  129.             <thead>
  130.                 <tr>
  131.                     <td style="width: 350px;">名称
  132.                     </td>
  133.                     <td style="width: 350px;">编号
  134.                     </td>
  135.                     <td style="width: 40px;">操作
  136.                     </td>
  137.                     <td style="width: 200px;">输入结果
  138.                     </td>
  139.                 </tr>
  140.             </thead>
  141.             <tbody ms-repeat-el="array">
  142.                 <tr ms-class="selected:el.selected" ms-if="el.selected" ms-click="trclick(el)">
  143.                     <td>
  144.                         <input type="text" ms-duplex="el.name.value" />
  145.                         <span ms-class="hide:el.name.valid" style="color: red; font-size: 12px;">{{el.name.msg}}</span>
  146.                     </td>
  147.                     <td>
  148.                         <input type="text" ms-duplex="el.code.value" />
  149.                         <span ms-class="hide:el.code.valid" style="color: red; font-size: 12px;">{{el.code.msg}}</span>
  150.                     </td>
  151.                     <td>
  152.                         <a href="javascript:void(0)" ms-click="$remove">删除</a>
  153.                     </td>
  154.                     <td>{{el.name?el.name.value+"："+el.code.value:""}}
  155.                     </td>
  156.                 </tr>
  157.                 <tr ms-class="selected:el.selected" ms-if="!el.selected" ms-click="trclick(el)">
  158.                     <td>{{el.name.value}}
  159.                     </td>
  160.                     <td>{{el.code.value}}
  161.                     </td>
  162.                     <td>
  163.                         <a href="javascript:void(0)" ms-click="$remove">删除</a>
  164.                     </td>
  165.                     <td>{{el.name?el.name.value+"："+el.code.value:""}}
  166.                     </td>
  167.                 </tr>
  168.             </tbody>
  169.         </table>
  170.     </div>
  171. </body>
  172. </html>

效果图：

JS框架avalon简单例子 行编辑 添加 修改 删除 验证的更多相关文章

  1. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  2. JavaWeb_day03_员工信息添加修改删除

    day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...

  3. SpringBoot定时任务升级篇（动态添加修改删除定时任务）

    需求缘起:在发布了<Spring Boot定时任务升级篇>之后得到不少反馈,其中有一个反馈就是如何动态添加修改删除定时任务?那么我们一起看看具体怎么实现,先看下本节大纲: (1)思路说明: ...

  4. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  5. 【转】C#添加修改删除文件文件夹大全

    [转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...

  6. JS实现 类的 1.判断 2.添加 3.删除 4切换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Jquery Validate表单验证，动态添加和删除验证规则

    最近一直在忙着维护Jquery的商城,用到了Validate的表单验证,觉得很有意思,就纪录一下. // 动态添加验证规则 $("#invoice_send_region_id") ...

  8. ASP.NET JS调用WebService——简单例子

    一.创建好WebService 二.编辑页面与js 三. 运行页面并点击按钮,结果如下 简单调用吧!

  9. WPF框架MVVM简单例子

    MVVM是Model-View-ViewModel的缩写形式,它通常被用于WPF或Silverlight开发.Model——可以理解为带有字段,属性的类.View——可以理解为我们所看到的UI.Vie ...

随机推荐

  1. js模版引擎handlebars.js实用教程——if-判断的基本用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  2. django开发个人简易Blog——数据模型

    提到数据模型,一定要说一下MVC,MVC框架是现代web开发中最流行的开发框架,它将数据与业务逻辑分开,减小了应用之间的高度耦合.个人非常喜欢MVC开发框架,除了具有上述特性,它使得web开发变得非常 ...

  3. Senparc.Weixin.MP SDK 微信公众平台开发教程（十二）：OAuth2.0说明

    紧接上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明>,这里专讲OAuth2.0. 理解OAuth2.0 首先我们通过一张图片来了解一下OAu ...

  4. Mysql日常开发注意要点

    1.MySQL存储引擎介绍 MyISAM:低版本MySQL默认的MySQL插件式存储引擎,存储文件易损坏,不支持事务.InnoDB:目前默认的MySQL存储引擎,用于事务处理应用程序,具有众多特性,包 ...

  5. try catch 与 throw拾遗

    今天在微软虚拟学院看到的代码: var b = 0; try{ if (b == 0) { throw('NO NO!!'); } else { alert('OK OK'); }} catch(e) ...

  6. lua如何构造类

    function class(super, autoConstructSuper) local classType = {}; classType.autoConstructSuper = autoC ...

  7. Atitit 图像处理知识点  知识体系 知识图谱v2

    Atitit 图像处理知识点  知识体系 知识图谱v2 霍夫变换(Hough Transform) 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.主要用来从图像 ...

  8. 从双十一战报看传统大家电如何O2O转型？

    说到大家电电商,大家都会想起天猫.京东.苏宁易购.国美在线等各大电商平台,他们这一次的双十一又实现了较大规模的增长,而各大电商平台家电辉煌战绩的背后实际上是各大品牌家电的成功. 格力今年双十一当天创下 ...

  9. javaweb回顾第十一篇过滤器（附实现中文乱码问题）

    1:过滤器概念 过滤器就是一种在请求目标资源的中间组件,比喻把污水转换成纯净水中间需要一个污水净化设备,那么这个设备就好比一个过滤器.那么我用图来表示过滤器(可以有多个过滤器)运行的过程 2:Filt ...

  10. hibernate(八) Hibernate检索策略(类级别，关联级别，批量检索)详解

    序言 很多看起来很难的东西其实并不难,关键是看自己是否花费了时间和精力去看,如果一个东西你能看得懂,同样的,别人也能看得懂,体现不出和别人的差距,所以当你觉得自己看了很多书或者学了很多东西的时候,你要 ...