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

moy是什么？

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

step 4. 实现grid数据新增

添加新增按钮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>

```

同时，在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 } }

继续在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 ...

} ```

​

需要配置新增弹出页面，在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>

```

再往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数据编辑和删除

请期待下一篇。

(完)