解决表格图表自定义样式会影响其数据透视表样式的问题

datagear-web/src/main/resources/org/datagear/web/static/css/analysis.css

@@ -66,16 +66,16 @@
 	margin-right: 0.2em;
 }
 /*轮播表格隐藏竖向滚动条*/
-.dg-chart-table.dg-chart-table-carousel .dataTables_scrollBody{
+.dg-chart-table.dg-chart-table-carousel .dg-chart-table-content .dataTables_scrollBody{
 	overflow-y: hidden !important;
 }
-/*经测试，设置固定列后，在Chrome-87.0.4280.88版本左侧固定列会出现横向滚动条，所以这里通过此样式将滚动条隐藏*/
+/*设置固定列后，在某些版本浏览器固定列会出现横向滚动条，所以这里通过此样式将滚动条隐藏*/
 .dg-chart-table .dg-chart-table-content .DTFC_LeftBodyLiner,
 .dg-chart-table .dg-chart-table-content .DTFC_RightBodyLiner{
 	overflow-x: hidden;
 }
 /*排序图标*/
-.dg-chart-table table.dataTable thead th.sorting div.DataTables_sort_wrapper span{
+.dg-chart-table .dg-chart-table-content table.dataTable thead th.sorting div.DataTables_sort_wrapper span{
 	position: absolute;
 	top: 50%;
 	margin-top: -2px;
@@ -86,7 +86,7 @@
 	opacity: 0.6;
 	filter: Alpha(Opacity=60);
 }
-.dg-chart-table table.dataTable thead th.sorting_asc div.DataTables_sort_wrapper span{
+.dg-chart-table .dg-chart-table-content table.dataTable thead th.sorting_asc div.DataTables_sort_wrapper span{
 	width: 0;
 	height: 0;
 	margin-top: -3px;
@@ -97,7 +97,7 @@
 	opacity: 1;
 	filter: Alpha(Opacity=100);
 }
-.dg-chart-table table.dataTable thead th.sorting_desc div.DataTables_sort_wrapper span{
+.dg-chart-table .dg-chart-table-content table.dataTable thead th.sorting_desc div.DataTables_sort_wrapper span{
 	width: 0;
 	height: 0;
 	margin-top: -3px;
@@ -280,6 +280,11 @@
 .dg-chart-setting-box .dg-chart-setting-panel table.dataTable tbody td{
 	white-space: nowrap;
 }
+/*设置固定列后，在某些版本浏览器固定列会出现横向滚动条，所以这里通过此样式将滚动条隐藏*/
+.dg-chart-setting-box .dg-chart-setting-panel .DTFC_LeftBodyLiner,
+.dg-chart-setting-box .dg-chart-setting-panel .DTFC_RightBodyLiner{
+	overflow-x: hidden;
+}
 
 /*datetimepicker组件扩展样式*/
 .xdsoft_datetimepicker .xdsoft_calendar td,

datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSetting.js

@@ -1593,6 +1593,7 @@
 	        "dom": "t",
 			"select" : { style : 'os' },
 			"searching" : false,
+			"fixedColumns": { leftColumns: 1 },
 			"language":
 		    {
 				"emptyTable": "",
@@ -1610,6 +1611,27 @@
 		
 		table.dataTable(tableOptions);
 		
+		var dataTable = table.DataTable();
+		
+		//固定选择列后hover效果默认不能同步，需要自己实现
+		if(tableOptions.fixedColumns)
+		{
+			$(dataTable.table().body()).on("mouseover mouseout", "tr",
+			function(event)
+			{
+				var rowIndex = $(this).index() + 1;
+				var $tableContainer = $(dataTable.table().container());
+				
+				$(".dataTable", $tableContainer).each(function()
+				{
+					if(event.type == "mouseover")
+						$("tr:eq("+rowIndex+")", this).addClass("hover");
+					else
+						$("tr:eq("+rowIndex+")", this).removeClass("hover");
+				});
+			});
+		}
+		
 		return tableId;
 	};
 	
@@ -1660,6 +1682,9 @@
 		if(global.chartFactory.isStyleSheetCreated(styleId))
 			return false;
 		
+		//表格背景色应与面板背景色一致，且不能设透明背景色，因为设置了固定列
+		var bgColor = chartFactory.getGradualColor(chartTheme, 0);
+		
 		var qualifier = "." + styleClassName;
 		
 		var cssText = 
@@ -1668,13 +1693,13 @@
 			+"} \n"
 			+qualifier + " table.dataTable thead th, table.dataTable thead td {"
 			+"  color:"+chartTheme.titleColor+";"
-			+"  background:transparent;"
+			+"  background:"+bgColor+";"
 			+"} \n"
 			+qualifier + " table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {"
 			+"  background:"+chartFactory.getGradualColor(chartTheme, 0.1)+";"
 			+"} \n"
 			+qualifier + " table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {"
-			+"  background:transparent;"
+			+"  background:"+bgColor+";"
 			+"} \n"
 			+qualifier + " table.dataTable.hover tbody tr.hover,"
 			+qualifier + " table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover"

datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSupport.js

@@ -4516,7 +4516,7 @@
 	
 	chartSupport.tableResize = function(chart)
 	{
-		var chartContent = $(".dg-chart-table-content", chart.element());
+		var chartContent = chartSupport.tableGetChartContent(chart);
 		var dataTable = chartSupport.tableGetChartDataTable(chart);
 		
 		chartSupport.tableEvalDataTableBodyHeight(chartContent, dataTable);
@@ -4597,10 +4597,18 @@
 		}
 	};
 	
+	chartSupport.tableGetChartContent = function(chart)
+	{
+		//图表的数据透视表功能也采用的是DataTable组件，可能会与表格图表处在同一个图表div内，
+		//因此，获取图表表格的DOM操作都应限定在".dg-chart-table-content"内
+		
+		return $(".dg-chart-table-content", chart.element());
+	};
+	
 	chartSupport.tableGetChartDataTable = function(chart)
 	{
 		var tableId = chart.extValue("chartTableId");
-		return $("#" + tableId, chart.element()).DataTable();
+		return $("#" + tableId, chartSupport.tableGetChartContent(chart)).DataTable();
 	};
 	
 	chartSupport.tableGetColumnProperties = function(chart, columnSign)
@@ -4620,7 +4628,8 @@
 		if(global.chartFactory.isStyleSheetCreated(styleSheetId))
 			return false;
 		
-		var qualifier = "." + styleClassName;
+		//样式要加".dg-chart-table-content"限定，因为图表的数据透视表功能也采用的是DataTable组件，可能会处在同一个表格图表div内
+		var qualifier = "." + styleClassName + " .dg-chart-table-content";
 		
 		var cssText = 
 			qualifier + " table.dataTable tbody tr {"
@@ -4737,6 +4746,7 @@
 	{
 		var renderOptions = chartSupport.renderOptions(chart);
 		var chartEle = chart.elementJquery();
+		var chartContent = chartSupport.tableGetChartContent(chart);
 		var dataTable = chartSupport.tableGetChartDataTable(chart);
 		var carousel = renderOptions.carousel;
 		
@@ -4746,7 +4756,7 @@
 		if(rowCount == 0)
 			return;
 		
-		var scrollBody = $(".dataTables_scrollBody", chartEle);
+		var scrollBody = $(".dataTables_scrollBody", chartContent);
 		var scrollTable = $(".dataTable", scrollBody);
 		
 		var scrollBodyHeight = scrollBody.height();
@@ -4778,6 +4788,7 @@
 	{
 		var renderOptions = chartSupport.renderOptions(chart);
 		var chartEle = chart.elementJquery();
+		var chartContent = chartSupport.tableGetChartContent(chart);
 		var dataTable = chartSupport.tableGetChartDataTable(chart);
 		
 		var rowCount = dataTable.rows().indexes().length;
@@ -4789,7 +4800,7 @@
 		chartSupport.tableStopCarousel(chart);
 		chartEle.data("tableCarouselStatus", "start");
 		
-		var scrollBody = $(".dataTables_scrollBody", chartEle);
+		var scrollBody = $(".dataTables_scrollBody", chartContent);
 		var scrollTable = $(".dataTable", scrollBody);
 		
 		chartSupport.tableHandleCarousel(chart, renderOptions, chartEle, dataTable, scrollBody, scrollTable);