BEX5中attachment的图片的显示实现

hbyczg

需求：用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属性值
        };

hbyczg

上传的图片在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();
        };

hbyczg

在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);

此处若还要显示图片的名称在图片上方就更完美了，图片名称已用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;
                        }
                }




如果是attachmentImage与attachmentblob
需更改取图片的方法请参见http://doc.wex5.com/?p=4560中的
5.4、显示图片——dataTables & grid在此特别感谢起步

jishuang

在我http://bbs.wex5.com/forum.php?mo ... 71565&extra=&page=1和http://bbs.wex5.com/forum.php?mo ... 09858&extra=&page=1的不厌其烦的耐心解答，第一次写分享，加之自身的代码能力完全是小白，望各位指正。

tyc2003

谢谢你，这些正是我要找的。说的十分详细。谢谢。

-瓦尔登湖畔

楼主666  

yangguangsss

请问您有做物理删除吗？有的话，可以给个代码吗 ，我做了好几次都失败了，谢谢！