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

   
       
   系统管理
     
        
       
   
           
   
               新增
               
           
       
        
       
   
           ...
       
   
   

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

   
   
       ...
   
   
   
     
   新增
     
   
       
       
   
         
   
           系统编码:
         
         
   
           
   *
           
           
         
         
   
           系统名称:
         
         
   
           
   *
           
           
         
       
       
       
   
         
   
           网关地址:
         
         
   
           
         
         
   
           认证模式:
         
         
   
            
         
       
   
       
       
   
         
   
           需要授权: 
         
         
   
           
   
               
             
           
         
       
   
       
       
   
         
   
           自行关联: 
         
         
   
           
   
               
             
           
         
       
     
     
   
       
   
         取消
         
         保存
         
   
       
     
   
   
   

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

请期待下一篇。

(完)