attachment的图片在弹出窗口中用carousel展示的问题

hbyczg

需求：用attachment上传多张图片到sphoto列，然后在grid中显示第一张图片，当单击这张图片时打开windowDialog，在windowDialog中carousel展示其余的图片。
问题1，如何取单击图片所在的行？
问题2，当在windowDialog中carousel展示时如何去掉第一个空白的图片
问题3，当在windowDialog关闭后，再传入一条数据时carousel中如何只显示新的图片（现在是前一条的图片也显示在一起）
在grid中显示第一张图片并在单击图片时打开windowDialog并传参的代码如下：

1. Model.prototype.listDataCellRender = function(event) {
   
2.                 if (event.colName == "sPhoto") {
   
3.                         if (event.colVal != null && event.colVal != "" && event.colVal != "[]") {
   
4.                                 // 解析数据库中存储的json数据
   
5.                                 var imageJson = eval("(" + event.colVal + ")");
   
6.                                 var fileID = imageJson[0]["fileID"];
   
7.                                 var docPath = imageJson[0]["docPath"];
   
8.                                 // 依靠上述解析出的信息获得路径
   
9.                                 var url = DocUtils.InnerUtils.getdocServerAction({
   
10.                                         "docPath" : docPath,
    
11.                                         urlPattern : "/repository/file/view/" + fileID + "/last/content",
    
12.                                         isFormAction : false,
    
13.                                         context : this.getContext()
    
14.                                 });
    
15.                                 event.html = "<img src=" + url + " xid='image1' style=width:50px; onclick='justep.Bind.contextFor(this).$model.sPhotoClick()'></img>";
    
16.                         }
    
17.                 }
    
18.         };

复制代码

请问这里要如何修改才能取到当前点击图片的行？上面的写发中取到的不是当前点击图片的行

windowDialog接收到传入的行在carousel中展示的代码如下：

1. Model.prototype.windowReceiverReceive = function(event) {
   
2.                 this.action = event.data.action;
   
3.                 var mainData = this.comp('dialogData');
   
4.                 mainData.clear();
   
5.                 if (event.data.action === "new") {
   
6.                         mainData.newData();
   
7.                 } else {
   
8.                         mainData.setFilter("filter1", mainData.idColumn + "='" + event.data.getID() + "'");
   
9.                         mainData.refreshData();
   
10. 
    
11.                 }
    
12.                 var sphoto = mainData.getValue("sPhoto");
    
13.                 // if(event.colName == "sPhoto" ){
    
14.                 if (sphoto != null && sphoto != "" && sphoto != "[]") {
    
15.                         // 解析数据库中存储的json数据
    
16.                         var imageJson = eval("(" + sphoto + ")");
    
17.                         if (imageJson.length > 0) {
    
18.                                 for (var i = 0; i < imageJson.length; i++) {
    
19.                                         var fileID = imageJson[0]["fileID"];
    
20.                                         var docPath = imageJson[0]["docPath"];
    
21.                                         // 依靠上述解析出的信息获得路径
    
22.                                         var url = DocUtils.InnerUtils.getdocServerAction({
    
23.                                                 "docPath" : docPath,
    
24.                                                 urlPattern : "/repository/file/view/" + fileID + "/last/content",
    
25.                                                 isFormAction : false,
    
26.                                                 context : this.getContext()
    
27.                                         });
    
28.                                         var carousel = this.comp("carousel1");
    
29.                                         carousel.add('<img src="' + url + '" class="tb-img1" />');
    
30.                                 }
    
31.                         }
    
32.                 }
    
33. };

复制代码

以上代码如个修改才能在windowDialog中carousel展示时去掉第一个空白的图片，另当在windowDialog关闭后，再传入一条数据时carousel中如何只显示新的图片（现在是前一条的图片也显示在一起）

我用的是BEX5 3.6 谢谢

jishuang

1.在grid的onRowClick的event中有当前点击的行等相关的数据
2.carousel中默认content可以删除
3.可以调用contents组件的remove删除content，然后在add添加

hbyczg

现在出现一新问题 attachment上传多个图片时，第一次可以在carousel中显示出来，但这后再调其它记录不论图片多少都不显示。如果是上传的是单张图片就不会有问题。（不知道是不是carouse有缺陷）代码如下请指正：

1.         Model.prototype.windowReceiverReceive = function(event) {
   
2.                 this.action = event.data.action;
   
3.                 var mainData = this.comp('dialogData');
   
4.                 mainData.clear();
   
5.                 if (event.data.action === "new") {
   
6.                         mainData.newData();
   
7.                 } else {
   
8.                         mainData.setFilter("filter1", mainData.idColumn + "='" + event.data.getID() + "'");
   
9.                         mainData.refreshData();
   
10. 
    
11.                 }
    
12. 
    
13.                 var carousel = this.comp("carousel1");
    
14.                 //var contents1 = this.comp("contents1");
    
15.                 // 清理carousel中的图片
    
16.                 carousel.removeAll();
    
17.                 var sphoto = mainData.getValue("sPhoto");
    
18.                 if (sphoto != null && sphoto != "" && sphoto != "[]") {
    
19.                         // alert (sphoto);
    
20.                         // 解析数据库中存储的json数据
    
21.                         var imageJson = eval("(" + sphoto + ")");
    
22.                         if (imageJson.length > 0) {
    
23.                                 for (var i = 0; i < imageJson.length; i++) {
    
24.                                         var fileID = imageJson[i]["fileID"];
    
25.                                         var docPath = imageJson[i]["docPath"];
    
26.                                         // 依靠上述解析出的信息获得路径
    
27.                                         var url = DocUtils.InnerUtils.getdocServerAction({
    
28.                                                 "docPath" : docPath,
    
29.                                                 urlPattern : "/repository/file/view/" + fileID + "/last/content",
    
30.                                                 isFormAction : false,
    
31.                                                 context : this.getContext()
    
32.                                         });
    
33.                                         //alert(url);
    
34.                                         carousel.add('<img src="' + url + '" class="tb-img1" />');
    
35.                                 }
    
36.                         }
    
37.                 }
    
38.         };

