开启图表数据透视表的固定列功能，功能缺陷已解决

hellochenpg · Jan 27, 2021 · 790dd84 · 790dd84
1 parent 1eb8485
commit 790dd84
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 25 deletions.
diff --git a/datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSetting.js b/datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSetting.js
@@ -1218,7 +1218,8 @@
 				{
 					if(!chartSetting.isChartSettingDataPanelClosed(chart))
 					{
-						if($(event.target).closest(".dg-chart-setting-box").length == 0)
+						//点击固定列的<td>，祖先元素竟然只能追溯到<table>！！！这里临时添加标识样式类名解决此问题！！！
+						if($(event.target).closest(".dg-chart-setting-box, .dataTableClassForFixedColumnAncestor").length == 0)
 							chartSetting.closeChartSettingDataPanel(chart);
 					}
 				});
@@ -1462,14 +1463,6 @@
 
 				$fp.data("chartDataTableId", tableId);
 			}
-
-			//当构建多个表格时，有时会出现列头未对齐的情况，这里处理一下后可解决此问题
-			$(".dg-chartdataset-section", $panel).each(function()
-			{
-				var tableId = $(this).data("chartDataTableId");
-				var dataTable = $("#"+tableId, this).DataTable();
-				dataTable.columns.adjust();
-			});
 		}
 		else
 		{
@@ -1487,6 +1480,17 @@
 		}
 
 		chartSetting.adjustChartSetingPanelPosition($panel);
+
+		//当设置完所有表格后再重新调整，避免出现列头未对齐、固定列鼠标悬浮不起作用等问题
+		$(".dg-chartdataset-section", $panel).each(function()
+		{
+			var tableId = $(this).data("chartDataTableId");
+			var dataTable = $("#"+tableId, this).DataTable();
+
+			dataTable.columns.adjust();
+			dataTable.fixedHeader.adjust();
+			dataTable.fixedColumns().relayout();
+		});
 	};
 
 	/**
@@ -1593,8 +1597,7 @@
 	        "dom": "t",
 			"select" : { style : 'os' },
 			"searching" : false,
-			//暂时禁用固定列，开启后会导致在固定列上鼠标悬浮没有hover效果、点击后会关闭面板、滚动会错位，奇怪！
-			//"fixedColumns": { leftColumns: 1 },
+			"fixedColumns": { leftColumns: 1 },
 			"language":
 		    {
 				"emptyTable": "",
@@ -1606,17 +1609,17 @@
 			}
 		};
 
-		var table = $("<table width='100%' class='hover stripe'></table>").appendTo($parent);
+		var table = $("<table width='100%' class='hover stripe dataTableClassForFixedColumnAncestor'></table>").appendTo($parent);
 		var tableId = chartFactory.nextElementId("Table");
 		table.attr("id", tableId);
 
 		table.dataTable(tableOptions);
 
+		var dataTable = table.DataTable();
+
 		//固定选择列后hover效果默认不能同步，需要自己实现
-		/*
 		if(tableOptions.fixedColumns)
 		{
-			var dataTable = table.DataTable();
 			$(dataTable.table().body()).on("mouseover mouseout", "tr",
 			function(event)
 			{
@@ -1632,7 +1635,6 @@
 				});
 			});
 		}
-		*/
 
 		return tableId;
 	};

diff --git a/datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSupport.js b/datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSupport.js
@@ -4506,7 +4506,9 @@
 
 		updateOptions = chartSupport.processUpdateOptions(chart, results, renderOptions, updateOptions);
 
-		chartSupport.tableAddDataTableData(dataTable, updateOptions.data, 0, false);
+		chartSupport.tableAddDataTableData(dataTable, updateOptions.data, 0);
+
+		chartSupport.tableAdjust(chart);
 
 		if(renderOptions.carousel.enable)
 		{
@@ -4711,7 +4713,7 @@
 		}
 	};
 
-	chartSupport.tableAddDataTableData = function(dataTable, datas, startRowIndex, notDraw)
+	chartSupport.tableAddDataTableData = function(dataTable, datas, startRowIndex)
 	{
 		var rows = dataTable.rows();
 		var removeRowIndexes = [];
@@ -4738,15 +4740,24 @@
 
 		dataTable.rows(removeRowIndexes).remove();
 
-		if(!notDraw)
-		{
-			dataTable.draw();
-
-			if(dataTable.init().fixedColumns)
-				dataTable.fixedColumns().relayout();
-		}
+		dataTable.draw();
 	};
-
+
+	/**
+	 * 调整图表表格。
+	 * 当表格隐藏显示、位置调整、数据变更后，可能会出现表头、固定列错位的情况，需要重新调整。
+	 */
+	chartSupport.tableAdjust = function(chart)
+	{
+		var dataTable = chartSupport.tableGetChartDataTable(chart);
+
+		dataTable.columns.adjust();
+		if(dataTable.init().fixedHeader)
+			dataTable.fixedHeader.adjust();
+		if(dataTable.init().fixedColumns)
+			dataTable.fixedColumns().relayout();
+	};
+
 	/**
 	 * 表格准备轮播。
 	 */