嘻嘻嘻
<script language="javascript">
var plusSrc="<%=contextPath%>/imagesCBB/btn_plus.gif";
var minusSrc="<%=contextPath%>/imagesCBB/btn_minus.gif";
var masterDetail=new MasterDetail("<%=contextPath%>","/media/queryAssetFile.action","terminalList",'<s:text name="msg.portalMS.media.no" />','<s:text name="msg.portalMS.media.error" />');
masterDetail.detailPosition=1;
masterDetail.loadMaskTargetId="terminalList";
function expandAssetDetail(tdEl,requestData)
{
//alert(requestData);
masterDetail.expandDetail(tdEl,requestData);
}
</script>
/**
* 用于嵌套表格的显示
* 包括动态创建/删除明细行，ajax请假明细列表数据
* @author 908247
* @param {Object} _basePath 系统上下文
* @param {Object} _detailURL 明细列表的action地址
* @param {Object} _assetTabelId 明细表格grid所在table的Id
* @param {Object} noDetailTipMsg 明细grid无数据的提示信息(作为参数方便国际化)
* @param {Object} errMsg 请求明细grid出错的提示信息(作为参数方便国际化)
* @memberOf {TypeName}
* @return {TypeName}
*/
function MasterDetail(_basePath,_detailURL,_assetTabelId,noDetailTipMsg,errMsg)
{
var _this=this;
var isNull=function(str)
{
if(!str||str==null||$.trim(str)=="")
{
return true;
}
return false;
};
if(isNull(_basePath))
{
alert("请指定系统上下文_basePath!");
return;
}
if(isNull(_detailURL))
{
alert("请指定明细表grid的URL!");
return;
}
if(isNull(_assetTabelId))
{
alert("请指定明细表grid数据所在table的ID!");
return;
}
if(isNull(noDetailTipMsg))
{
alert("请指定明细表无数据时的提示信息!");
return;
}
if(isNull(errMsg))
{
alert("请指定错误提示信息!");
return;
}
/**默认从第三列开始(序号从0开始计算)*/
this.detailPosition=2;
/**明细行的第一列是否显示左侧的边框，2层以上嵌套表格，解决细行出现边框重叠问题,2层及以内无需配置*/
this.showDetailLeftBorder=true;
/**detail数据加载时遮罩覆盖的对象ID*/
this.loadMaskTargetId=null;
/**detail数据加载时遮罩覆盖的对象,如果不指定loadMaskTargetId，则用body作为遮罩对象*/
var loadMaskTarget=null;
var detailURL=_basePath+_detailURL;
var plusSimpleSrc="btn_plus.gif";
var minusSimpleSrc="btn_minus.gif";
var plusSrc=_basePath+'/imagesCBB/btn_plus.gif';
var minusSrc=_basePath+'/imagesCBB/btn_minus.gif';
/**展开单元格的名称，用于收拢明细表格时判断是否真正创建了明细tr，避免将主grid的数据行也移除了*/
var mastdetailExpandTrName='__mastdetail_expand_tr__';
/**并发控制标识*/
var isDoing=false;
/**
* 展开明细表格
* @param {Object} tdEl +-图标所在单元格，通过this指定
* @param {Object} requestData ajax请求明细表格的参数
* @return {TypeName}
*/
this.expandDetail=function(tdEl,requestData)
{
/**在后台响应较慢时，防止重复请求*/
if(isDoing)
{
return;
}
var trEl=$(tdEl.parentNode);
var newSrc=changeImageSrc(tdEl);
if(newSrc.indexOf(plusSimpleSrc)>-1)
{
/**收拢时移除tr，并进行容错处理，如果未创建明细行则不处理*/
removeDetail(trEl);
return;
}
queryDetail(trEl,requestData);
/**
* 发起ajax请求，并处理错误信息
* @param {Object} trEl 动态创建行(用于嵌套明细表格)
* @param {Object} requestData
*/
function queryDetail(trEl,requestData)
{
/**查询遮罩目标对象*/
isDoing=true;
if(loadMaskTarget==null)
{
if(_this.loadMaskTargetId==null)
{
loadMaskTarget=$("body");
}
else
{
loadMaskTarget=$("#"+_this.loadMaskTargetId);
}
}
loadMaskTarget.mask("Loading...");
var str=jQuery.param(requestData);
$.ajax
({
type: "POST",
url:detailURL,
data: requestData,
dataType:"html",
success: function(msg)
{
/**并发容错处理，移除可能存在的明细内容*/
removeDetail(trEl);
/**并发容错处理，设置图标为展开*/
shrinkDetailImg(trEl);
createDetail(trEl,msg,requestData);
isDoing=false;
loadMaskTarget.unmask();
},
error:function(xhr, textStatus, errorThrown)
{
/**并发容错处理，移除可能存在的明细内容*/
removeDetail(trEl);
/**并发容错处理，设置图标为展开*/
shrinkDetailImg(trEl);
textStatus=textStatus==null?"":textStatus;
var errorMsg=errMsg+":["+textStatus+"]";
if(xhr&&xhr!=null)
{
errorMsg+="["+xhr+"]";
}
createDetail(trEl,errorMsg,requestData);
isDoing=false;
loadMaskTarget.unmask();
}
});
}
/**设置图标为收拢*/
function shrinkDetailImg(trEl)
{
trEl.find("td:first-child").find("img:first-child").attr("src",minusSrc);
}
/**移除明细内容*/
function removeDetail(trEl)
{
trEl.next("tr[name='"+mastdetailExpandTrName+"']").remove();
}
/**
* 创建明细表格tr并将明细信息加入tr
* @param {Object} trEl
* @param {Object} detailHTML
*/
function createDetail(trEl,detailHTML,requestData)
{
detailHTML=$.trim(detailHTML);
var nullData="<div style='text-align:center'>"+noDetailTipMsg+"</div>";
if(detailHTML==null||detailHTML=="")
{
detailHTML=nullData;
}
else
{
/**ie不支持直接转换，很伤!先构造dom对象然后查找*/
var span=document.createElement("span");
span.innerHTML=detailHTML;
var dataEl=$(span);
var tableEl=dataEl.find("#"+_assetTabelId);
/**一个表格都没有说明出错了*/
if(tableEl==null||tableEl.size()<1)
{
//出错了，直接输出错误消息;
}
else
{
var trs=tableEl.find("tr");
if(trs==null||trs.size()<2)
{
detailHTML=nullData;
}
}
}
var tds=trEl.children("td");
var detailTrHTML=getDetailTrHTML(tds.size(),detailHTML);
$(trEl).after(detailTrHTML);
bindPagegrationEvents(trEl);
}
/**绑定分页事件*/
function bindPagegrationEvents(trEl)
{
var detailTrEl=trEl.next("tr[name='"+mastdetailExpandTrName+"']");
var currentPagegrationInfo=detailTrEl.find("span[name='masterDetailPagegrationInfo']");
var current=parseInt(currentPagegrationInfo.attr("current"));
/**此项数据本不应该传，建议后台查询计算*/
var allCount=parseInt(currentPagegrationInfo.attr("allCount"));
/**此项数据本不应该传，建议后台查询计算*/
var allPageCount=parseInt(currentPagegrationInfo.attr("allPageCount"));
/**此项数据本不应该传，建议后台查询计算*/
var pageSize=parseInt(currentPagegrationInfo.attr("pageSize"));
/**跳转到第一页*/
var masterDetailGoFirst=detailTrEl.find("span[name='masterDetailGoFirst']");
masterDetailGoFirst.bind("click",function()
{
requestData['currentPage']=1;
requestData['pageSize']=pageSize;
queryDetail(trEl,requestData);
});
/**跳转到上一页*/
var masterDetailGoBefore=detailTrEl.find("span[name='masterDetailGoBefore']");
masterDetailGoBefore.bind("click",function()
{
requestData['currentPage']=current-1;
requestData['pageSize']=pageSize;
queryDetail(trEl,requestData);
});
/**跳转到下一页*/
var masterDetailGoNext=detailTrEl.find("span[name='masterDetailGoNext']");
masterDetailGoNext.bind("click",function()
{
requestData['currentPage']=current+1;
requestData['pageSize']=pageSize;
queryDetail(trEl,requestData);
});
/**跳转到最后一页*/
var masterDetailGoEnd=detailTrEl.find("span[name='masterDetailGoEnd']");
masterDetailGoEnd.bind("click",function()
{
requestData['currentPage']=allPageCount;
requestData['pageSize']=pageSize;
queryDetail(trEl,requestData);
});
}
/**
* 切换+-图标
*/
function changeImageSrc(tdEl)
{
var imageObject=$(tdEl).children("img").get(0);
imageObject=$(imageObject);
var imgSrc=imageObject.attr("src");
var newSrc=plusSrc;
if(imgSrc.indexOf(plusSimpleSrc)>-1)
{
newSrc=minusSrc;
}
imageObject.attr("src",newSrc);
return newSrc;
}
/**
* 生成包含明细表格的tr
* @param {Object} tdNum
* @param {Object} detailHTML
* @return {TypeName}
*/
function getDetailTrHTML(tdNum,detailHTML)
{
var paddingTop="0px !important";
var trHTML="<tr id='"+(_assetTabelId)+"' name='"+mastdetailExpandTrName+"' style='border-spacing:0px'><td colspan='"+_this.detailPosition+"' style='padding-top:"+paddingTop;
if(!_this.showDetailLeftBorder)
{
trHTML+=";border-left:none !important";
}
trHTML+="'></td><td colspan="+(tdNum-_this.detailPosition)+" style='padding-left:2px;padding-top:"+paddingTop+";padding-right:2px;padding-bottom:2px'>"+detailHTML+"</td></tr>";
return trHTML;
}
}
/**收拢所有明细*/
this.shrinkAll=function(thDomEl)
{
var tableEl=null;
var pel=$(thDomEl);
for(;pel!=null;pel=pel.parent())
{
var tagName=pel.attr("tagName");
if(!tagName||tagName=="table"||tagName=='TABLE')
{
tableEl=pel;
break;
}
}
if(tableEl==null)
{
return;
}
tableEl.find("tr[name='"+mastdetailExpandTrName+"']").remove();
tableEl.find("tr").find("td:first-child").find("img:first-child").attr("src",plusSrc);
}
}