diff --git a/datagear-web/src/main/resources/org/datagear/web/static/css/analysis.css b/datagear-web/src/main/resources/org/datagear/web/static/css/analysis.css index f9fd779d..80096f15 100644 --- a/datagear-web/src/main/resources/org/datagear/web/static/css/analysis.css +++ b/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, 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 index 8ea26d82..33a22fe2 100644 --- 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 @@ -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" 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 index 89fe6b8e..2ff30a09 100644 --- 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 @@ -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);