TreeviewCopyright © aleen42 all right reserved, powered by aleen42
批改操作
一、应用场景
在原有左树右表的功能上,表头头部栏增加编辑按钮,实现单页面批量修改数据的能力。
二、页面调整
2.1、增加编辑按钮
点击进入列表页面设计器
选择层级,找到DIV块,列表头部栏下找到按钮区,右键插入按钮。详情见下图
选中按钮,多语标题改为编辑
结果如下图
2.2、增加底部栏及按钮
DIV块右键插入底部栏
底部栏右键插入按钮栏
按钮栏右键插入两个按钮
调整按钮的多语标题分别为取消,保存
调整保存按钮的规格类型为主按钮后点击右上角保存
2.3、控制按钮显隐
2.3.1、增加空脚本
分别为编辑、取消、保存添加空脚本
以下以编辑按钮为例
点击编辑按钮,右侧点击动作,点击编辑脚本
点击保存按钮
最终效果如下图
2.3.2、功能实现
var gridModel = viewModel.getGridModel();
var footerCode = "toolbar12rk"; //TODO:需要修改
//初始化设置底部栏隐藏
viewModel.on('afterMount',function(){
setlayoutDisplay(footerCode,false);
})
viewModel.get('button7nc') && viewModel.get('button7nc').on('click', function (data) {
// 编辑--单击
setlayoutDisplay('TreeTableHeader',false); //表头工具栏隐藏
setlayoutDisplay(footerCode,true); //底部栏显示
gridModel.setState('actionStatesVisible',false); //表格按钮栏隐藏
gridModel.setReadOnly(false); //设置表格允许编辑
});
viewModel.get('button15gi') && viewModel.get('button15gi').on('click', function (data) {
// 取消--单击
viewModel.execute('refresh'); //刷新页面
setlayoutDisplay('TreeTableHeader',true); //表头工具栏显示
setlayoutDisplay(footerCode,false); //底部栏隐藏
gridModel.setState('actionStatesVisible',true); //表格按钮栏显示
gridModel.setReadOnly(true); //设置表格不允许编辑
});
viewModel.get('button21uj') && viewModel.get('button21uj').on('click', function (data) {
// 保存--单击
});
//设置布局的隐藏显示
function setlayoutDisplay(cGroupCode,boolean){
viewModel.execute('updateViewMeta',{code:cGroupCode,visible:boolean});
}
footerCode参数需要调整
点击按钮栏,右侧复制编码填充到函数footerCode变量中即可
2.4、保存按钮功能实现
viewModel.get('button21uj') && viewModel.get('button21uj').on('click', function (data) {
var billNum = "left_tree_right_tableTreeTable";
var domainKey = "developplatform";
var busiObj = "left_tree_right_table";
// 保存--单击
var proxy = cb.rest.DynamicProxy.create({
settle: {
url: 'bill/save',
method: 'POST',
options: {
domainKey: domainKey,
busiObj: busiObj
}
}
});
//传参
var param = gridModel.getDirtyData();
var reqParams = {
'billnum':billNum,
'data':param
}
proxy.settle(reqParams, function(err, result) {
if (err) {
cb.utils.alert(err.message, 'error');
return;
}else{
cb.utils.alert('保存成功');
viewModel.execute('refresh');
setlayoutDisplay('TreeTableHeader',true);
setlayoutDisplay(footerCode,false);
//设置表格不允许编辑
gridModel.setReadOnly(true);
}
});
});
billNum,domainKey,busiObj参数获取