使用moy快速开发后台管理系统（四）

moy是什么？

moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架，是前端集成解决方案，为企业级应用开发而生。
github地址：https://github.com/iuap-design/tinper-moy

step 4. 实现grid数据新增

1. 添加新增按钮ui部分：进入pages/cardtable/cardtable.html中，加入新增按钮部分的代码到相应位置，并且在data-bind属性中绑定点击事件addClick方法：

```html

系统管理

    <!-- 新增按钮 begin -->
   <div class="common-header-2">
       <div class="pull-left">
           <button class="u-button u-button-info "
                    data-bind="click: event.addClick" tabindex="-1">新增
           </button>
       </div>
   </div>
    <!-- 新增按钮 end -->
   <div class="main-container cartable-container">
       ...
   </div>

```

1. 同时，在pages/cardtable/cardtable.js中的viewModel.event中添加addClick方法

javascript var viewModel = { ... event: { ... //addClick代码 begin addClick: function() { $('#editPage').find('.u-msg-title').html("新增"); viewModel.event.clearDt(viewModel.dtnew); var newr = viewModel.dtnew.createEmptyRow(); newr.setValue("radiodatacontroller", "Y"); newr.setValue("radiodataassociate", "Y"); viewModel.dtnew.setRowSelect(newr); $('#code').removeAttr("readOnly"); window.md = u.dialog({ id: 'addDialog', content: '#editPage', hasCloseMenu: true }); $('#addDialog').css('width', '70%'); } //addClick代码 end } }

1. 继续在js中的viewModel对象中加入dtnew属性代码

```javascript
var viewModel = {
app: {},
draw: 1,
totlePage: 0,
pageSize: 5,
totleCount: 0,
dt1: new u.DataTable(metaCardTable),

 //dtnew属性代码 begin
 dtnew: new u.DataTable(metaCardTable),//新增时候的DataTable
 //dtnew属性代码 end
 
 ...

}
```

​

1. 需要配置新增弹出页面，在pages/cardtable/cardtable.html中加入弹出页面代码，并且在页面的取消和确定按钮中相应增加了点击事件，分别是saveCancelClick和saveOkClick

```html

...

新增

系统编码:

系统名称:

网关地址:

认证模式:

   <!--第三行-->
   <div class=" system-row u-row margin-top-35">
     <div class="u-col-2">
       <label class="u-input-label right">需要授权: </label>
     </div>
     <div class="u-col-4" 
          u-meta='{"id":"underController","type":"u-radio","data":"dtnew","field":"radiodatacontroller","renderType":"radioRender","datasource":"radiodatacontroller"}'>
       <div>
         <label class="u-radio"> <input type="radio" class="u-radio-button" name="radiodatacontroller"> <span
                                                                                                              class="u-radio-label"></span>
         </label>
       </div>
     </div>
   </div>

   <!--第四行-->
   <div class=" system-row u-row margin-top-35">
     <div class="u-col-2">
       <label class="u-input-label right">自行关联: </label>
     </div>
     <div class="u-col-4" 
          u-meta='{"id":"userAssociate","type":"u-radio","data":"dtnew","field":"radiodataassociate","renderType":"radioRender","datasource":"radiodataassociate"}'>
       <div>
         <label class="u-radio"> <input type="radio"
                                        class="u-radio-button" name="radiodataassociate"> <span
                                                                                                class="u-radio-label"></span>
         </label>
       </div>
     </div>
   </div>
 </div>
 <div class=" u-msg-footer ">
   <div class="pull-right">
     <button type="button" class="u-button u-button-white editCancel margin-right-15 "
              data-bind="click: event.saveCancelClick">取消
     </button>
     <button type="button"
             class="u-button raised u-button-primary margin-right-10" 
             data-bind="click: event.saveOkClick">保存
     </button>

   </div>
 </div>

```

1. 再往pages/cardtable/cardtable.js中的viewModel.event中添加saveOkClick和saveCancelClick方法

javascript var viewModel = { ... event: { ... //点击事件代码 begin saveOkClick: function() { var index = viewModel.index; var data = viewModel.dtnew.getSimpleData()[viewModel.dtnew.getSelectedIndexs()]; if (!viewModel.app.compsValidate($('#editPage')[0])) { return; } //如果是readonly就是编辑，否则就是新增 if($('#code').attr("readonly")=="readonly"){ viewModel.dt1.getRowByRowId(index).setSimpleData(data) }else { viewModel.dt1.addSimpleData(data); } md.close(); }, saveCancelClick: function(e) { md.close(); } //点击事件代码 end } }

到此，新增功能完毕，刷新下页面，试试自己的杰作吧！

---

到这里，我们已经完成了前面的准备工作，后面我会开始写如何实现grid数据编辑和删除

请期待下一篇。

(完)