jeecg3.8在子表页面中使用WebUploader组件

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

bcAbout-update.jsp改动如下：

因为默认子表的上传组件不能回显，所以改造成WebUploader

1.在更新页面注销掉生成代码

<%--<script type="text/javascript">--%>
<%--$(document).ready(function(){--%>
<%--$('#tt').tabs({ 此段代码会造成子页面重复加载，导致回显异常且验证失效，第一次加载代码的位置未知。--%>
<%--onSelect:function(title){--%>
<%--$('#tt .panel-body').css('width','auto');--%>
<%--}--%>
<%--});--%>
<%--$(".tabs-wrap").css('width','100%');--%>
<%--});--%>
<%--</script>--%>

<t:tabs id="tt" iframe="false" tabPosition="top" fit="false">
<t:tab href="bcAboutController.do?bcAboutSubList&id=${bcAboutPage.id}" icon="icon-search" title="***团队" id="bcAboutSub" ></t:tab>
</t:tabs>

2.附表明细模版默认组件位置替换为WebUploader组件的模板

<%-- 上传组件模板start --%>
<link rel="stylesheet" type="text/css" href="plug-in/webuploader/custom.css">
<div id="bcAboutSubList_indeximgUrluploader" class="wu-example">
<div id="bcAboutSubList_indeximgUrlthelist" class="uploader-list"> </div>
<div id="bcAboutSubList_indeximgUrl_progress_bar" class="progress-bar-ty " style="display:none">
<div class="progress-ty">
<span class="upload-label-ty" style="display:none;">正在加载...<b class="value">79%</b></span>
</div>
</div>
<div class="btns">
<div id="bcAboutSubList_indeximgUrlpicker" class="webuploader-container">
选择文件
</div>
<%--<input nullmsg="请上传专家图片" datatype="*" type="hidden" id="bcAboutSubList_indeximgUrldataTypeInp">--%>
</div>
</div>
<div id="tempdiv_bcAboutSubList_indeximgUrl" class="tempIMGdiv"></div>
<%-- 上传组件模板end --%>3.添加表单提交前的方法，用于修正新增行的name名称，否则提交报错

<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table" tiptype="1" action="bcAboutController.do?doUpdate" beforeSubmit="fixImgData" callback="jeecgFormFileCallBack@Override">

function fixImgData() {
// 将上传组件图片的name下标修正再提交表单
resetTrNum('add_bcAboutSub_table');//此方法jeecg自带，用于修正行顺序改变后元素的name属性值
}

bcAboutSubList.jsp子表页面修改如下：
1.定义组件默认js，和计数全局变量（看着长，其实是默认组件生成的，生成后拷贝过来即可，注意js需改一个位置TODO那里）
推荐在线格式化代码工具http://tool.oschina.net/codeformat/js

