JS框架avalon简单例子 行编辑 添加 修改 删除 验证
为什么要写这个例子：做表单的时候，表单包含主子表，对于子表的编辑，使用的是easyui datagrid的行编辑功能，由于业务比较复杂，实现起来比较麻烦，代码写的也很多，因为插件的封装，无法操作原始的html标签，一些功能不知如何实现，所以想到了avalon，希望对于行编辑的功能，能找到更好的解决方案。
代码：
<!DOCTYPE html>
<html> <head>
<title>avalon 例子</title>
<script type="text/javascript" src="avalon.js"></script>
<style type="text/css">
body
{
font-size: 12px;
} table td
{
padding: 3px;
border: solid 1px #ddd;
height: 30px;
} .selected
{
background-color: #ddd;
} .hide
{
display: none;
}
</style>
<script>
var model = avalon.define({
$id: "test",
array: [
],
blur: function (el) {
el.selected = false model.valid(el.code.rules, el);
},
focus: function (el) {
el.selected = true
},
add: function () {
model.array.push({
name: "",
code: {
value: "",
valid: true,
msg: "",
rules: [{
rule: /^[+-]?\d*\.?\d+$/,
msg: "请填写数字",
valid: true
}, {
rule: /^(.|\n){,}$/,
msg: "长度不能大于5",
valid: true
}]
},
selected: false
});
},
valid: function (rules, el) {
var bl = true;
el.code.valid = true;
el.code.msg = "";
for (var i = ; i < rules.length; i++) {
var reg = new RegExp(rules[i].rule);
if (el.code.value != "" && !reg.test(el.code.value)) {
bl = false;
el.code.valid = false;
el.code.rules[i].valid = false;
el.code.msg += el.code.rules[i].msg + "；";
}
}
return bl;
}
});
</script>
</head>
<body style="background-color: #fff;">
<div ms-controller="test">
<input type="button" value="添加" ms-click="add" />
<br />
<br />
<table cellpadding="" cellspacing="" style="border-collapse: collapse;">
<thead>
<tr>
<td style="width: 180px;">名称
</td>
<td style="width: 350px;">编号
</td>
<td style="width: 40px;">操作
</td>
<td style="width: 200px;">输入结果
</td>
</tr>
</thead>
<tbody ms-repeat-el="array">
<tr ms-class="selected:el.selected">
<td>
<input type="text" ms-duplex="el.name" ms-blur="blur(el)" ms-focus="focus(el)" />
</td>
<td>
<input type="text" ms-duplex="el.code.value" ms-blur="blur(el)" ms-focus="focus(el)" />
<span ms-class="hide:el.code.valid" style="color: red; font-size: 12px;">{{el.code.msg}}</span>
</td>
<td>
<a href="javascript:void(0)" ms-click="$remove">删除</a>
</td>
<td>{{el.name?el.name+"："+el.code.value:""}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果图：
版本2代码：
<!DOCTYPE html>
<html> <head>
<title>avalon 例子</title>
<script type="text/javascript" src="avalon.js"></script>
<style type="text/css">
body
{
font-size: 12px;
} table td
{
padding: 3px;
border: solid 1px #ddd;
height: 30px;
} .selected
{
background-color: #ddd;
} .hide
{
display: none;
}
</style>
<script>
var items = ["name", "code"];
var model = avalon.define({
$id: "test",
array: [
],
trclick: function (el) {
if (!el.selected) {
if (validModel(items, model)) el.selected = true;
}
},
add: function () {
if (validModel(items, model)) {
model.array.push({
name: {
value: "",
valid: true,
msg: "",
rules: [{
rule: "notnull"
}, {
rule: /^(.|\n){,}$/,
msg: "长度不能大于5",
valid: true
}]
},
code: {
value: "",
valid: true,
msg: "",
rules: [{
rule: "notnull"
}, {
rule: /^[+-]?\d*\.?\d+$/,
msg: "请填写数字",
valid: true
}, {
rule: /^(.|\n){,}$/,
msg: "长度不能大于5",
valid: true
}]
},
selected: true
});
}
}
});
</script>
<script>
//验证
function valid(items, el) {
var bl = true;
for (var k = ; k < items.length; k++) {
var item = el[items[k]];
item.valid = true;
item.msg = "";
for (var i = ; i < item.rules.length; i++) {
if (item.rules[i].rule == "notnull") {
if (item.value == "") {
bl = false;
item.valid = false;
item.msg += "必填；";
}
}
else {
var reg = new RegExp(item.rules[i].rule);
if (item.value != "" && !reg.test(item.value)) {
bl = false;
item.valid = false;
item.rules[i].valid = false;
item.msg += item.rules[i].msg + "；";
}
}
}
}
return bl;
} //验证
function validModel(items, model) {
var bl = true;
for (var i = ; i < model.array.length; i++) {
if (model.array[i].selected) {
bl = valid(items, model.array[i]);
if (bl) {
model.array[i].selected = false;
}
}
}
return bl;
}
</script>
</head>
<body style="background-color: #fff;">
<div ms-controller="test">
<input type="button" value="添加" ms-click="add" />
<br />
<br />
<table cellpadding="" cellspacing="" style="border-collapse: collapse;">
<thead>
<tr>
<td style="width: 350px;">名称
</td>
<td style="width: 350px;">编号
</td>
<td style="width: 40px;">操作
</td>
<td style="width: 200px;">输入结果
</td>
</tr>
</thead>
<tbody ms-repeat-el="array">
<tr ms-class="selected:el.selected" ms-if="el.selected" ms-click="trclick(el)">
<td>
<input type="text" ms-duplex="el.name.value" />
<span ms-class="hide:el.name.valid" style="color: red; font-size: 12px;">{{el.name.msg}}</span>
</td>
<td>
<input type="text" ms-duplex="el.code.value" />
<span ms-class="hide:el.code.valid" style="color: red; font-size: 12px;">{{el.code.msg}}</span>
</td>
<td>
<a href="javascript:void(0)" ms-click="$remove">删除</a>
</td>
<td>{{el.name?el.name.value+"："+el.code.value:""}}
</td>
</tr>
<tr ms-class="selected:el.selected" ms-if="!el.selected" ms-click="trclick(el)">
<td>{{el.name.value}}
</td>
<td>{{el.code.value}}
</td>
<td>
<a href="javascript:void(0)" ms-click="$remove">删除</a>
</td>
<td>{{el.name?el.name.value+"："+el.code.value:""}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果图：
JS框架avalon简单例子 行编辑 添加 修改 删除 验证的更多相关文章
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- JavaWeb_day03_员工信息添加修改删除
day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...
- SpringBoot定时任务升级篇（动态添加修改删除定时任务）
需求缘起:在发布了<Spring Boot定时任务升级篇>之后得到不少反馈,其中有一个反馈就是如何动态添加修改删除定时任务?那么我们一起看看具体怎么实现,先看下本节大纲: (1)思路说明: ...
- Web 1三级联动 下拉框 2添加修改删除 弹框
Web 三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- 【转】C#添加修改删除文件文件夹大全
[转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...
- JS实现 类的 1.判断 2.添加 3.删除 4切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery Validate表单验证，动态添加和删除验证规则
最近一直在忙着维护Jquery的商城,用到了Validate的表单验证,觉得很有意思,就纪录一下. // 动态添加验证规则 $("#invoice_send_region_id") ...
- ASP.NET JS调用WebService——简单例子
一.创建好WebService 二.编辑页面与js 三. 运行页面并点击按钮,结果如下 简单调用吧!
- WPF框架MVVM简单例子
MVVM是Model-View-ViewModel的缩写形式,它通常被用于WPF或Silverlight开发.Model——可以理解为带有字段,属性的类.View——可以理解为我们所看到的UI.Vie ...
随机推荐
- 【读书笔记】Html5游戏开发
一直对HMTL5做游戏饶有兴趣,而这本书刚好就是HTML5 2游戏初级入门的书.Demo简单注释详细,可以拿来练练手,一个星期左右就可以读完.若要追求酷炫高大上效果,这本书恐怕要让你失望了.但作为上手 ...
- FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能
前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接.使用Style样式定制图 ...
- JavaScript 常用功能总结
小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...
- Effective Java 创建和销毁对象
<Effective Java>阅读笔记,用适合自己理解的方式提炼该书内容.<Effective Java>是一本很实用的书,阅读方法应该是快速的领会,总结,然后应用.而非,一 ...
- Devexpress 等待窗体
加载窗体以及等待窗体 程序加载时,需要等待加载完成后在显示 窗体显示顺序 1. 给用户看的等待窗体 2. 加载完成后的主窗体 代码如下: 1. 等待窗体代码 #region using using S ...
- Redis学习笔记~Redis并发锁机制
回到目录 redis客户端驱动有很多,如ServiceStack.Redis,StackExchange.Redis等等,下面我使用ServiceStack.Redis为例,介绍一下在redis驱动中 ...
- NFC：Arduino、Android与PhoneGap近场通信
NFC:Arduino.Android与PhoneGap近场通信(第一本全面讲解NFC应用开发的技术著作移动智能设备近距离通信编程实战入门) [美]Tom Igoe(汤姆.伊戈),Don Colema ...
- 彻底理解跨域解决方案JSONP
什么是同源策略? 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页 ...
- Python中的字符串与字符编码
本节内容: 前言 相关概念 Python中的默认编码 Python2与Python3中对字符串的支持 字符编码转换 一.前言 Python中的字符编码是个老生常谈的话题,同行们都写过很多这方面的文章. ...
- stackView的隐藏与显示注意事项
1.想要通过变换stackView的y值来让stackView显现/隐藏,同时让其中的button能点击响应,得用topCons 2.导航栏的tinBar要设置为非透明状态