zoukankan      html  css  js  c++  java
  • 使用moy快速开发后台管理系统(五)

    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. 因为修改和新增是用的同一个弹出页面,所以现在,修改和删除功能也完成了


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

    (完)

  • 相关阅读:
    考虑浏览器兼容的文件上传(IE8不支持FormData)
    IDEA tomcat 部署WEB项目
    如何在springcloud分布式系统中实现分布式锁?
    ABAP DEMO33 选择周的搜索帮助
    ABAP函数篇1 日期函数
    ABAP函数篇2 测试DATE_CONVERT_TO_FACTORYDATE
    增强篇7 判断标准屏幕能否做屏幕增强
    增强篇6 CMOD增强删除
    ABAP DEMO 年月的搜索帮助
    HoloLens开发手记-配置开发环境 Install the tools
  • 原文地址:https://www.cnblogs.com/olddoublemoon/p/6557406.html
Copyright © 2011-2022 走看看