176 lines
5.9 KiB
JavaScript
176 lines
5.9 KiB
JavaScript
/**
|
||
* @param {Object} fixedCount锛氳鍐荤粨鐨勫垪鏁帮紙浠庡乏鍒板彸锛<E5BDB8>
|
||
* 涓嶄紶鐨勮瘽锛岄粯璁や笉鍐荤粨鍒楋紱
|
||
* 鑻ュ€间笉涓烘暟瀛楃被鍨嬫垨鑰呭ぇ浜庤〃鏍煎垪鏁板垯鎻愰啋鎶ラ敊
|
||
*/
|
||
function FixedTable(tableId, fixedCount) {
|
||
this.tableId = tableId;
|
||
this.$table = $("#" + tableId);
|
||
if (typeof fixedCount != "undefined") {
|
||
if (typeof fixedCount != "number") {
|
||
throw new Error("鍐荤粨鐨勫垪鏁颁笉鏄暟瀛楃被鍨嬶紝璇锋鏌ワ紒");
|
||
} else if (fixedCount < 0) {
|
||
throw new Error("鍐荤粨鐨勫垪鏁颁笉鑳藉皬浜<E79AAC>0锛岃妫€鏌ワ紒");
|
||
} else if (fixedCount >= this.$table.find("thead tr:eq(0) th").length) {
|
||
throw new Error("鍐荤粨鐨勫垪鏁颁笉鑳借秴杩囪〃鏍肩殑鎬诲垪鏁帮紝璇锋鏌ワ紒");
|
||
} else {
|
||
this.fixedCount = fixedCount;
|
||
}
|
||
} else {
|
||
this.fixedCount = 0;
|
||
}
|
||
|
||
this.init();
|
||
}
|
||
|
||
FixedTable.prototype = {
|
||
constructor: FixedTable,
|
||
init: function() {
|
||
// 鎷艰html缁撴瀯
|
||
this.buildHtml();
|
||
// 涓烘暣涓鍣ㄦ坊鍔犳粴鍔ㄤ簨浠<E7B0A8>
|
||
this.setScroll();
|
||
// 璋冩暣涓€娆″昂瀵<E69882>
|
||
this.adjustTableSize();
|
||
},
|
||
buildHtml: function() {
|
||
var _this = this;
|
||
// 涓鸿〃鏍兼瘡涓崟鍏冩牸娣诲姞绱㈠紩
|
||
var $theadTrs = this.$table.find("thead>tr");
|
||
var fixedHeadHtml = ""; // 鍐荤粨琛ㄥごhtml浠ｇ爜
|
||
$theadTrs.each(function(trIndex, tr) {
|
||
var $ths = $(tr).find("th");
|
||
var trHtml = "<tr>";
|
||
$ths.each(function(thIndex, th) {
|
||
$(th).attr("adjust", trIndex + "-" + thIndex);
|
||
if (thIndex < _this.fixedCount) {
|
||
trHtml += $(th).prop("outerHTML");
|
||
}
|
||
});
|
||
trHtml += "</tr>";
|
||
fixedHeadHtml += trHtml;
|
||
});
|
||
var $tbodyTrs = this.$table.find("tbody>tr");
|
||
var fixedBodyHtml = ""; // 鍐荤粨琛ㄤ綋html浠ｇ爜
|
||
$tbodyTrs.each(function(trIndex, tr) {
|
||
var $tds = $(tr).find("td");
|
||
var trHtml = "<tr>";
|
||
$tds.each(function(tdIndex, td) {
|
||
$(td).attr("adjust", trIndex + "-" + tdIndex);
|
||
if (tdIndex < _this.fixedCount) {
|
||
trHtml += $(td).prop("outerHTML");
|
||
}
|
||
});
|
||
trHtml += "</tr>";
|
||
fixedBodyHtml += trHtml;
|
||
});
|
||
|
||
/**鎷艰html缁撴瀯**/
|
||
// 鎷艰〃鏍肩埗绾х粨鏋<E7B2A8>
|
||
var tableParentHtml = `
|
||
<div id="table-view-` + this.tableId + `" class="table-view">
|
||
</div>
|
||
`;
|
||
this.$table.wrap(tableParentHtml);
|
||
// 鎷煎喕缁撹〃澶<E38083>.table-head>#headTable
|
||
var tableHeadHtml = `
|
||
<div class="table-head">
|
||
<table id="headTable" class="table table-bordered table-striped mb0">
|
||
<thead>` +
|
||
this.$table.find("thead").html() + `
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
`;
|
||
$("#table-view-" + this.tableId).append(tableHeadHtml);
|
||
if (this.fixedCount > 0) {
|
||
// 鎷煎喕缁撳垪鍜屽喕缁撹〃澶村叕鍏辫〃澶<E38083>.table-head-fixed>#fixedHeadTable
|
||
var tableHeadFixedHtml = `
|
||
<div class="table-head-fixed">
|
||
<table id="fixedHeadTable" class="table table-bordered table-striped mb0">
|
||
<thead>` +
|
||
fixedHeadHtml + `
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
`;
|
||
$("#table-view-" + this.tableId).append(tableHeadFixedHtml);
|
||
// 鎷煎喕缁撳垪鐨勮〃鏍<E38083>.table-fixed>#fixedTable
|
||
var tableFixedHtml = `
|
||
<div class="table-fixed">
|
||
<table id="fixedTable" class="table table-bordered table-striped mb0">
|
||
<thead>` +
|
||
fixedHeadHtml + `
|
||
</thead>
|
||
<tbody>` +
|
||
fixedBodyHtml + `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
$("#table-view-" + this.tableId).append(tableFixedHtml);
|
||
}
|
||
},
|
||
setScroll: function() {
|
||
var oldScrollTop = 0, oldScrollLeft = 0;
|
||
$("#table-view-" + this.tableId).scroll(function() {
|
||
var scrollTop = $(this).scrollTop();
|
||
var scrollLeft = $(this).scrollLeft();
|
||
|
||
if (oldScrollTop != scrollTop) { // 涓婁笅婊氬姩浜<E5A7A9>
|
||
$(this).find(".table-head-fixed").css("top", scrollTop + "px");
|
||
$(this).find(".table-head").css("top", scrollTop + "px");
|
||
}
|
||
if (oldScrollLeft != scrollLeft) { // 宸﹀彸婊氬姩浜<E5A7A9>
|
||
$(this).find(".table-head-fixed").css("left", scrollLeft + "px");
|
||
$(this).find(".table-fixed").css("left", scrollLeft + "px");
|
||
}
|
||
|
||
oldScrollTop = scrollTop;
|
||
oldScrollLeft = scrollLeft;
|
||
|
||
});
|
||
},
|
||
adjustTableSize: function() {
|
||
var _this = this;
|
||
// 琛ㄥご鍐荤粨涓斿垪鍐荤粨琛ㄦ牸琛ㄥご閮ㄥ垎灏哄璁＄畻
|
||
$("#table-view-" + this.tableId).find("#fixedHeadTable th").each(function(index, copyEl) {
|
||
alterThSize(copyEl);
|
||
});
|
||
// 琛ㄥご鍐荤粨琛ㄦ牸琛ㄥご閮ㄥ垎灏哄璁＄畻
|
||
$("#table-view-" + this.tableId).find("#headTable th").each(function(index, copyEl) {
|
||
alterThSize(copyEl);
|
||
});
|
||
// 鍒楀喕缁撹〃鏍艰〃澶撮儴鍒嗗昂瀵歌绠<EE85B8>
|
||
$("#table-view-" + this.tableId).find("#fixedTable th").each(function(index, copyEl) {
|
||
alterThSize(copyEl);
|
||
});
|
||
// 鍒楀喕缁撹〃鏍艰〃浣撻儴鍒嗗昂瀵歌绠<EE85B8>
|
||
$("#table-view-" + this.tableId).find("#fixedTable td").each(function(index, copyEl) {
|
||
alertTdSize(copyEl);
|
||
});
|
||
function alterThSize(copyEl) {
|
||
var adjust = $(copyEl).attr('adjust');
|
||
|
||
var dataTdWidth = _this.$table.find("th[adjust=" + adjust + "]").css('width');
|
||
|
||
var dataTdHeight = _this.$table.find("th[adjust=" + adjust + "]").css('height');
|
||
$(copyEl).attr("style", "min-width: " + dataTdWidth + "; height: " + dataTdHeight + ";");
|
||
}
|
||
|
||
function alertTdSize(copyEl) {
|
||
var adjust = $(copyEl).attr('adjust');
|
||
var dataTdWidth = _this.$table.find("td[adjust=" + adjust + "]").css('width');
|
||
|
||
var dataTdHeight = _this.$table.find("td[adjust=" + adjust + "]").css('height');
|
||
$(copyEl).attr("style", "min-width: " + dataTdWidth + "; height: " + dataTdHeight + ";");
|
||
}
|
||
},
|
||
destory: function() {
|
||
// 绉婚櫎灞炴€<E782B4>
|
||
this.$table.find("th, td").removeAttr("adjust");
|
||
// 鎷庡嚭table
|
||
$("#table-view-" + this.tableId).after(this.$table);
|
||
$("#table-view-" + this.tableId).remove();
|
||
}
|
||
} |