使用moy快速开发后台管理系统(四)
来源:互联网 发布:一条网线开两个淘宝店 编辑:程序博客网 时间:2024/05/19 19:15
moy是什么?
moy
是基于模型框架 kero
和 UI
框架 neoui
实现的应用框架,是前端集成解决方案,为企业级应用开发而生。
github地址:https://github.com/iuap-design/tinper-moy
step 4. 实现grid数据新增
- 添加新增按钮ui部分:进入
pages/cardtable/cardtable.html
中,加入新增按钮部分的代码到相应位置,并且在data-bind
属性中绑定点击事件addClick
方法:
```html
系统管理
<!-- 新增按钮 begin --> <div class="common-header-2"> <div class="pull-left"> <button class="u-button u-button-info " data-bind="click: event.addClick" tabindex="-1">新增 </button> </div> </div> <!-- 新增按钮 end --> <div class="main-container cartable-container"> ... </div>
```
- 同时,在
pages/cardtable/cardtable.js
中的viewModel.event
中添加addClick
方法
javascript 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 } }
- 继续在js中的viewModel对象中加入dtnew属性代码
```javascript
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 ...
}
```
- 需要配置新增弹出页面,在
pages/cardtable/cardtable.html
中加入弹出页面代码,并且在页面的取消
和确定
按钮中相应增加了点击事件,分别是saveCancelClick
和saveOkClick
```html
...
<!--第三行--> <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" 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" 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 " data-bind="click: event.saveCancelClick">取消 </button> <button type="button" class="u-button raised u-button-primary margin-right-10" data-bind="click: event.saveOkClick">保存 </button> </div> </div>
```
- 再往
pages/cardtable/cardtable.js
中的viewModel.event中添加saveOkClick
和saveCancelClick
方法
javascript 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数据编辑和删除
请期待下一篇。
(完)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(四)
- 使用moy快速开发后台管理系统(一)
- 使用moy快速开发后台管理系统(一)
- 使用moy快速开发后台管理系统(一)
- ASP.NET动态网站开发培训-24.论文管理系统(四、制作Login页面和后台论文管理主页)
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(999)-如何使用这个系统来开发?
- 信息管理系统 网站后台管理快速构建
- 使用Metronic开发的后台管理系统的基础架构(bootstrap 3.3.5)
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(61)-如何使用框架来开发
- Flex 4 开发后台管理系统(2)
- 【Effective Objective-C 2.0:编写高质量iOS与OS X代码的52个有效方法】总结(一)
- 算法10:给一个array和一个target value, 检查array里是否存在两个数之和为target
- LINUX常用命令--重定向、管道篇(四)
- CodeForces 777D Cloud of Hashtags
- 范数(机器学习中的使用)
- 使用moy快速开发后台管理系统(四)
- fastText原理及应用
- 数据结构与算法之深度搜索(理论+代码)
- Numeral.js – 格式化和操作数字的 JavaScript 库
- osgEarth编译——以VS2012为例
- redis学习笔记
- struts2 核心控制器:FilterDispatcher (写的真心清晰)
- 取每一列的第一条数据
- CCF-CSP 工资计算 201612-2