JS框架avalon简单例子行编辑添加修改删除验证-CSDN博客

为什么要写这个例子：做表单的时候，表单包含主子表，对于子表的编辑，使用的是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>

View Code

效果图：

版本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>