We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架,是前端集成解决方案,为企业级应用开发而生。 github地址:https://github.com/iuap-design/tinper-moy
moy
kero
UI
neoui
添加新增按钮ui部分:进入pages/cardtable/cardtable.html中,加入新增按钮部分的代码到相应位置,并且在data-bind属性中绑定点击事件addClick方法:
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>
同时,在pages/cardtable/cardtable.js中的viewModel.event中添加addClick方法
pages/cardtable/cardtable.js
viewModel.event
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属性代码
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
取消
确定
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-->
再往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数据编辑和删除
请期待下一篇。
(完)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
moy是什么?
moy
是基于模型框架kero
和UI
框架neoui
实现的应用框架,是前端集成解决方案,为企业级应用开发而生。github地址:https://github.com/iuap-design/tinper-moy
step 4. 实现grid数据新增
添加新增按钮ui部分:进入
pages/cardtable/cardtable.html
中,加入新增按钮部分的代码到相应位置,并且在data-bind
属性中绑定点击事件addClick
方法:同时,在
pages/cardtable/cardtable.js
中的viewModel.event
中添加addClick
方法继续在js中的viewModel对象中加入dtnew属性代码
需要配置新增弹出页面,在
pages/cardtable/cardtable.html
中加入弹出页面代码,并且在页面的取消
和确定
按钮中相应增加了点击事件,分别是saveCancelClick
和saveOkClick
**弹出页面代码请点击展开**
再往
pages/cardtable/cardtable.js
中的viewModel.event中添加saveOkClick
和saveCancelClick
方法到此,新增功能完毕,刷新下页面,试试自己的杰作吧!
到这里,我们已经完成了前面的准备工作,后面我会开始写如何实现grid数据编辑和删除
请期待下一篇。
(完)
The text was updated successfully, but these errors were encountered: