Dorado 7 : 19.3.2.1 修改视图并配置控件

上一节中在单元格中渲染了按钮并给按钮绑定事件,本节在表格单元格中显示员工照片并预览照片。

 

步骤1:修改DataGrid配置

为其添加一个DataColumn,拖动新增的DataColumn到【operation】列下方,设置属性如下:

属性说明
nameimageDataColumn属性名
propertyimageDataColumn属性名
caption照片DataColumn显示标题
aligncenterDataColumn对齐方式
width100DataColumn的宽度

如下图所示:

 

步骤2:将员工照片文件夹拷贝到项目中

将以下附件压缩包中的员工照片文件夹解压到项目中的WebContent目录中。

images.rar

 

步骤3:为DataColumn绑定事件

为【image】列绑定onRenderCell事件,这个事件是当系统渲染某个数据单元格时触发的事件,在onRenderCell事件编辑区中输入如下代码:

if(arg.data.get("image")){
    $(arg.dom).empty().xCreate(
    {
        tagName : "IMG",
        src : $url(">images/photo/"+ arg.data.get("image")),
        style : "width: 20px; height: 20px; margin: 2px"
    });
    //初始化Tip控件,在控件中显示图片
    dorado.TipManager.initTip(arg.dom.parentNode, {
        content : {
            tagName : "IMG",
            src : $url(">images/photo/"+ arg.data.get("image")),
            style : "width: 128px; height: 128px; margin: 8px"
        },
        arrowDirection : "top",
        arrowAlign : "left"
    });    
}

info

其中arg.dom在onRenderCell中代表这个单元格对应的DOM对象,而arg.data则代表了DataSet中对应的Entity对象。

xCreate方法根据以JSON形式定义的组件的模板信息快速的创建DOM元素。

利用xCreate方法,我们可以根据我们的需要加入各种类型的DOM对象,从而做出我们想要的效果。

 

 

Attachments:

19.3-5.png (image/png)
images.rar (application/x-rar-compressed)