ecology8冻结明细表标题行和指定前几列
数据量大的时候性能不佳,望大神指点!
1 /** 2 * 冻结表格的标题行和指定列数 3 * @param {*} detailNumber 明细表编号 4 * @param {*} frozenColumnsCount 冻结的列数 5 * @param {*} visibleRowsCount 可视数据行数 6 */ 7 function freezeRowsAndColumns(detailNumber, frozenColumnsCount, visibleRowsCount) { 8 setTimeout(function () {//延迟一秒,等待页面加载完毕后执行 9 var divId = "detailDiv_" + (detailNumber - 1); 10 var titleRowCount = $("#" + divId + " table").find("tr[_target='headrow']").length; 11 var dataRowCount=$("#" + divId + " table").find("tr[_target='datarow']").length; 12 var tmpRowCount=dataRowCount>visibleRowsCount?visibleRowsCount:dataRowCount; 13 var trHeight = $("#" + divId + " table").find("tr[_target='headrow']").eq(0).height();//行高 14 var visibleHeight = (tmpRowCount + titleRowCount) * trHeight+22;//可视高度=(数据行数+标题行数)*行高 15 $("#" + divId).css({ "overflow-y": "auto", "height": visibleHeight + "px" });//固定div(容器)高度 16 $("#" + divId).scroll(function () {//给table外面的div滚动事件绑定一个函数 17 var left = $("#" + divId).scrollLeft();//获取滚动的距离 18 var top = $("#" + divId).scrollTop();//获取滚动的距离 19 $("#" + divId + " table>tbody>tr>td").each(function () {//遍历所有td 20 //筛选出类包含detail_x_y的td 21 var strs = $(this).attr("class"); 22 if (!strs) { 23 return true; 24 } 25 var classes = strs.split(" "); 26 var rowIndex; 27 var columnIndex; 28 $.each(classes, function (i, v) { 29 if (v.startWith("detail")) { 30 var tmpStrs = v.split("_"); 31 rowIndex = tmpStrs[1]; 32 columnIndex = tmpStrs[2]; 33 return false; 34 } 35 }); 36 if (!rowIndex||(rowIndex==0&&columnIndex==0)) { 37 return true; 38 } 39 //设置css 40 var color = $(this).css("background-color"); 41 color = color == "rgba(0, 0, 0, 0)" ? "white" : color; 42 if (rowIndex < titleRowCount && columnIndex < frozenColumnsCount) {//行列都固定的区域 43 $(this).css({ "position": "relative", "top": top, "left": left, "background-color": color, "z-index": "10" }); 44 } else if (columnIndex < frozenColumnsCount) {//只固定列的区域 45 $(this).css({ "position": "relative", "top": "0px", "left": left, "background-color": color }); 46 } else if (rowIndex < titleRowCount) {//只固定行的区域 47 $(this).css({ "position": "relative", "top": top, "left": "0px", "background-color": color }); 48 } 49 }); 50 //修正带有增减按钮的行 51 var btnDiv=$("#div"+(detailNumber-1)+"button"); 52 if(btnDiv){ 53 btnDiv.closest("tr").children("td").css({ "position": "relative", "top": top, "left": "0px", "background-color": "white", "z-index": "10" }); 54 btnDiv.closest("td").css({ "position": "relative", "top": top, "left": left, "background-color": "white", "z-index": "11" }); 55 } 56 }); 57 }, 200); 58 String.prototype.startWith = function (s) { 59 if (s == null || s == "" || this.length == 0 || s.length > this.length) 60 return false; 61 if (this.substr(0, s.length) == s) 62 return true; 63 else 64 return false; 65 return true; 66 } 67 }
欢迎交流!