iuap-design/blog

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

Opened this issue · 0 comments

HuYuee commented

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

请期待下一篇。

(完)