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

@HuYuee 2017-03-06 09:01:57发表于 iuap-design/blog documentation

moy是什么?

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

step 5. 实现grid数据编辑和删除

  1. 因为在上面已经在html中加入了field为operate的列加入到了表格中了,见step 3。所以我们现在针对该属性定义的rederType属性中的值optFun,在pages/cardtable/cardtable.js中的viewModel对象中加入对应的方法,就可以显示出修改和删除图标了:

    var viewModel = {
      ...
      
      //定义操作列的内容 begin
      optFun: function(obj) {
      	var delfun = "data-bind=click:event.delClick.bind($data," + (obj.gridObj.getDataTableRowIdByRow(obj.row)) + ")";
      	var editfun = "data-bind=click:event.editClick.bind($data," + (obj.gridObj.getDataTableRowIdByRow(obj.row)) + ")";
      	obj.element.innerHTML = '<div><i class="op uf uf-pencil" title="修改"' + editfun + '></i>' + '<i class=" op icon uf uf-del title="删除" ' + delfun + '></i></div>';
      	ko.applyBindings(viewModel, obj.element);
      },
      //定义操作列的内容 end
    
      ...
    }
  2. optFun方法中动态的加入了修改删除图标,并绑定了相应的点击事件delClickeditClick。所以最后我们再往pages/cardtable/cardtable.js中的viewModel.ev中加入对应的方法:

    var viewModel = {
      	...
      	event: {
      		...
        	       //点击事件 begin
                 editClick: function(index) {
                     viewModel.index = index;
                     $('#editPage').find('.u-msg-title').html("编辑");
                     viewModel.event.clearDt(viewModel.dtnew);
                     var row = viewModel.dt1.getSelectedRows()[0];
               viewModel.dtnew.setSimpleData(viewModel.dt1.getRowByRowId(index).getSimpleData());
                     $('#code').attr("readonly", "readonly");
                     window.md = u.dialog({
                         id: 'editDialog',
                         content: '#editPage',
                         hasCloseMenu: true
                     });
                 },
                 delClick: function(index) {
                     var row = viewModel.dt1.getSelectedRows()[0];
                     var data = viewModel.dt1.getRowByRowId(index).getSimpleData()
                     u.confirmDialog({
                         msg: "是否删除" + data.name + "?",
                         title: "删除确认",
                         onOk: function() {
                             viewModel.dt1.removeRowByRowId(index);
                         },
                         onCancel: function() {}
                     });
                 }
    		  //点击事件 end
      	}
    }
  3. 因为修改和新增是用的同一个弹出页面,所以现在,修改和删除功能也完成了


到这里,我们已经完成所有的之前提到的功能,但仅仅是完成,并不完善。

请期待下一篇。

(完)