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 ...
随机推荐
- 设计模式之美：Extension Object（扩展对象）
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):使用示例结构实现 Extension Object. 实现方式(二):使用泛型实现 IExtensibleObject<T ...
- 价值1400美元的CEH（道德黑客）认证培训课程长啥样？（3）工具集
美元的CEH(道德黑客)认证培训课程长啥样?(3)工具集 这是我收到的CEH官方发来的邮件,参加CEH认证培训原价为1424.25刀,可以给我便宜到1282刀.只有一个感觉,心在流血.站在这价值120 ...
- 招聘：有兴趣做一个与Android对等的操作系统么？
招聘:有兴趣做一个与Android对等的操作系统么? 前不久我发了一篇<八一八招聘的那些事儿>讲了我自己作为求职者对招聘的一些看法.那个时候我还在求职,对求职的结果还是挺满意的,五家公司面 ...
- Hello Mybatis 04 使用spring-mybatis
顺着上一篇,这里介绍下spring-mybatis的配置. 我们使用mybatis去操作数据库的时候,每次都要不停地openSession,closeSession好烦躁哇--这样工作哪里有效率可言! ...
- C#中使用反射获取结构体实例
一般用反射获取类对象的实例比较简单,只要类有一个无参构造函数或没有显示声明带参的构造函数即可使用如下代码 static void Main(string[] args) { Type type = t ...
- 30分钟带你快速入门MySQL教程
这是一篇真正适合初学者的MySQL数据库入门文章,哪怕你从来没有接触过数据库,或者说你从来没有听说过有数据库这东西,请一定要相信我,我当时就是这么过来的. 如果你刚开始接触MySQL数据库,或者你需要 ...
- PsySH：PHP交互运行环境
是什么 我们经常会在命令行用到诸如mysql.python等命令,特点是一旦输入后,会进入命令本身的交互运行环境.示例: [root@iZ25vs3mckhZ ~]# python Python 2. ...
- mybatis插入的同时获取主键id
<insert id="insertAndReturnId" parameterType="com.qianlong.cms.entity.AppCmsRole&q ...
- settimeout里面函数有无双引号的区别
在写定时器时很容易搞混,所以记下防止忘记. 双引号中的作用域不捕捉局部变量,不用双引号包着的是捕捉局部作用域 var a = function() { alert(1111) } function a ...
- 绘制圆动画--重写view
/** * @FileName CircleProgressBar.java * @Package com.read.view * @Description TODO * @Author Alpha ...