使用moy快速开发后台管理系统(四)

@HuYuee 2017-03-06 08:59:04发表于 iuap-design/blog documentation

moy是什么?

moy 是基于模型框架 keroUI 框架 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中加入弹出页面代码,并且在页面的取消确定按钮中相应增加了点击事件,分别是saveCancelClicksaveOkClick

    **弹出页面代码请点击展开**
    <!--原有代码请勿拷贝-->
    <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中添加saveOkClicksaveCancelClick方法

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

请期待下一篇。

(完)