起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 5314|回复: 5

[分享] BEX5中attachment的图片的显示实现

  [复制链接]

91

主题

339

帖子

894

积分

高级会员

Rank: 4

积分
894
QQ
发表于 2016-12-21 01:12:19 | 显示全部楼层 |阅读模式
本帖最后由 hbyczg 于 2016-12-21 01:15 编辑

需求:用attachment上传多张图片到sphoto列,然后在grid中显示第一张图片,当单击这张图片时打开windowDialog,在windowDialog中carousel展示其余的图片。
1.用attachment上传多张图片,这个比较简单,这里如果要控制图片显示的大小需要设置CSS样式。(另上传和删除按钮的大小暂没找到理想的方法,有那位高人有好的方法还望分享一下)。
.x-item-other {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 150px;
}


}
.x-item-upload {
        background-repeat: no-repeat;
        background-position: center center;
}


.x-attachment-item {
        width: 150px;
        height: 150px;
}


.x-item-remove {
        background-repeat: no-repeat;
        background-position: center center;
}

//一次能选多张图片上传
      Model.prototype.modelLoad = function(event) {
                var uploader = this.comp("attachment2").uploader;// 获取附件组件中的uploader
                $(uploader.inputElement).attr('multiple', 'multiple');// 设置uploader中的multiple属性值
        };

1.png

91

主题

339

帖子

894

积分

高级会员

Rank: 4

积分
894
QQ
 楼主| 发表于 2016-12-21 01:14:00 | 显示全部楼层
本帖最后由 hbyczg 于 2016-12-21 01:16 编辑

上传的图片在grid中显示第一张图片。并在点击图片时打开对话框。
Model.prototype.listDataCellRender = function(event) {
                if (event.colName == "sPhoto") {
                        if (event.colVal != null && event.colVal != "" && event.colVal != "[]") {
                                // 解析数据库中存储的json数据
                                var imageJson = eval("(" + event.colVal + ")");
                                var fileID = imageJson[0]["fileID"];
                                var docPath = imageJson[0]["docPath"];
                                // 依靠上述解析出的信息获得路径
                                var url = DocUtils.InnerUtils.getdocServerAction({
                                        "docPath" : docPath,
                                        urlPattern : "/repository/file/view/" + fileID + "/last/content",
                                        isFormAction : false,
                                        context : this.getContext()
                                });
                                // 显示图片并给图片添加点击事件
                                event.html = "<img src=" + url + " xid='image1' style=width:50px; onclick='justep.Bind.contextFor(this).$model.sPhotoClick(event,\"" + event.rowID + "\")'></img>";
                        }
                }
        };



//图片的点击事件
        Model.prototype.sPhotoClick = function(event, rowid) {
                var row = this.comp("mainData").getRowByID(rowid);
                if (row) {
                        this.comp("windowDialog").open({
                                data : row
                        });
                }
                event.stopPropagation();
        };



2.png




回复 支持 反对

使用道具 举报

91

主题

339

帖子

894

积分

高级会员

Rank: 4

积分
894
QQ
 楼主| 发表于 2016-12-21 01:14:50 | 显示全部楼层
本帖最后由 hbyczg 于 2016-12-21 01:21 编辑

