Dorado 7 : 20.3.1 复制视图并添加控件

在本节中我们在表格最左边增加多选框,在表格中选择多个员工,点击计算员工生肖按钮,则计算相关员工属相。

 

步骤1:拷贝视图并修改名称

将 com.bstek.dorado.sample.standardlesson.middle.base目录下的 EmployeeManageForCustomRender.view.xml拷贝到当前目录并重命名为 EmployeeManageForCustomSubmit.view.xml。

 

步骤2:修改DataGrid配置

鼠标选中【datagridEmployee】,设置其属性如下:

属性说明
selectionModemultiRows

DataGrid在加入RowSelectorColumn后选择模式设置。

此属性具有如下几种取值:

  • none - 不支持选择模式。
  • singleRow - 单行选择。
  • multiRows - 多行选择。

为其添加一个RowSelectorColumn,拖动新增的DataColumn到最上方,如下图所示:

info

RowSelectorColumn为选择器列,一般用于辅助表格的多选功能。需要注意的是假如需要多选一定要结合DataGrid的selectionMode属性一起使用。

DataGrid除了有RowSelectorColumn还有IndicatorColumn和RowNumColumn:

IndicatorColumn是指示器列,一般用于指示行的状态。用于标明当前数据的数据状态。

RowNumColumn为行号列,主要用于显示行号。

对于这几种列请分别参考:

RowSelectorColumn

IndicatorColumn

RowNumColumn

接下来需要为其添加一个DataColumn,拖动新增的DataColumn到【email】下方,设置属性如下:

属性说明
nameanimalDataColumn的属性名
propertyanimalDataColumn的属性名
aligncenterDataColumn数据对齐方式

如下图所示:

 

步骤3:新增并配置UpdateAction

保存用户属相信息需要添加UpdateAction控件,在【ViewConfig】节点下的【View】节点下添加UpdateAction控件,设置控件属性如下:

属性
说明
idupdateactionSaveForSelect控件的Id
dataResolveremployeeService#saveAll通过执行employeeService这个bean中的saveAll方法对传递到后台的数据进行持久化
executeMessage正在保存...

当此Action正在执行时希望系统显示给用户的提示信息

successMessage保存成功!当此Action执行成功之后自动提示的信息。

然后为UpdateAction添加子节点UpdateItem,绑定需要提交的DataSet数据集:

鼠标选中updateactionSaveForSelect,在右侧【Dorado7 ToolBox】工作区的【Others】分类下面双击【UpdateItem】,设置属性如下:

属性
说明
dataSetdatasetEmployee实现DataSet数据采集,一个UpdateAction可以添加多个UpdateItem

界面如下图所示:

接下来需要给【updateactionSaveForSelect】绑定onGetUpdateData事件,这个事件是当UpdateAction尝试获取每个UpdateItem对应的提交数据时触发的事件。简而言之就是在此事件中能自定义提交数据。在onGetUpdateData事件编辑区中输入如下代码:

function getAnimal(year) {
    if (year=='' || year==undefined){
            return;
    }
    var s = Math.abs((year-1900)%12);
    switch(s){
            case 0: animal = '鼠';break;
            case 1: animal = '牛';break;
            case 2: animal = '虎';break;
            case 3: animal = '兔';break;
            case 4: animal = '龙';break;
            case 5: animal = '蛇';break;
            case 6: animal = '马';break;
            case 7: animal = '羊';break;
            case 8: animal = '猴';break;
            case 9: animal = '鸡';break;
            case 10: animal = '狗';break;
            case 11: animal = '猪';break;
            default: return;
    }
    return animal;
}
var entityList = view.get("#datagridEmployee.selection");
entityList.each(function(entity){
    var birthday = entity.get("birthday");
    var year= new Date(birthday).formatDate("Y");
    entity.set("animal",getAnimal(year));
});
arg.data = entityList;

info

首先定义一个getAnimal函数,根据输入的年份判断生肖属相,接下来通过 view.get("#datagridEmployee.selection");获取选中的数据,遍历数据将出生年份传入getAnimal函数,得 到生肖属相,再将属相设置到实体对象中。最后将设置好的对象集合设置为需要提交的数据。arg.data即要提交的数据。设置此参数就可以直接指定该更新 想对应的提交数据。

 

步骤4:新建并配置ToolBarButton

鼠标选中【ToolBar】控件,首先新建一个【Separator】控件,使之作为分隔符,将即将新建的ToolBarButton和前面的操作按钮隔开,接下来新建一个【ToolBarButton】控件,设置控件属性如下:

属性说明
caption计算选中员工所属生肖ToolBarButton控件显示的标题
actionupdateactionSaveForSelect设置ToolBarButton绑定的action
icon url(>skin>common/icons.gif) -100px -20px设置ToolBarButton的图标

如下图所示:

到目前为止,View部分设置完毕,接下来我们查看运行效果。

 

 

 

Attachments:

20.3-1.png (image/png)
20.3-2.png (image/png)
20.3-2.png (image/png)
20.3-3.png (image/png)
20.3-4.png (image/png)