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

时间：2022-10-23 14:56:05

moy是什么？

moy 是基于模型框架 kero 和 UI 框架 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对象中加入对应的方法，就可以显示出修改和删除图标了：

```javascript
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

 ...

}
```

  1. 在optFun方法中动态的加入了修改和删除图标，并绑定了相应的点击事件delClick和editClick。所以最后我们再往pages/cardtable/cardtable.js中的viewModel.ev中加入对应的方法：

javascript 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 } }

  1. 因为修改和新增是用的同一个弹出页面，所以现在，修改和删除功能也完成了

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

(完)

标签：

相关文章