EOS在DataCell中上传图片

本文提出了如何在EOS环境中通过扩展Datacell控件，实现在Datacell中上传图片，以及在Datacell中通过Javascript对行进行增删操作。

 

一.功能截图

 

 

1  页面中的Datacell

 

 

 

 

 

 

2  点击”上传”,弹出的页面

 

 

 

  

 

 

3  选择图片，点击上传文件

 

 

 

 

 

4  上传完毕的Datacell效果

 

 

 

二. 实现步骤
 

1 JSP页面
 

 

在datacell 的cellRefresh，对单元格进行自定义扩展

 

function cellRefresh( cell, fieldName, entity )

{        

switch( cell.name )

       {

       case "BUTON" :

       {

       cell.innerHTML = "<center><img src="<%=webContext%>/fbrole/main/jcfymenu/images/fly_28.gif" style="cursor:pointer" οnclick="bdelrow(this);">  </center>";      //设置删除行按钮

      

var rIndex = cell.parentNode.rowIndex;    //取得行坐标   

       var cIndex = cell.cellIndex;//取得列坐标 

       cell.innerHTML = cell.innerHTML +"<input type=button value="上传..." οnclick=\"javascript:uploadfile("+rIndex+","+cIndex+");\">";       //设置上传按钮

   break;

}        

 

 

同时还需添加显示上传模态框的方法 uploadfile：

function uploadfile(rowIndex, cellIndex){

var temp = "";

//模态窗口返回值定义

   var ret = showModalDialog("default.pr_automata.forward.do?nextPage=/fbwffile/page/datacell_upload_select.jsp","","status:false;dialogWidth:710px;dialogHeight:500px");

   if (!ret){

          // 没有选择直接返回    

          return;

   }

   else{ 

          var row = eosLogicTable.rows[rowIndex];  //根据传入的行座标得到操作的行   

          var entity = row.entity;     //得到行数据对象

 

          entity.setProperty("FILE_ID", ret[0]);     //设置Datacell单元格数据

          entity.setProperty("PHOTO", ret[1]);           //设置Datacell单元格数据

 

          row.cells[cellIndex-2].innerHTML = ret[0];

          row.cells[cellIndex-2].value = ret[0];    

         

          row.cells[cellIndex-1].innerHTML = "<IMG SRC=""+ret[1]+"">"  //在单元格中显示图片

          row.cells[cellIndex-1].value = ret[1];         

   }

} 

 

2 模态框中上传图片
在模态框中上传图片，需要做到类似ajax方式，不刷新当前页面。因此采用了iframe的方式实现。

在 datacell_upload_select.jsp 中，

<form action="fbwffile.pr.prUploadFileAjax.do" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >

       <iframe name="hidden_frame" id="hidden_frame" style="display:none"></iframe>

 

通过隐藏的iframe 来完成上传附件的功能，从而实现不刷新当前模态框来完成上传文件的效果。

 

在fbwffile.pr.prUploadFileAjax.do中，完成上传图片的处理，并调用ajax_upload_info.jsp页面。

 

3 上传完毕回调方法
在ajax_upload_info.jsp中，

主要是获取了附件信息，并调用datacell_upload_select.jsp中的回调方法：

       String str = "<script>parent.callback("" +callbackId +"","" +fileID +"","" +fileName +"","" +filePath +"","" +absolutePath +"") </script>" ;

       out.println(str);

 

回调方法callback中，实现了图片的显示处理：

function callback(callbackID,fileID,fileName,filePath,absolutePath)

{    

       document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

       document.getElementById(callbackID).innerHTML = "<font color=red><IMG SRC="" + absolutePath + "" ></font>";

}