//WebUploader组件js
var code="Array.prototype.removeItem = function(val) {\n" +
" var index = this.indexOf(val);\n" +
" if (index > -1) {\n" +
" this.splice(index, 1);\n" +
" }\n" +
"};\n" +
"var exsitPathArr_bcAboutSubList_indeximgUrl = new Array();\n" +
"$(function() {\n" +
" var state = 'pending';\n" +
" var $list = $('#bcAboutSubList_indeximgUrlthelist');\n" +
" var uploader = WebUploader.create({\n" +
" swf: 'plug-in/webuploader/Uploader.swf',\n" +
" server: 'systemController/filedeal.do',\n" +
" pick: '#bcAboutSubList_indeximgUrlpicker',\n" +
" duplicate: false,\n" +
" resize: false,\n" +
" auto: true,\n" +
" fileVal: 'file',\n" +
" fileNumLimit: 1,\n" +
" fileSingleSizeLimit: 10485760,\n" +
" accept: {\n" +
" extensions: 'jpg,png,gif,bmp,jpeg'\n" +
" },\n" +
" formData: {\n" +
" isup: '1',\n" +
" swfTransform: 'false',\n" +
" bizType: 'null'\n" +
" }\n" +
" });\n" +
" var imageAdd_bcAboutSubList_indeximgUrl = true;\n" +
" $('#bcAboutSubList_indeximgUrlpicker').find('div:eq(0)').addClass('webuploader-pick btn-blue btn-S');\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl').addClass('tempIMGdiv').append('<ul></ul>');\n" +
" $list.append('<table class=\"temptable\"></table>');\n" +
" var showUploadProgress = function(progress, mycallback, obj) {\n" +
" if (!obj) {\n" +
" obj = $('#bcAboutSubList_indeximgUrl_progress_bar').find('.progress-ty');\n" +
" }\n" +
" if (!$('#bcAboutSubList_indeximgUrl_progress_bar').hasClass('active')) {\n" +
" $('#bcAboutSubList_indeximgUrl_progress_bar').addClass('active');\n" +
" }\n" +
" obj.animate({\n" +
" width: progress + '%'\n" +
" },\n" +
" {\n" +
" duration: 100,\n" +
" easing: 'swing',\n" +
" complete: function(scope, i, elem) {\n" +
" if ( !! mycallback) {\n" +
" mycallback();\n" +
" }\n" +
" }\n" +
" })\n" +
" };\n" +
" var isSupportBase64 = function() {\n" +
" var data = new Image();\n" +
" var support = true;\n" +
" data.onload = data.onerror = function() {\n" +
" if (this.width != 1 || this.height != 1) {\n" +
" support = false;\n" +
" }\n" +
" } //data['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';\n" +
" return support;\n" +
" };\n" +
" var ratio = window.devicePixelRatio || 1;\n" +
" var thumbnailWidth = 100 * ratio;\n" +
" var thumbnailHeight = 100 * ratio;\n" +
" var bcAboutSubList_indeximgUrladdImgli = function(src, name, xpath, flag) {\n" +
" if (imageAdd_bcAboutSubList_indeximgUrl) {\n" +
" var titleclass = 'hidetitle'; //if(flag==1){titleclass='hidetitle';}\n" +
" var img = '<li><img name=\"' + name + 'img\" class=\"tempimg\" src=\"' + src + '\"><div class=\"' + titleclass + '\"><span';\n" +
" img += ' class=\"titledel\">' + xpath + '</span><span';\n" +
" img += xpath == 0 ? ' style=\"display:none;\"': ' ';\n" +
" img += ' class=\"titledown\">' + xpath + '</span></div></li>';\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl').find('ul').append(img);\n" +
" }\n" +
" }\n" +
" var addtrFile = function(id, name, text, downsrc, delflag) {\n" +
" var namet = name;\n" +
" if (name.length > 15) {\n" +
" name = name.substring(0, 15) + '...';\n" +
" }\n" +
" var trhtml = '<tr class=\"item\" id=\"' + id + '\"><td title = ' + namet + '>' + name + '</td><td class=\"state\">' + text + '</td><td class=\"icontd\"><span';\n" +
" trhtml += downsrc == 0 ? ' style=\"display:none;\"': ' ';\n" +
" trhtml += ' class=\"down icon-down\">' + downsrc + '</span></td><td class=\"icontd\"><span';\n" +
" trhtml += ' class=\"del icon-cha\" style=\"overflow:hidden;\">' + delflag + '</span></td>';\n" +
" trhtml += '<td></td></tr>';\n" +
" $list.children('table').append(trhtml);\n" +
" }\n" +
" $('#bcAboutSubList_indeximgUrluploader').find('div.btns').append('<input nullMsg=\"请上传专家图片\" datatype=\"*\" type=\"hidden\" id= \"bcAboutSubList_indeximgUrldataTypeInp\" />');\n" +
" var reset_bcAboutSubList_indeximgUrl_dataTypeInpVal = function(addOrdel) {\n" +
" var obj = $(\"#bcAboutSubList_indeximgUrldataTypeInp\");\n" +
" if (obj.length > 0) {\n" +
" var objval = obj.val() || '';\n" +
" if (addOrdel == 1) {\n" +
" if (objval == '') {\n" +
" obj.val('1');\n" +
" } else {\n" +
" obj.val(objval.toString() + (parseInt(objval.length) + 1));\n" +
" }\n" +
" } else {\n" +
" if (objval.length <= 1) {\n" +
" obj.val('');\n" +
" } else {\n" +
" obj.val(objval.substr(0, objval.length - 1));\n" +
" }\n" +
" }\n" +
" obj.blur();\n" +
" }\n" +
" }\n" +
" var imgDelReq = function(delpath, spanobj) {\n" +
" $.post('systemController/filedeal.do', {\n" +
" path: delpath,\n" +
" swfTransform: 'false',\n" +
" isdel: \"1\"\n" +
" },\n" +
" function(aj) {\n" +
" var data = JSON.parse(aj);\n" +
" if (data.success) {\n" +
" reset_bcAboutSubList_indeximgUrl_dataTypeInpVal(0);\n" +
" exsitPathArr_bcAboutSubList_indeximgUrl.removeItem(delpath);\n" +
" if (exsitPathArr_bcAboutSubList_indeximgUrl.length > 0) {\n" +
" $list.children('.fordel').children('input').val(exsitPathArr_bcAboutSubList_indeximgUrl.join(','));\n" +
" } else {\n" +
" $list.children('.fordel').children('input').remove();\n" +
" }\n" +
" var myimgli = $(spanobj).closest('li');\n" +
" myimgli.off().find('.hidetitle').off().end().remove();\n" +
" }\n" +
" });\n" +
" }\n" +
" var bcAboutSubList_indeximgUrladdFile = function(file, filepath) {\n" +
" uploader.makeThumb(file,\n" +
" function(error, src) {\n" +
" if (error) {\n" +
" return false;\n" +
" }\n" +
" if (isSupportBase64()) {\n" +
" if (filepath == '') {\n" +
" bcAboutSubList_indeximgUrladdImgli(src, file.id, 0, 0);\n" +
" }\n" +
" } else if (filepath != '') {\n" +
" var actSrc = \"\" + filepath;\n" +
" bcAboutSubList_indeximgUrladdImgli(actSrc, file.id, 0, 0);\n" +
" }\n" +
" },\n" +
" thumbnailWidth, thumbnailHeight);\n" +
" }\n" +
" var updatetdState = function(id, content) {\n" +
" $list.children('table').find('#bcAboutSubList_indeximgUrl' + id).find('.state').text('--' + content + '--');\n" +
" }\n" +
" var bcAboutSubList_indeximgUrl_oneLimit = 0;\n" +
" uploader.on('beforeFileQueued',\n" +
" function(file) {\n" +
" if (bcAboutSubList_indeximgUrl_oneLimit >= 1) {\n" +
" return false;\n" +
" } else {\n" +
" bcAboutSubList_indeximgUrl_oneLimit++;\n" +
" };\n" +
" var currLi = $('#tempdiv_bcAboutSubList_indeximgUrl>ul').find('li:last');\n" +
" if (currLi.length > 0) {\n" +
" currLi.addClass('wait-remove');\n" +
" var abcfile = currLi.find('img').attr('name');\n" +
" if (abcfile.indexOf('name') == 0) {} else {\n" +
" abcfile = abcfile.substring(0, abcfile.length - 3);\n" +
" uploader.removeFile(abcfile)\n" +
" }\n" +
" }\n" +
" });\n" +
" uploader.on('fileQueued',\n" +
" function(file) {\n" +
" var id = 'bcAboutSubList_indeximgUrl' + file.id;\n" +
" var name = file.name;\n" +
" var text = '--等待上传--';\n" +
" addtrFile(id, name, text, 0, 0);\n" +
" bcAboutSubList_indeximgUrladdFile(file, '');\n" +
" });\n" +
" uploader.on('uploadProgress',\n" +
" function(file, percentage) {\n" +
" var $li = $('#bcAboutSubList_indeximgUrl' + file.id + ' td:last'),\n" +
" $percent = $li.find('.progress .progress-bar');\n" +
" if (!$percent.length) {\n" +
" $percent = $('<div class=\"progress progress-striped active\"><div class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%\"></div></div>').appendTo($li).find('.progress-bar');\n" +
" }\n" +
" updatetdState(file.id, '上传中');\n" +
" $percent.css('width', percentage * 100 + '%');\n" +
" });\n" +
" uploader.on('uploadStart',\n" +
" function(file) {\n" +
" $('#bcAboutSubList_indeximgUrl_progress_bar').find('.progress-ty').css('width', '1%');\n" +
" var temprd = Math.floor(Math.random() * 7 + 1);\n" +
" if (temprd < 4) {\n" +
" temprd = Number(temprd) + 3\n" +
" }\n" +
" temprd = Number(temprd) * 10;\n" +
" showUploadProgress(temprd,\n" +
" function() {\n" +
" showUploadProgress(Number(temprd) + 15);\n" +
" })\n" +
" });\n" +
" uploader.on('uploadSuccess',\n" +
" function(file, response) {\n" +
" showUploadProgress(100,\n" +
" function() {\n" +
" if (response.success) {\n" +
" $('#bcAboutSubList_indeximgUrl_progress_bar').removeClass('active');\n" +
" updatetdState(file.id, '上传成功');\n" +
" reset_bcAboutSubList_indeximgUrl_dataTypeInpVal(1);\n" +
" var filepath = response['bcAboutSubList_indeximgUrl'] || response.obj;\n" +
" $('#bcAboutSubList_indeximgUrl' + file.id + ' td:first').append('<input type=\"hidden\" name=\"bcAboutSubList[_index].imgUrl\" value=\"' + filepath + '\" />');\n" +
" bcAboutSubList_indeximgUrladdFile(file, filepath);\n" +
" bcAboutSubList_indeximgUrl_oneLimit = 0;\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl>ul').find('li.wait-remove').find('.titledel').click()\n" +
" } else {\n" +
" $('#bcAboutSubList_indeximgUrl_progress_bar').removeClass('active');\n" +
" updatetdState(file.id, '上传出错' + response.msg);\n" +
" }\n" +
" });\n" +
" });\n" +
" uploader.on('uploadError',\n" +
" function(file, reason) {\n" +
" updatetdState(file.id, '上传出错-code:' + reason);\n" +
" });\n" +
" uploader.on('error',\n" +
" function(type) {\n" +
" bcAboutSubList_indeximgUrl_oneLimit--;\n" +
" if (type == 'Q_TYPE_DENIED') {\n" +
" tip('文件类型不识别');\n" +
" }\n" +
" if (type == 'Q_EXCEED_NUM_LIMIT') {\n" +
" tip('文件数量超标');\n" +
" }\n" +
" if (type == 'F_DUPLICATE') {\n" +
" tip('相同文件请不要重复上传');\n" +
" }\n" +
" if (type == 'F_EXCEED_SIZE') {\n" +
" tip('单个文件大小超标');\n" +
" }\n" +
" if (type == 'Q_EXCEED_SIZE_LIMIT') {\n" +
" tip('文件大小超标');\n" +
" }\n" +
" });\n" +
" uploader.on('uploadComplete',\n" +
" function(file) {\n" +
" $('#bcAboutSubList_indeximgUrl' + file.id).find('.progress').fadeOut('slow');\n" +
" });\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl').on('mouseenter', 'li',\n" +
" function() {\n" +
" $(this).find('.hidetitle').slideDown(500);\n" +
" });\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl').on('mouseleave', 'li',\n" +
" function() {\n" +
" $(this).find('.hidetitle').slideUp(500);\n" +
" });\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl').on('click', 'span',\n" +
" function() {\n" +
" var spanopt = $(this).attr('class');\n" +
" var optpath = $(this).text();\n" +
" if (spanopt.indexOf('titledel') >= 0) {\n" +
" if (0 == optpath) {\n" +
" var optimgname = $(this).parent('.hidetitle').prev('img').attr('name');\n" +
" var img_file_div = 'bcAboutSubList_indeximgUrl' + optimgname.substring(0, optimgname.indexOf('img'));\n" +
" $('#' + img_file_div).find('.del').trigger('click');\n" +
" } else {\n" +
" imgDelReq(optpath, this);\n" +
" }\n" +
" }\n" +
" if (spanopt.indexOf('titledown') >= 0) {\n" +
" var downsrc = \"\" + optpath + '?down=true';\n" +
" location.href = downsrc; //$(this).find('a').click(function(event){event.stopPropagation()});\n" +
" }\n" +
" });\n" +
" $list.on(\"click\", \".down\",\n" +
" function() {\n" +
" var optpath = $(this).text();\n" +
" if (0 != optpath) {\n" +
" var downsrc = \"\" + optpath + '?down=true';\n" +
" location.href = downsrc;\n" +
" }\n" +
" });\n" +
" $list.on(\"click\", \".del\",\n" +
" function() {\n" +
" var delspantext = $(this).text();\n" +
" var itemObj = $(this).closest(\".item\");\n" +
"var strIndex=itemObj.attr(\"id\").indexOf(\"imgUrl\")+6;\n"+//TODO 自定义行，修复删除图标绑定方法不可用的问题（默认是写死的下标）
" var id = itemObj.attr(\"id\").substring(strIndex);\n" +//TODO 自定义strIndex
" var delpath = itemObj.find(\"input[name='bcAboutSubList[_index].imgUrl']\").val();\n" +
" if (undefined == delpath || null == delpath) {\n" +
" delpath = delspantext;\n" +
" if (delspantext == 0) {\n" +
" itemObj.remove();\n" +
" uploader.removeFile(id);\n" +
" var myimgli = $('#tempdiv_bcAboutSubList_indeximgUrl').find(\"img[name='\" + id + \"img']\").closest('li');\n" +
" myimgli.off().find('.hidetitle').off().end().remove();\n" +
" return false;\n" +
" }\n" +
" }\n" +
" $.post('systemController/filedeal.do', {\n" +
" path: delpath,\n" +
" swfTransform: 'false',\n" +
" isdel: \"1\"\n" +
" },\n" +
" function(aj) {\n" +
" var data = JSON.parse(aj);\n" +
" if (data.success) {\n" +
" reset_bcAboutSubList_indeximgUrl_dataTypeInpVal(0);\n" +
" var fordelInput = $list.children('.fordel').children('input');\n" +
" itemObj.remove();\n" +
" if (delspantext == 0) {\n" +
" uploader.removeFile(id);\n" +
" var myimgli = $('#tempdiv_bcAboutSubList_indeximgUrl').find(\"img[name='\" + id + \"img']\").closest('li');\n" +
" myimgli.off().find('.hidetitle').off().end().remove();\n" +
" } else if (fordelInput.length > 0) {\n" +
" exsitPathArr_bcAboutSubList_indeximgUrl.removeItem(delpath);\n" +
" if (exsitPathArr_bcAboutSubList_indeximgUrl.length > 0) {\n" +
" fordelInput.val(exsitPathArr_bcAboutSubList_indeximgUrl.join(','));\n" +
" } else {\n" +
" fordelInput.remove();\n" +
" }\n" +
" }\n" +
" }\n" +
" });\n" +
" });\n" +
" if (location.href.indexOf('load=detail') != -1) {\n" +
" $('#bcAboutSubList_indeximgUrluploader').find('.btns').addClass('virtual-hidden').css('visibility', 'hidden');\n" +
" $list.find('span.del').css('display', 'none');\n" +
" $('#tempdiv_bcAboutSubList_indeximgUrl').find('.titledel').css('display', 'none');\n" +
" }\n" +
"});\n" +
"function mygetFileName(filepath) {\n" +
" var fileNameEndindex = filepath.lastIndexOf('_');\n" +
" var filenameSuffix = filepath.lastIndexOf('.');\n" +
" if (fileNameEndindex < 0) {\n" +
" fileNameEndindex = filepath.length;\n" +
" }\n" +
" if (filepath.lastIndexOf('\\\\') > 0) {\n" +
" return filepath.substring(filepath.lastIndexOf('\\\\') + 1, fileNameEndindex) + filepath.substring(filenameSuffix);\n" +
" } else if (filepath.lastIndexOf('/') > 0) {\n" +
" return filepath.substring(filepath.lastIndexOf('/') + 1, fileNameEndindex) + filepath.substring(filenameSuffix);\n" +
" } else {\n" +
" return filepath;\n" +
" }\n" +
"}\n" +
"function randomFor(n) {\n" +
" var rnd = '';\n" +
" for (var i = 0; i < n; i++) {\n" +
" rnd += Math.floor(Math.random() * 10);\n" +
" }\n" +
" return rnd;\n" +
"}"; var imgId=0;//用于标记子记录上传组件id

