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){0,5}$/,
msg: "长度不能大于5",
valid: true
}]
},
selected: false
});
},
valid: function (rules, el) {
var bl = true;
el.code.valid = true;
el.code.msg = "";
for (var i = 0; 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="0" cellspacing="0" 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){0,5}$/,
msg: "长度不能大于5",
valid: true
}]
},
code: {
value: "",
valid: true,
msg: "",
rules: [{
rule: "notnull"
}, {
rule: /^[+-]?\d*\.?\d+$/,
msg: "请填写数字",
valid: true
}, {
rule: /^(.|\n){0,5}$/,
msg: "长度不能大于5",
valid: true
}]
},
selected: true
});
}
}
});
</script>
<script>
//验证
function valid(items, el) {
var bl = true;
for (var k = 0; k < items.length; k++) {
var item = el[items[k]];
item.valid = true;
item.msg = "";
for (var i = 0; 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 = 0; 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="0" cellspacing="0" 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>
效果图：
