为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是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简单例子 行编辑 添加 修改 删除 验证的更多相关文章

  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. nodejs获取客户端IP Address

    在网上看见很多问node.js如何获取客户端IP,所以记录下来,以供大家参考. function getClientIp(req) { return req.headers['x-forwarded- ...

  2. [.net 面向对象程序设计进阶] (5) Lamda表达式(一) 创建委托

    [.net 面向对象程序设计进阶] (5) Lamda表达式(一)  创建委托 本节导读: 通过学习Lambda表达式,学会创建委托和表达式目录树,深入了解Lambda的特性,让你的代码变的更加清晰. ...

  3. 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码

    本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 开源倾情奉献系列链接 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码 开源倾 ...

  4. 在js中对时间类型格式化字符串

    Date.prototype.toString = function (format) { if (format == null) { format = "yyyy-MM-dd HH:mm: ...

  5. C++ std::multiset

    std::multiset template < class T, // multiset::key_type/value_type class Compare = less<T>, ...

  6. Hibernate缓存(转)

    来自:http://www.cnblogs.com/wean/archive/2012/05/16/2502724.html 一.why(为什么要用Hibernate缓存?) Hibernate是一个 ...

  7. Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js

    Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js 1.1. 封装性是面象对象编程中的三大特性之一  三个基本的特性:封装.继承与多态1 1.2. 魔 ...

  8. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  9. Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

    简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...

  10. js 判断字符串是否包含另外一个字符串

    示例代码: <script type="text/javascript"> var str = "测试一个字符串(ehtrzes)是否包含另外一个字符串&qu ...