在windowDialog中用carousel展示其余的图片。(注意:windowDialog的forceRefreshOnOpen设置要是true,不然在进入对话框后第一次多图正常,再次进入的话就会含有上一次的图片
在windowDialog中放carousel组件
Model.prototype.windowReceiverReceive = function(event) {                //this.action = event.data.action;
                var mainData = this.comp('dialogData');
                mainData.clear();
                        mainData.setFilter("filter1", mainData.idColumn + "='" + event.data.getID() + "'");
                        mainData.refreshData();
                var carousel = this.comp("carousel1");
                var sphoto = mainData.getValue("sPhoto");
                if (sphoto != null && sphoto != "" && sphoto != "[]") {
                        // 解析数据库中存储的json数据
                        var imageJson = eval("(" + sphoto + ")");
                        if (imageJson.length > 0) {
                                for (var i = 0; i < imageJson.length; i++) {
                                        var fileID = imageJson["fileID"];
                                        var docPath = imageJson["docPath"];
                                        var fileName = imageJson["docName"];
                                        // 依靠上述解析出的信息获得路径
                                        var url = DocUtils.InnerUtils.getdocServerAction({
                                                "docPath" : docPath,
                                                urlPattern : "/repository/file/view/" + fileID + "/last/content",
                                                isFormAction : false,
                                                context : this.getContext()
                                        });
                                 carousel.add('<img src="' + url + ' " class=" tb-img1"/>  ');
                                }
                        }
                }
        };



如果要不论图片大小都显示在窗口正中暂时的方法是设置CSS样式
.carousel-inner {
       position: absolute;
       display: box;
      display: -webkit-box;
     /*border: 1px solid #ccc;*/
     -webkit-box-pack:center;
     -webkit-box-align:center;
      max-width:100%; max-width:100%
}

.tb-img1 {
          display:block;
         position:relative;
         margin:auto;
}

carousel组件动态添加图片时显示空白
carousel组件动态添加图片时显示空白有两种情况
第一:
设置了自动切换(auto属性为true),切换的时候总有一个空白的,这个是因为carousel组件默认有一个content,如果没有跟这个content添加图片就会有一个空白的
解决方案:
删除这个默认的content或者跟这个content添加图片
或在取到行数据进入循环向carousel添加图片之前        ,carousel.removeAll();一下应也可以。
第二:设置不自动切换(auto属性为false),添加图片后默认显示空白
字段切换设置为false,把默认的content删除后动态添加图片没有默认选中的content,所以导致显示空白
解决方案:
在动态添加后调用carousel里面的contents组件执行to方法设置一个默认选择的
如:this.comp(“contents1”).to(0);



3.png

此处若还要显示图片的名称在图片上方就更完美了,图片名称已用var fileName = imageJson["docName"];取出来了,但让其显示在图片的左上方(或上方中单)还没找到好的方法,希望那位大拿提供一下方法。


如果不想用carousel组件,也可以把图片显示在一个Div中
在windowDialog中放Div
把上面的代码改造为以下即可
                var mainData = this.comp('dialogData');
                mainData.clear();
                        mainData.setFilter("filter1", mainData.idColumn + "='" + event.data.getID() + "'");
                        mainData.refreshData();
                var sphoto = mainData.getValue("sPhoto");
                if (sphoto != null && sphoto != "" && sphoto != "[]") {
                        // 解析数据库中存储的json数据
                        var imageJson = eval("(" + sphoto + ")");
                        if (imageJson.length > 0) {
                         var op="";
                                for (var i = 0; i < imageJson.length; i++) {
                                        var fileID = imageJson["fileID"];
                                        var docPath = imageJson["docPath"];
                                        var fileName = imageJson["docName"];
                                        // 依靠上述解析出的信息获得路径
                                        var url = DocUtils.InnerUtils.getdocServerAction({
                                                "docPath" : docPath,
                                                urlPattern : "/repository/file/view/" + fileID + "/last/content",
                                                isFormAction : false,
                                                context : this.getContext()
                                        });
                                   op+= "<img src='" + url + "'width='200'; padding: 2px; />";
                                }
                               //把图片放入imagediv
                                 var nlistimage = this.getElementByXid("imagediv")
                                 nlistimage .innerHTML = op;
                        }
                }
4.png



如果是attachmentImage与attachmentblob
需更改取图片的方法请参见http://doc.wex5.com/?p=4560中的
5.4、显示图片——dataTables & grid在此特别感谢起步 5.png
在我http://bbs.wex5.com/forum.php?mo ... 71565&extra=&page=1http://bbs.wex5.com/forum.php?mo ... 09858&extra=&page=1的不厌其烦的耐心解答,第一次写分享,加之自身的代码能力完全是小白,望各位指正。

回复 支持 反对

使用道具 举报

12

主题

42

帖子

170

积分

初级会员

Rank: 2

积分
170
QQ
发表于 2017-3-20 22:39:50 | 显示全部楼层
谢谢你,这些正是我要找的。说的十分详细。谢谢。
回复 支持 反对

使用道具 举报

1

主题

3

帖子

5

积分

新手上路

Rank: 1

积分
5
QQ
发表于 2017-11-9 14:39:18 | 显示全部楼层
楼主666  
回复 支持 反对

使用道具 举报

0

主题

3

帖子

17

积分

新手上路

Rank: 1

积分
17
QQ
发表于 2019-5-7 12:40:36 | 显示全部楼层
请问您有做物理删除吗?有的话,可以给个代码吗 ,我做了好几次都失败了,谢谢!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 17:09 , Processed in 0.073803 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表