* Add inside and outside query button.
This commit is contained in:
@@ -48,6 +48,6 @@
|
||||
.filter-items{display: flex; flex: 1; flex-wrap: wrap;}
|
||||
.filter-item{padding: 0 16px 5px 0;}
|
||||
.filter-item-grow{flex-grow: 1;}
|
||||
.queryBtn{display: flex; align-items: center; padding-bottom: 5px;}
|
||||
.queryBtn{display: flex; align-items: center; padding-bottom: 5px; flex-basis: 60px;}
|
||||
|
||||
.filterBox .picker-selections{width: 128px; height: 32px; overflow: hidden; text-overflow: clip; white-space: nowrap;}
|
||||
|
||||
@@ -9,7 +9,7 @@ $(function()
|
||||
{
|
||||
var chartPros = charts.map(function(chart)
|
||||
{
|
||||
var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0);
|
||||
var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0);
|
||||
var echart = echarts.init(echartDom);
|
||||
ajaxGetChart(false, chart, echart);
|
||||
chartMap.set(chart.cudrrentGroup + chart.id, chart);
|
||||
@@ -18,14 +18,12 @@ $(function()
|
||||
|
||||
Promise.all(chartPros).then(function()
|
||||
{
|
||||
console.log(11);
|
||||
calcPreviewGrowFilter();
|
||||
$('body').resize(() => {calcPreviewGrowFilter(true);});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
})
|
||||
|
||||
@@ -132,12 +130,13 @@ function calcPreviewGrowFilter(resize = false)
|
||||
/* When body resize, resize echarts. */
|
||||
if(resize)
|
||||
{
|
||||
var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0);
|
||||
var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0);
|
||||
var echart = echarts.init(echartDom);
|
||||
echart.resize();
|
||||
}
|
||||
|
||||
var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items');
|
||||
var $filterBox = $('#filterItems' + chart.currentGroup + '_' + chart.id);
|
||||
var $filterItems = $filterBox.find('.filter-items');
|
||||
/* When refreshing this page, ZenTao load this page twice, when the first load isn't complete, jump back to index and load the second time,
|
||||
the first load can't calc filter width, can't get the element using jQuery at first load. */
|
||||
var hasInit = true;
|
||||
@@ -151,8 +150,12 @@ function calcPreviewGrowFilter(resize = false)
|
||||
|
||||
var domWidth = $filterItems[0].getBoundingClientRect().width;
|
||||
var nowWidth = domWidth;
|
||||
var lineWrap = false;
|
||||
var nowCount = 0;
|
||||
var canGrowTotal = 0;
|
||||
|
||||
$filterBox.find('.query-inside').addClass('hidden');
|
||||
$filterBox.find('.query-outside').addClass('hidden');
|
||||
chart.filters.forEach(function(filter, index)
|
||||
{
|
||||
var nowItem = '.filter-item-' + index;
|
||||
@@ -174,6 +177,7 @@ function calcPreviewGrowFilter(resize = false)
|
||||
canGrowTotal += nowCount;
|
||||
nowWidth = domWidth - filterWidth;
|
||||
nowCount = 1;
|
||||
lineWrap = true;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -184,6 +188,9 @@ function calcPreviewGrowFilter(resize = false)
|
||||
var nowItem = '.filter-item-' + index;
|
||||
if(canGrowTotal >= index + 1) $filterItems.find(nowItem).addClass('filter-item-grow');
|
||||
});
|
||||
|
||||
var queryType =(!lineWrap && nowWidth >= 60) ? '.query-inside' : '.query-outside';
|
||||
$filterBox.find(queryType).removeClass('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -202,11 +209,12 @@ function renderFilters(chart)
|
||||
$.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp)
|
||||
{
|
||||
resp = JSON.parse(resp);
|
||||
var $filterItems = $('#filterItems' + chart.currentGroup + '_' + chart.id + ' .filter-items');
|
||||
chart.filters.forEach(function(filter, index)
|
||||
{
|
||||
var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items');
|
||||
$filterItems.append(renderFilterItem(filter, resp, index));
|
||||
});
|
||||
$filterItems.append(queryDom);
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
|
||||
@@ -20,6 +20,8 @@
|
||||
<?php js::set('WIDTH_INPUT', $config->chart->widthInput);?>
|
||||
<?php js::set('WIDTH_DATE', $config->chart->widthDate);?>
|
||||
<?php js::set('pickerHeight', $config->bi->pickerHeight);?>
|
||||
<?php $queryDom = "<div class='queryBtn query-inside hidden'> <button type='submit' id='submit' class='btn btn-primary btn-query' data-loading='Loading...'>{$lang->chart->query}</button></div>";?>
|
||||
<?php js::set('queryDom', $queryDom);?>
|
||||
|
||||
<div id='mainMenu' class='clearfix main-position'>
|
||||
<div class='btn-toolBar pull-left parent-position'>
|
||||
@@ -92,13 +94,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class='panel-body'>
|
||||
<div id="filterItems<?php echo $chart->currentGroup;?><?php echo $chart->id;?>" class='filterBox'>
|
||||
<div id="filterItems<?php echo $chart->currentGroup . '_';?><?php echo $chart->id;?>" class='filterBox'>
|
||||
<div class='filter-items'></div>
|
||||
<?php if(!empty($chart->filters)):?>
|
||||
<div class='queryBtn'><?php echo html::submitButton($lang->chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?></div>
|
||||
<div class='queryBtn query-outside'><?php echo html::submitButton($lang->chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?></div>
|
||||
<?php endif;?>
|
||||
</div>
|
||||
<div id="chartDraw<?php echo $chart->currentGroup;?><?php echo $chart->id;?>" data-group="<?php echo $chart->currentGroup;?>" data-id="<?php echo $chart->id;?>" class='echart-content'></div>
|
||||
<div id="chartDraw<?php echo $chart->currentGroup . '_';?><?php echo $chart->id;?>" data-group="<?php echo $chart->currentGroup;?>" data-id="<?php echo $chart->id;?>" class='echart-content'></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach;?>
|
||||
|
||||
Reference in New Issue
Block a user