通过拼凑htnl实现异步加载子表的功能，需要跟JQUERY一起使用，由于文采平平，直接贴出自己编写的源码，忘大家发现其不足之处，得以改正
一、效果展示如下
未展开效果图：
张开效果图：
二、前台配置：
在table里每行添加一个样式为childTable的列或者某列里某标签添加childTable
如：<td class="childTable"></td> 或者 <td><label class="childTable"></label></td>
然后通过JS调，JS调用配置如下：
/***************************************
new CreateChildTable({
url:url(异步获取数据URL地址),
columns: {
header: "子表表头",
headerClass:"子表表头样式"
width:"宽度"
headerStyle:"子表表头Style"
dbName:"数据库元素名（不与tags、templateTd、dbValue同时出现）"
dbValue:"具体值(不与tags、dbName、templateTd同时出现"
format:"格式，如yyyy-MM-DD"
tdClass:"td样式"
isHidden:"是否隐藏该TD（1隐藏；0不隐藏）"
tdCallFunction:"行回调函数"
tdStyle:"行样式"
tags:[ tagName:"标签名，如a"
tagClass:"标签样式"
dbName:"数据库元素名不与dbValue同时出现"
dbValue:"具体值(dbName同时出现"
tagAttrs:[//属性值
{
AttrName:"属性名",
dbName:"数据库元素名不与dbValue同时出现",
dbValue:"具体值(dbName同时出现"，
format:"格式，如yyyy-MM-DD"
}
]
tagStyle:
]//td里面的标签，不与dbValue、dbName、templateTd同时出现
templateTd:"模板TD，如<td>{order_no}{order_id}</td>"
templateTdColumns:"模板数据库元素值数组, 例如:["order_no","order_id"]"
},
condition: [
{className:"样式名",type:"读取类型（含有两种：html和val）"}
]
createTableConditons: [
{ className:"样式名",type:"读取类型（含有两种：html和val）",condition:"比较值（若果是多个则用逗号隔开，如：1,2）（可选）"}
],
createTableConditon:"比较值（若果是多个则用逗号隔开，如：1,2）(可选)",
parentTdTotal: 父行总列数（可选）,
});
*********************************************/
3、JS具体实现如下
function CreateChildTable(obj) {
var view=ChildTable.ViewManage;
view._columns = obj.columns;
view._condition = obj.condition;
view._ajaxUrl = obj.url;
if (obj.parentTdTotal != undefined) {
view._parentTdTotal = obj.parentTdTotal;
}
if (obj.createTableConditon != undefined) {
view._createTableConditon = obj.createTableConditon;
}
if (obj.createTableConditons != undefined) {
view._createTableConditons = obj.createTableConditons;
}
view.InitParentTable();
}
ChildTable = {};
ChildTable.ConstItem = {
CreateTableControlClass:"childTable",
jiaImageUrl: UTIL.getAppRoot() + "/images/jia.gif", //加号图片路径
jianImageUrl: UTIL.getAppRoot() + "/images/jian.gif", //减号图片路径
childTableTrId: "childTableTrId",//子表所在行ID
removeParentTrClass: "alternate,normal",//需要移除的父行样式
parentTdJia: "table_tree_add", //父TD未展开样式
parentTdJian: "table_tree_minus",//父TD以展开样式
childTableLeftMargin:"19px"//子表缩进距离
}
ChildTable.ViewManage = {
_columnsCount: 0, //子表含有多少列
_parentTdTotal: 0, //父级行有多少列
_columns: {}, //子表元素信息
_condition: {}, //获取子表数据源条件
_ajaxUrl: "", //异步获取数据URL地址
_createTableConditon: "", //用于判断当前控件的值是否与该值相同而生成子表的条件
_createTableConditons: [], //用于判断是否生成子表的条件集合
_templateTd: [], //用于生成子表TD模型数组
InitParentTable: function () {//初始化需要生成的子表格的行
var constItem = ChildTable.ConstItem;
var imageUrl = constItem.jiaImageUrl;
var that = this;
$("." + constItem.CreateTableControlClass).each(function (i, o) {
var trObj = $(o).parent().parent();
that.SetParentTrStyle(o);
var condition = $(o).attr("condition");
if (that.GetHasCreateTable(o) == true) {
that.CountParentTdTotal(trObj, that);
var tdId = Guid.NewGuid().ToString();
var html = "<a href='#' class='lb" + constItem.CreateTableControlClass + "' ><img src='" + imageUrl + "' type='jia' align='absBottom' /></a>";
$(o).before(html);
$(o).parent().attr("id", tdId);
trObj.find(".lb" + constItem.CreateTableControlClass).click(function () { //单机时事件
var obj = { ChildTableManageObj: that, linkObj: this };
var eventArgs = { id: tdId };
ChildTable.OperationManage.LinkEvent(obj, eventArgs);
});
} else {
$(o).css("margin-left", "16px");
}
});
},
//用于判断是否生成子表数据
GetHasCreateTable: function (obj) {
var hasCreate = true;
var value = $(obj).html().trim();
var trObj = $(obj).parent().parent();
var view = ChildTable.ViewManage;
var controlContion = view._createTableConditon;
if (controlContion != "") {
if (("," + controlContion + ",").indexOf("," + value + ",") == -1) {
hasCreate = false;
}
}
var conditons = view._createTableConditons;
if (conditons != undefined && conditons.length > 0) {
for (var i = 0, imax = conditons.length; i < imax; i++) {
var item = conditons[i];
var tempObj = trObj.find("." + item.className);
if (tempObj != undefined) {
var tempValue = "";
if (item.type == "html") {
tempValue = tempObj.html();
} else {
tempValue = tempObj.val();
}
if (("," + item.condition + ",").indexOf("," + tempValue + ",") == -1) {
hasCreate = false;
break;
}
}
}
}
return hasCreate;
},
SetParentTrStyle: function (obj) {
var constItem = ChildTable.ConstItem;
//设置TD样式
$(obj).parent().addClass(constItem.parentTdJia);
//设置父行样式
var trObj = $(obj).parent().parent();
if (constItem.removeParentTrClass != undefined) {
var classNames = constItem.removeParentTrClass.split(',');
for (var i = 0, imax = classNames.length; i < imax; i++) {
var className = classNames[i];
trObj.removeClass(className);
}
}
},
//统计父行总共有多列
CountParentTdTotal: function (trObj, obj) {
if (obj._parentTdTotal == 0) {
obj._parentTdTotal = trObj.find("td").length;
}
},
//初始化子表视图
InitChildView: function (obj, e, dataItem) {
var childTableHtml = this.CreateTable(dataItem);
this.CreateChildTable(obj, e, childTableHtml);
},
//创建子表信息
CreateChildTable: function (obj, e, htmlTable) {
var htmlTr = "<tr id='" + e.trId + "'><td colspan='" + this._parentTdTotal + "' class='table_tree'>";
htmlTr += htmlTable;
htmlTr += "</td></tr>";
var linkObj = obj.linkObj;
$(linkObj).parent().parent().after(htmlTr);
//给TD附件回调方法
ChildTable.OperationManage.CreateTDEvent(obj, e);
},
//新建表格
CreateTable: function (dataItems) {
var htmlTable = "<table cellpadding='0' cellspacing='0' border='0' style=' margin-left:" + ChildTable.ConstItem.childTableLeftMargin + "' class='childTable'>";
htmlTable += this.CreateTheader();
htmlTable += this.CreateTBody(dataItems);
htmlTable += "</table>";
return htmlTable;
},
//新建表头信息
CreateTheader: function () {
var htmlTh = "<thead>";
this._columnsCount = 0;
var columns = this._columns
if (columns != null && columns != undefined && columns.length > 0) {
for (var i = 0, imax = columns.length; i < imax; i++) {
var item = columns[i];
var className = item["headerClass"];
var width = item["width"];
htmlTh += "<th "
if (className != undefined && className != "") {
htmlTh += "class='" + className + "'";
}
if (width != undefined && width != "") {
htmlTh += "width='" + width + "'";
}
if (item.isHidden == "1") {
htmlTh += " style='display:none ' ";
}
htmlTh += " >";
htmlTh += item.header + "</th>";
this._columnsCount += 1;
}
}
htmlTh += "</thead>";
return htmlTh;
},
//穿件表数据
CreateTBody: function (dataItems) {
var htmlTbody = "<tbody>";
if (dataItems == undefined || dataItems == null || dataItems.length < 1) {
htmlTbody += "<tr><td colspan='" + this._columnsCount + "'>暂无数据</td></tr>"
} else {
this.CreateTempleteTd();
var tds = this._templateTd;
if (tds != null && tds != undefined && tds.length > 0) {
for (var i = 0, imax = dataItems.length; i < imax; i++) {
var dataItem = dataItems[i];
htmlTbody += "<tr>";
for (var j = 0, jmax = tds.length; j < jmax; j++) {
var td = tds[j];
var tdHtml = td.tdTemplate;
var column = td.tdColumns;
if (column != undefined && column != null && column.length > 0) {
for (var c = 0, cmax = column.length; c < cmax; c++) {
var cItem = column[c];
var dbName = cItem.dbName;
var value = dataItem[dbName.toUpperCase()];
if (cItem.format != undefined && cItem.format != "") {
value = this.format(value, cItem.format);
}
tdHtml = tdHtml.replace("{" + dbName + "}", value);
}
}
htmlTbody += tdHtml;
}
htmlTbody += "</tr>";
}
}
}
htmlTbody += "</tbody>";
return htmlTbody;
},
//格式转换
format: function (value, fmt) {
value = value.replace(/-/g, "/");
value = (new Date(value)).toString(fmt);
return value;
},
//获取模板td
CreateTempleteTd: function () {
var columns = this._columns;
this._templateTd = [];
if (columns != undefined && columns != null && columns.length > 0) {
for (var i = 0, imax = columns.length; i < imax; i++) {
var tdItem = {};
var column = columns[i];
if (column.templateTDhtml != undefined && column.tempTDhtml != "") {//如果有TD模板直接读取模板值
tdItem.tdTemplate = column.templateTDhtml;
tdItem.tdColumns = templateTdColumns;
} else {
var tdColumns = [];
//系统自动拼凑TD数据
var tdHtml = "<td ";
if (column.tdClass != undefined && column.tdClass != "") {
tdHtml += " class='" + i + " " + column.tdClass + "'";
} else {
tdHtml += " class='" + i + "'";
}
if (column.tdStyle != undefined && column.tdStyle != "") {
if (column.isHidden == "1") {
var tdStyle = column.tdStyle;
if (tdStyle.indexOf("display") == -1) {
tdStyle = " display:none;" + tdStyle;
}
tdHtml += " style='" + tdStyle + "'";
}
} else {
if (column.isHidden == "1") {
tdHtml += " style='display:none'";
}
}
tdHtml += " >";
if (column.tags != undefined && column.tags != null && column.tags.length > 0) {//含有标签的平凑HTML
for (var t = 0, tmax = column.tags.length; t < tmax; t++) {
var tagItem = column.tags[t];
if (tagItem.tagName != undefined && tagItem.tagName != "") {
tdHtml += "<" + tagItem.tagName;
if (tagItem.tagClass != undefined && tagItem.tagClass != "") {
tdHtml += " class='" + tagItem.tagClass + "'";
}
if (tagItem.tagStyle != undefined && tagItem.tagStyle != "") {
tdHtml += " style='" + tagItem.tagStyle + "'";
}
if (tagItem.tagAttrs != undefined && tagItem.tagAttrs != null && tagItem.tagAttrs.length > 0) {
for (var r = 0, rmax = tagItem.tagAttrs.length; r < rmax; r++) {
var arrItem = tagItem.tagAttrs[r];
if (arrItem.AttrName != undefined && arrItem.AttrName != "") {
tdHtml += " " + arrItem.AttrName + "='";
if (arrItem.dbValue != undefined) {
tdHtml += arrItem.dbValue;
} else {
if (arrItem.dbName != undefined) {
tdHtml += "{" + arrItem.dbName + "}";
var tempTdColumn = {};
tempTdColumn.dbName = arrItem.dbName;
if (arrItem.format != undefined) {
tempTdColumn.format = arrItem.format;
}
tdColumns.push(tempTdColumn);
}
}
tdHtml += "' ";
}
}
}
tdHtml += " >";
if (tagItem.dbValue != undefined && tagItem.dbValue != "") {
tdHtml += tagItem.dbValue;
} else {
if (tagItem.dbName != undefined && tagItem.dbName != "") {
tdHtml += "{" + tagItem.dbName + "}";
var tempTdColumn = {};
tempTdColumn.dbName = tagItem.dbName;
if (tagItem.format != undefined) {
tempTdColumn.format = tagItem.format;
}
tdColumns.push(tempTdColumn);
}
}
tdHtml += "</" + tagItem.tagName + ">";
}
}
} else {//无标签情况
if (column.dbValue != undefined && column.dbValue != null) {
tdHtml += column.dbValue;
} else {
if (column.dbName != undefined && column.dbName != null) {
tdHtml += "{" + column.dbName + "}";
var tempTdColumn = {};
tempTdColumn.dbName = column.dbName;
if (column.format != undefined) {
tempTdColumn.format = column.format;
}
tdColumns.push(tempTdColumn);
}
}
}
tdHtml += "</td>";
tdItem.tdTemplate = tdHtml;
tdItem.tdColumns = tdColumns;
}
this._templateTd.push(tdItem);
}
}
}
}
ChildTable.OperationManage = {
view: ChildTable.ViewManage, //视图操作类
//单机事件
LinkEvent: function (obj, e) {
var constItem = ChildTable.ConstItem;
var linkObj = obj.linkObj;
var imageObj = $(linkObj).find("img");
var type = imageObj.attr("type");
type = type == "jia" ? "jian" : "jia";
var imageUrl = type == "jia" ? constItem.jiaImageUrl : constItem.jianImageUrl;
var tdObj = $(linkObj).parent();
if (type == "jia") {
tdObj.removeClass(constItem.parentTdJian);
tdObj.addClass(constItem.parentTdJia);
} else {
tdObj.removeClass(constItem.parentTdJia);
tdObj.addClass(constItem.parentTdJian);
}
imageObj.attr("type", type);
imageObj.attr("src", imageUrl);
e.type = type;
this.ShowChildTable(obj, e);
},
//用于控制子表格的隐藏与显示
ShowChildTable: function (obj, e) {
var trId = ChildTable.ConstItem.childTableTrId + e.id;
if (e.type == "jian") {
if ($("#" + trId).length > 0) {
$("#" + trId).show();
} else {
e.trId = trId;
this.CreateNewChildTable(obj, e);
}
} else {
$("#" + trId).hide();
}
},
//创建TD回调函数
CreateTDEvent: function (obj, e) {
var trId = e.trId;
var childTableObj = $("#" + trId).find("table");
var coluns = this.view._columns;
if (coluns != undefined && coluns != null && coluns.length > 0) {
for (var i = 0, imax = coluns.length; i < imax; i++) {
var column = coluns[i];
if (column.tdCallFunction != undefined && column.tdCallFunction != null) {
childTableObj.find("." + i).each(function (j, o) {
column.tdCallFunction(o, { row: j, col: i });
});
}
}
}
},
//重新生成一个子表
CreateNewChildTable: function (obj, e) {
var manageObj = obj.ChildTableManageObj;
var param = this.GetParam(obj, e);
var url = this.view._ajaxUrl;
$.ajax({
type: 'POST',
url: url,
data: param,
success: function (response) {
if (response != undefined && response.length > 0) {
manageObj.InitChildView(obj, e, response);
}
},
dataType: "json"
});
},
//获取子表查询条件
GetParam: function (obj, e) {
var linkObj = obj.linkObj;
var trObj = $(linkObj).parent().parent();
var condition = this.view._condition;
var param = {};
if (condition != null && condition != undefined && condition.length > 0) {
for (var i = 0, imax = condition.length; i < imax; i++) {
var item = condition[i];
var itemObj = {};
var value = "";
if (item.text == undefined) {
if (item.id == undefined) {
itemObj = trObj.find("." + item.className);
} else {
itemObj = $("#" + item.id);
}
if (item.type == "html") {
value = itemObj.html();
} else {
value = itemObj.val();
}
} else {
value = item.text;
}
param[item.paramName] = value;
}
}
return param;
}
}
//表示全局唯一标识符 (GUID)。
function Guid(g) {
var arr = new Array(); //存放32位数值的数组
if (typeof (g) == "string") { //如果构造函数的参数为字符串
InitByString(arr, g);
}
else {
InitByOther(arr);
}
//返回一个值，该值指示 Guid 的两个实例是否表示同一个值。
this.Equals = function (o) {
if (o && o.IsGuid) {
return this.ToString() == o.ToString();
}
else {
return false;
}
}
//Guid对象的标记
this.IsGuid = function () { }
//返回 Guid 类的此实例值的 String 表示形式。
this.ToString = function (format) {
if (typeof (format) == "string") {
if (format == "N" || format == "D" || format == "B" || format == "P") {
return ToStringWithFormat(arr, format);
}
else {
return ToStringWithFormat(arr, "D");
}
}
else {
return ToStringWithFormat(arr, "D");
}
}
//由字符串加载
function InitByString(arr, g) {
g = g.replace(/\{|\(|\)|\}|-/g, "");
g = g.toLowerCase();
if (g.length != 32 || g.search(/[^0-9,a-f]/i) != -1) {
InitByOther(arr);
}
else {
for (var i = 0; i < g.length; i++) {
arr.push(g.substring(i, i + 1));
}
}
}
//由其他类型加载
function InitByOther(arr) {
var i = 32;
while (i--) {
arr.push("0");
}
}
/*
根据所提供的格式说明符，返回此 Guid 实例值的 String 表示形式。
N 32 位： xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
D 由连字符分隔的 32 位数字 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
B 括在大括号中、由连字符分隔的 32 位数字：{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}
P 括在圆括号中、由连字符分隔的 32 位数字：(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
*/
function ToStringWithFormat(arr, format) {
switch (format) {
case "N":
return arr.toString().replace(/,/g, "");
case "D":
var str = arr.slice(0, 8) + "-" + arr.slice(8, 12) + "-" + arr.slice(12, 16) + "-" + arr.slice(16, 20) + "-" + arr.slice(20, 32);
str = str.replace(/,/g, "");
return str;
case "B":
var str = ToStringWithFormat(arr, "D");
str = "{" + str + "}";
return str;
case "P":
var str = ToStringWithFormat(arr, "D");
str = "(" + str + ")";
return str;
default:
return new Guid();
}
}
}
//Guid 类的默认实例，其值保证均为零。
Guid.Empty = new Guid();
//初始化 Guid 类的一个新实例。
Guid.NewGuid = function () {
var g = "";
var i = 32;
while (i--) {
g += Math.floor(Math.random() * 16.0).toString(16);
}
return new Guid(g);
}
Date.prototype.toString = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
var week = {
"0": "/u65e5",
"1": "/u4e00",
"2": "/u4e8c",
"3": "/u4e09",
"4": "/u56db",
"5": "/u4e94",
"6": "/u516d"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
if (/(E+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
浙公网安备 33010602011771号