你的位置:首页 > Java教程

[Java教程]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>

View Code

    效果图: