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

QQ登录

只需一步,快速开始

查看: 1768|回复: 1

[处理中3] APP上传附件问题

[复制链接]

123

主题

245

帖子

888

积分

高级会员

Rank: 4

积分
888
发表于 2018-3-22 23:31:38 | 显示全部楼层 |阅读模式
我现在使用的版本是WX53.7

我最近在做一个APP,用的是WX53.7版本,有一个功能是实现附件上传,我呢也对 attachmentSimple  组件做了好几天的研究,就想把上传后的文件的显示模式改一改,就是不知道怎样改,

客户要求的附件上传后的展示效果大概如下图:
2.png       
点击  附件图标按钮,打开文档然后选择文件后,所有上传的文件列表显示:第一列是缩略图,非图片显示文档类型图标, 第二列是文档名字,第三列是删除按钮,第四列是下载按钮,
点击删除按钮删除上传的文件,点击下载按钮下载文件到本地,点击文件名时可以预览文档。




我看咱们的    attachmentSimple   组件功能都有,
3.png 4.png






就是在展现形式上不符合用户需求,如何将   attachmentSimple   组件上传后文件的展现形式改成用户的需求呢,青高手指点,跪等!!


91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35962
发表于 2018-3-23 16:52:56 | 显示全部楼层
列表展现参考
  1. <div component="$UI/system/components/justep/attachment/attachmentSimple"
  2.                             actionUrl="$UI/system/service/doc/common/simpleFileStore.j"
  3.                             xid="attachmentSimple4" bind-ref="$model.mainData.ref("fFJ")">
  4.                             <div class="x-attachment" xid="div48">
  5.                               <div class="x-attachment-content x-card-border"
  6.                                 xid="div49">
  7.                                 <div class="x-doc-process" xid="div50">
  8.                                   <div class="progress-bar x-doc-process-bar"
  9.                                     role="progressbar" style="width:0%;" xid="progressBar4"/>
  10.                                 </div>  
  11.                                 <table>
  12.                                   <tr>
  13.                                     <td style="padding:8px;">附件</td>  
  14.                                     <td>
  15.                                       <div class="x-attachment-cell" data-bind="visible:$state.get() == 'upload'"
  16.                                         xid="div54">
  17.                                         <div class="x-attachment-item x-item-upload"
  18.                                           data-bind="visible:$state.get() == 'upload'"
  19.                                           xid="div55"/>
  20.                                       </div>
  21.                                     </td>
  22.                                   </tr>
  23.                                 </table>  
  24.                                 <table class="x-attachment-list">
  25.                                   <tbody data-bind="foreach:$attachmentItems">
  26.                                     <tr>
  27.                                       <td style="width:50px;padding:5px;">
  28.                                         <div style="width:30px;height:30px;background-size:32px;"
  29.                                           data-bind="style:{backgroundImage:($model.previewPicture.bind($model,$object))()}"/>
  30.                                       </td>  
  31.                                       <td style="vertical-align:middle;padding:5px;">
  32.                                         <span data-bind="click:$model.getModel().attPreview.bind($model.getModel(),$model,$object),text:$object.realFileName.get()"/>
  33.                                       </td>  
  34.                                       <td style="width:50px;padding:5px;">
  35.                                         <span class="glyphicon glyphicon-remove"
  36.                                           data-bind="click:$model.deleteFile.bind($model)"/>
  37.                                       </td>  
  38.                                       <td style="width:50px;padding:5px;">
  39.                                         <span class="glyphicon glyphicon-arrow-down"
  40.                                           data-bind="click:$model.getModel().attDownload.bind($model.getModel(),$model,$object)"/>
  41.                                       </td>
  42.                                     </tr>
  43.                                   </tbody>
  44.                                 </table>
  45.                               </div>
  46.                             </div>
  47.                           </div>
复制代码
其中点文件名查看和点下载按钮下载调用的方法是在自己的js文件中定义的,如下:
  1.         Model.prototype.attPreview = function(object, event) {
  2.                 var realFileName = event.realFileName.get();
  3.                 var storeFileName = event.storeFileName.get();
  4.                 var ownerID = object.getOwnerID();
  5.                 var url = object.getFileUrl(realFileName,storeFileName,ownerID,"browse");
  6.         fileApi.browse(url);
  7.         };
  8.         Model.prototype.attDownload = function(object, event) {
  9.                 var realFileName = event.realFileName.get();
  10.                 var storeFileName = event.storeFileName.get();
  11.                 var ownerID = object.getOwnerID();
  12.                 var url = object.getFileUrl(realFileName,storeFileName,ownerID,"download");
  13.         fileApi.browse(url);
  14.         };
复制代码

展现效果如下:


attachmentsimple.png


远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-6-15 20:04 , Processed in 0.091364 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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