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