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 ...
随机推荐
- Aoite 系列(01) - 比 Dapper 更好用的 ORM
Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Data 适用于市面上大多数的数据库提供程序,通过统一封装,可以在日常开发中简单便捷的操作数 ...
- 客户端GUI程序开发漫谈
这篇文章包含了这个领域的很多开源项目的介绍,还有我多年来的心血和汗水 去年夏天的时候,我用QT做了一个小工具 后来还用QT做了流程设计器 我把程序分享给飞扬青云之后,他甚至搞出来一套QT的皮肤来 说 ...
- [译]最长回文子串(Longest Palindromic Substring) Part I
[译]最长回文子串(Longest Palindromic Substring) Part I 英文原文链接在(http://leetcode.com/2011/11/longest-palindro ...
- git rm–r folder fatal:pathspec "" did not match any files
问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...
- SQL-geography && Spatial result
说起geography(地理)这个类型,我感觉好陌生,以前真的没有见过,今天在查询某个Address表的时候,却发现了新大陆——Spatial result(空间的结果). (1)表的结构 (2)查询 ...
- 我心中的核心组件（可插拔的AOP）~第六回 消息组件~续
回到目录 上一回写消息组件已经是很久之前的事了,这一次准备把消息组件后续的东西说一下,事实上,第一篇文章主要讲的是发消息,而这一讲最要讲的是收消息,简单的说,就是消息到了服务器之后,如何从服务器实时的 ...
- 大叔也说Xamarin~Android篇~调用远程API接口，发POST请求
回到目录 Xamarin我们在上节已经教大家如何去部署它的环境了,今天来说一个实际的例子,使用android客户调用.net web api的一个接口,并发送POST请求,当服务端回到请求后做出响应, ...
- 锋利的JQuery —— DOM操作
图片猛戳链接
- Atitti.数字证书体系cer pfx attilax总结
Atitti.数字证书体系cer pfx attilax总结 一.数字证书常见标准 1 数字证书文件格式(cer和pfx)的区别: 1 二.数字证书存储内容 2 X.509是一种非常通用的证书格式. ...
- @SuppressWarnings忽略警告
简介:java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告, ...