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 }

 

posted @ 2019-10-11 13:52  灌汤非  阅读(996)  评论(4)    收藏  举报