使用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方法：

   <div class="list-panel" id="manager">
       <h2>系统管理</h2>
     
     	<!-- 新增按钮 begin -->
       <div class="common-header-2">
           <div class="pull-left">
               <button class="u-button u-button-info "
                       id="addButton" data-bind="click: event.addClick" tabindex="-1">新增
               </button>
           </div>
       </div>
     	<!-- 新增按钮 end -->
       <div class="main-container cartable-container">
           ...
       </div>
   </div>
   

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

   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
     	}
   }
   

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

   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
     
     ...
   }
   

   ​

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

   <!--原有代码请勿拷贝-->
   <div class="list-panel" id="manager">
       ...
   </div>
   <!--新增弹出的页面 begin-->
   <div id="editPage" style="background: #fff; display: none;">
     <div class="u-msg-title">新增</div>
     <div class="u-msg-content " id="edit2">
       <!--第一行-->
       <div class=" u-row ">
         <div class="u-col-2 ">
           <label for="code" class="u-input-label right">系统编码:</label>
         </div>
         <div class="u-col-4 ">
           <div class="u-input-group-before padding-left-10 "
                style="color: red;">*
           </div>
           <input type="text" id="code"
                  class="u-form-control padding-left-15"
                  u-meta='{"type":"string","data":"dtnew","field":"code"}'
                  placeholder="系统编码不能为空">
         </div>
         <div class="u-col-2 right-col">
           <label class="u-input-label right">系统名称:</label>
         </div>
         <div class="u-col-4 ">
           <div class="u-input-group-before padding-left-10 "
                style="color: red;">*
           </div>
           <input type="text" id="name"
                  class="u-form-control padding-left-15"
                  u-meta='{"type":"string","data":"dtnew","field":"name"}'
                  placeholder="系统名称不能为空">
         </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 ">
           <input type="text" id="gateway" class="u-form-control"
                  u-meta='{"id":"gateway","type":"string","data":"dtnew","field":"gateway"}'
                  placeholder="网关地址">
         </div>
         <div class="u-col-2 right-col ">
           <label class="u-input-label right">认证模式:</label>
         </div>
         <div id="model" class="u-col-4 u-combo u-label-floating"
              u-meta='{"id":"model","type":"u-combobox","data":"dtnew","field":"combodatamodel","renderType":"comboRender","datasource":"combodatamodel"}'>
           <input class="u-input"/> <span class="u-combo-icon"></span>
         </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" id="underController"
              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" id="userAssociate"
              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 "
                 id="editCancel" data-bind="click: event.saveCancelClick">取消
         </button>
         <button type="button"
                 class="u-button raised u-button-primary margin-right-10" id="editOk"
                 data-bind="click: event.saveOkClick">保存
         </button>
   
       </div>
     </div>
   </div>
   <!--编辑和新增弹出的公用页面 begin-->
   

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

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

请期待下一篇。

(完)