复制代码

jishuang

不显示确认json中获取到数据了没有

hbyczg

jishuang 发表于 2016-11-30 13:36
不显示确认json中获取到数据了没有

获取到了，多图片第一次正常

第二次就不显示图片了

jishuang

F12打开了浏览器的开发人员调试工具看看节点生成了吗?

hbyczg

jishuang 发表于 2016-11-30 15:16
F12打开了浏览器的开发人员调试工具看看节点生成了吗?

这个不太会看。感觉应生成了吧，单个图片都没问题的，多图片的第一次展示也没问题，就是打开过一次多图片后就不行了。能远程帮我看一下不?

jishuang

F12打开浏览器的开发人员调试工具，用箭头或者放大镜的那个图标去定位

hbyczg

jishuang 发表于 2016-11-30 16:21
F12打开浏览器的开发人员调试工具，用箭头或者放大镜的那个图标去定位

这是F12调试后取出来的，看来是生成了，但就是图片没显示
<div component="$model/UI2/system/components/bootstrap/carousel/carousel" class="x-carousel cNfIz2q" xid="carousel1" data-bind="component:{name:'$model/UI2/system/components/bootstrap/carousel/carousel'}" data-config="{&quot;auto&quot;:true}" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_carousel1">
      <ol class="carousel-indicators cNfIz2q" xid="ol1" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_ol1"><li index="0" __cid="cNfIz2q" class="cNfIz2q"></li><li index="1" __cid="cNfIz2q" class="cNfIz2q"></li><li index="2" __cid="cNfIz2q" class="cNfIz2q"></li></ol>  
      <div class="x-contents carousel-inner cNfIz2q slidable" role="listbox" component="$model/UI2/system/components/justep/contents/contents" xid="contents1" data-bind="component:{name:'$model/UI2/system/components/justep/contents/contents'}" data-config="{&quot;active&quot;:0,&quot;routable&quot;:false,&quot;slidable&quot;:true,&quot;swipe&quot;:true,&quot;wrap&quot;:true}" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_contents1">
         
      <div component="$model/UI2/system/components/justep/contents/content" class="x-contents-content cNfIz2q" xid="" __cid="cNfIz2q" data-bind="component:{name:'$model/UI2/system/components/justep/contents/content'}"><img src="/x5/UI2/v_1005a95bbc49442d848ae5c4d8a23a8bl_zh_CNs_compactd_pc/system/service/doc/common/uploadDoc.j?dochost=http://localhost:8080/DocServer/repository/file/view/30-defaultDocNameSpace/last/content" class="tb-img1 cNfIz2q" __cid="cNfIz2q"></div><div component="$model/UI2/system/components/justep/contents/content" class="x-contents-content cNfIz2q" xid="" __cid="cNfIz2q" data-bind="component:{name:'$model/UI2/system/components/justep/contents/content'}"><img src="/x5/UI2/v_1005a95bbc49442d848ae5c4d8a23a8bl_zh_CNs_compactd_pc/system/service/doc/common/uploadDoc.j?dochost=http://localhost:8080/DocServer/repository/file/view/31-defaultDocNameSpace/last/content" class="tb-img1 cNfIz2q" __cid="cNfIz2q"></div><div component="$model/UI2/system/components/justep/contents/content" class="x-contents-content cNfIz2q" xid="" __cid="cNfIz2q" data-bind="component:{name:'$model/UI2/system/components/justep/contents/content'}"><img src="/x5/UI2/v_1005a95bbc49442d848ae5c4d8a23a8bl_zh_CNs_compactd_pc/system/service/doc/common/uploadDoc.j?dochost=http://localhost:8080/DocServer/repository/file/view/32-defaultDocNameSpace/last/content" class="tb-img1 cNfIz2q" __cid="cNfIz2q"></div></div>  
      <a class="left carousel-control cNfIz2q" role="button" xid="a1" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_a1">
        <span class="glyphicon glyphicon-chevron-left cNfIz2q" aria-hidden="true" xid="span1" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_span1"></span>  
        <span class="sr-only cNfIz2q" xid="span2" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_span2">Previous</span>
      </a>  
      <a class="right carousel-control cNfIz2q" role="button" xid="a2" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_a2">
        <span class="glyphicon glyphicon-chevron-right cNfIz2q" aria-hidden="true" xid="span3" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_span3"></span>  
        <span class="sr-only cNfIz2q" xid="span4" __cid="cNfIz2q" id="C751D2CC48700001924C13E3135112D7_span4">Next</span>
      </a>
    </div>

jishuang

看看样式上是不是有display:none的
或者宽度和高度为0了