多图片的上传与显示

hbyczg

想作一个产品管理的应用，每一个产品有多个图片，但个数不固定，上传多个图片用那个附件组件能实现，但如何把多个图片在界面中一一显示出来. 如下图这样,如有两张图片就显示两张，如有3张就显示3张，如要多于4张就显示为多行，每行4张

jishuang

遍历数据可以参考
  var fAttachment = data.getValue("fAttachment", rowid);
        var doc = JSON.parse(fAttachment);
        for ( var i = 0; i < doc.length; i++) {
                var docPath = doc[i].docPath;   var fileID = doc[i].fileID;
               var url = justep.Doc.getURLByFileID(docPath, fileID); // 获得图片url
                  url = justep.Request.convertURL(url); }如果多个需要自己动态创建html的image标签，然后把url赋值给image的src显示

hbyczg

jishuang 发表于 2015-4-28 11:17
遍历数据可以参考
  var fAttachment = data.getValue("fAttachment", rowid);
        var doc = JSON.par ...

我用attachment组件基本实现了效果，缩略图大小用CSS控制.x-item-other {
        background-size: 150px;
}
.x-item-upload{
        background-size: 150px;
}
.x-attachment-item{
        width:150px;
        height:150px;
}
.x-item-remove{
        background-size: 150px;
}

但还有些不满意的地方，1.缩略图不是自动保持长宽比，而是拼接成正方形？2.添加，删除按钮的大小能否单独控制，不要跟缩略图一样大小，求解决方法，如下图：

jishuang

1.可以在样式中自己控制图片是否平铺等
2..x-item-upload和.x-item-remove不设置大小按默认的然后控制图片不平铺看看，如果不行就不能单独控制

hbyczg

jishuang 发表于 2015-4-28 11:17
遍历数据可以参考
  var fAttachment = data.getValue("fAttachment", rowid);
        var doc = JSON.par ...

bex5.31中
Model.prototype.listDataRowClick = function(event){
         var data = this.comp("mainData");
         var rowid = data.getCurrentRowID()
         var fAttachment = data.getValue("fImage", rowid)
         alert ("fAttachment")
         var doc = JSON.parse(fAttachment);
         for ( var i = 0; i < doc.length; i++) {
                var docPath = doc.docPath;   var fileID = doc.fileID;
                var url = justep.Doc.getURLByFileID(docPath, fileID); // 获得图片url
                          url = justep.Request.convertURL(url); }

         alert ("url");
        };
页面报
提示信息：undefined is not a function
[url=]隐藏详细[/url]
TypeError: undefined is not a function at justep.ModelComponent.extend.getValue (http://localhost:8080/x5/$vd8b7d1703af7437d99a88e72b32faa32$lzh_CN$sdesktop$dpc/UI2/system/common.min.js:7:29756) at Model.listDataRowClick (http://localhost:8080/x5/$v103a616417bb4a50968e078833a53d67$lzh_CN$sdesktop$dpc/UI2/ERP/BassINF/process/ProductManage/mainActivity.js:38:33) at r.extend.fire (http://localhost:8080/x5/$vd02f141f6a78461aa2d0b1a5f184897c$lzh_CN$sdesktop$dpc/UI2/system/core.min.js:36:236938) at r.extend.fireEvent (http://localhost:8080/x5/$vd02f141f6a78461aa2d0b1a5f184897c$lzh_CN$sdesktop$dpc/UI2/system/core.min.js:36:238034) at n.callParent (http://localhost:8080/x5/$vd02f141f6a78461aa2d0b1a5f184897c$lzh_CN$sdesktop$dpc/UI2/system/core.min.js:36:234377) at t.extend.fireEvent (http://localhost:8080/x5/$vd8b7d1703af7437d99a88e72b32faa32$lzh_CN$sdesktop$dpc/UI2/system/common.min.js:7:2963) at HTMLTableRowElement.eval (eval at <anonymous> (http://localhost:8080/x5/$vd02f141f6a78461aa2d0b1a5f184897c$lzh_CN$sdesktop$dpc/UI2/system/core.min.js:1:0), <anonymous>:68:96038) at HTMLTableElement.h.event.dispatch (http://localhost:8080/x5/$vd02f141f6a78461aa2d0b1a5f184897c$lzh_CN$sdesktop$dpc/UI2/system/core.min.js:36:68656) at HTMLTableElement.g.handle (http://localhost:8080/x5/$vd02f141f6a78461aa2d0b1a5f184897c$lzh_CN$sdesktop$dpc/UI2/system/core.min.js:36:65366)
控制台没有错误，这是为什么？

jishuang

参考http://wex5.com/cn/datatables-grid/
获取附件图片的url

hbyczg

jishuang 发表于 2015-5-7 08:37
参考http://wex5.com/cn/datatables-grid/
获取附件图片的url

参考了,这个文档说的是在GRID中显示图片，我想要做的是当选中一行后，该行的附件图片显示在一DIV中，不知道用什么办法取当前选择行的附件字段的值。

1、获得附件图片的url

使用AttachmentImage组件上传图片后，字段里面的值是一个json数组，例如

[{“docID”:”C6952018F8B0000173652E80D420D000″,”docName”:”ct2.jpg”,”size”:”21261″,”docPath”:”/defaultDocNameSpace”,”fileID”:”1-defaultDocNameSpace”,”time”:”2015-04-24T10:49:03.634Z”}]

在这个json数组中，获取docPath和fileID，调用getURLByFileID方法获取附件图片的url
注意，需要引用DocUtils

var DocUtils = require("$UI/system/components/justep/docCommon/docUtil");

Model.prototype.taskGridCellRender = function(event){
    if(event.colName=="sETField31"){
        var json = event.colVal;
        if(json != "" && json != undefined){
            var jsonList = eval("("+json+")");
            var docPath = jsonList[0]["docPath"];                 //获得docPath
            var fileID = jsonList[0]["fileID"];;                   //获得fileID
            var url = DocUtils.InnerUtils.getURLByFileID({docPath:docPath,fileID:fileID,context:this.getContext()})
           event.html = "<img src='" + url + "' width='100'/>";
        }
    }
};

jishuang

参考的是获取url的方法
BeX53.1中不是用的
   var url = justep.Doc.getURLByFileID(docPath, fileID); // 获得图片url
                          url = justep.Request.convertURL(url); }

用的是链接中的
  var url = DocUtils.InnerUtils.getURLByFileID({docPath:docPath,fileID:fileID,context:this.getContext()})

注意，需要引用DocUtils
var DocUtils = require("$UI/system/components/justep/docCommon/docUtil");

hbyczg

jishuang 发表于 2015-5-7 11:37
参考的是获取url的方法
BeX53.1中不是用的
   var url = justep.Doc.getURLByFileID(docPath, fileID); //  ...

可我还是有些转不过来，现在是在取当前选择行的附件列的值时就报错了，还没到取URL呢。

jishuang

var fAttachment = data.getValue("fImage")这样写获取不到值吗？