2，修改添加和减少子表记录的方法

//添加子表记录
$('#addBcAboutSubBtn').bind('click', function(){
var tr = $("#add_bcAboutSub_table_template tr").clone();
$("#add_bcAboutSub_table").append(tr);
//修正name的值
resetTrNum('add_bcAboutSub_table');//jeecg自带
//处理上传组件WebUploader，id加上“_”前缀，用于区别
resetTrIdAdd('add_bcAboutSub_table',"_"+(++imgId));//替换模板元素
var temp = code.replace(/_index/g, "_"+imgId );//替换js
//添加相应的上传js代码
loadScriptString(temp,"s"+(imgId));
return false;
});

//删除子表记录
$('#delBcAboutSubBtn').bind('click', function(){
var selectNum=$("#add_bcAboutSub_table").find("input[name$='ck']:checked");
if(selectNum.length>0){//仅当有选中才操作
selectNum.parent().parent().remove();//删除对应行 if(imgId>0){//有添加过
for(i=0;i<imgId;i++){
deleteScriptString("s"+(imgId-i));//删除对应js（文档中）,删除非新增的行时，也会删除新增行对应的js代码，但该代码已经加载至内存中，所以删除动作并无影响。（加载到内存中的js代码无法删除，所以有内存泄漏的风险，单个页面不建议大量使用，或者自行添加限制代码）
}
} //因tr顺序改变，修正name属性值
resetTrNum('add_bcAboutSub_table');//jeecg自带
} return false;
});

3.增加和删除用到的自定义方法

//增加记录时修改模板中id的值
function resetTrIdAdd(tableId,imageId) { $("#"+tableId + " tr").each(function(i) { $(this).find("div").each(function() {//处理div的id var $this = $(this), id = $this.attr('id'), val = $this
.val();
if (id != null && id.indexOf("_index") >= 0) {
$this.attr("id", id.replace('_index', imageId));
}
});
$(this).find("input").each(function() {//处理input的id
var $this = $(this), id = $this.attr('id'), val = $this
.val();
if (id != null && id.indexOf("_index") >= 0) {
$this.attr("id", id.replace('_index', imageId));
}
});
}); }