diff --git a/README.md b/README.md index e017e12..71dd980 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,11 @@ $testTableContent = testTable.html(); //Make table cells not intuitive selectable testTable.tableCellsSelection('destroy'); + +//включение обработки обьединенных ячеек 'coordinateManipulateMagic':true +//отключение суммирования ячеек 'selectionSum':false +$('#tablecellsselection').tableCellsSelection({'coordinateManipulateMagic':true,'selectionSum':false}); +//При использовании bootstrap grid не правильно работает позиционирование блока с суммой ячеек (уезжает вниз и влево) ``` # Appreciation diff --git a/tablecellsselection.css b/tablecellsselection.css index 3ac70a3..d8dc84f 100644 --- a/tablecellsselection.css +++ b/tablecellsselection.css @@ -23,6 +23,17 @@ background-color: transparent; } .tcs .tcs-selected:not(.sel-from){ - border: 1px double #4887C7; - background-color: rgba(51, 122, 183, 0.2) !important; + /* border: 1px double #4887C7;*/ + /* background-color: rgba(51, 122, 183, 0.2) !important;*/ + box-shadow: inset 0 0 0 2px #4887C7; +} + +.tcsCellsSelectionSum{ + z-index: 5; + background-color: #4887C7; + padding: 2px 5px; + margin: 10px 0px; + transform: translate(2px, 5px); +/* background-color: rgba(51, 122, 183, 0.2);*/ + /* opacity:0.1; */ } \ No newline at end of file diff --git a/tablecellsselection.js b/tablecellsselection.js index eba165e..a86439f 100644 --- a/tablecellsselection.js +++ b/tablecellsselection.js @@ -17,12 +17,15 @@ var defaultSettings = { selectableTableClass : 'tcs',//класс добавляемый к таблицам selectedCellClass : 'tcs-selected',//класс добавляемый к выделенным ячейкам таблицы - selectionEnabled: 'tcs-selection-enabled' //??? + selectionEnabled: 'tcs-selection-enabled', //??? + selectionSum: true, + selectionSumBottom: false, + coordinateManipulateMagic: false }; - settings = (!options) ? defaultSettings : $.extend(defaultSettings,options); + //console.log('settings',settings); //todo: set listenets on all document for handle all tables added to html return this.filter("table").each(initTableIfNeed); }, @@ -148,94 +151,26 @@ setPointCoordinates(data,$cell); //todo: move to bottom - function coordinateManipulateMagic() { - var i = 1; - while (i > 0) { - i = 0;//wtf??? - getTableCells($table).each(function (key, cell) { - data.$elemX = $(cell).offset().left; - data.$elemXwidth = $(cell).offset().left + $(cell).width(); - - data.$elemY = $(cell).offset().top; - data.$elemYheight = $(cell).offset().top + $(cell).height(); - - if ((data.$elemX < data.$pointXmin) && (data.$elemXwidth >= data.$pointXmin) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemYheight <= data.$pointYheight) && (data.$elemYheight > data.$pointYmin)) { - data.$temp = data.$elemX; - if (data.$temp != data.$pointXmin) { - data.$pointXmin = data.$temp; - i = 1; - } - } - - if ((data.$elemX >= data.$pointXmin) && (data.$elemX < data.$pointXwidth) && (data.$elemXwidth >= data.$pointXwidth) && (data.$elemYheight <= data.$pointYheight) && (data.$elemYheight > data.$pointYmin)) { - data.$temp = data.$elemXwidth; - if (data.$temp != data.$pointXwidth) { - data.$pointXwidth = data.$temp; - i = 1; - } - } - - if ((data.$elemY < data.$pointYmin) && (data.$elemYheight >= data.$pointYmin) && (data.$elemYheight <= data.$pointYheight) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemXwidth > data.$pointXmin)) { - data.$temp = data.$elemY; - if (data.$temp != data.$pointYmin) { - data.$pointYmin = data.$temp; - i = 1; - } - } - - if ((data.$elemY >= data.$pointYmin) && (data.$elemY < data.$pointYheight) && (data.$elemYheight >= data.$pointYheight) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemXwidth > data.$pointXmin)) { - data.$temp = data.$elemYheight; - if (data.$temp != data.$pointYheight) { - data.$pointYheight = data.$temp; - i = 1; - } - } - - if ((data.$elemX < data.$pointXmin) && (data.$elemXwidth >= data.$pointXwidth) && (data.$elemYheight <= data.$pointYheight) && (data.$elemYheight > data.$pointYmin)) { - data.$temp = data.$elemX; - if (data.$temp < data.$pointXmin) { - data.$pointXmin = data.$temp; - i = 1; - } - } - if ((data.$elemX > data.$pointXmin) && (data.$elemX < data.$pointXwidth) && (data.$elemY < data.$pointYheight) && (data.$elemY > data.$pointYmin)) { - data.$temp = data.$elemXwidth; - if (data.$temp > data.$pointXwidth) { - data.$pointXwidth = data.$temp; - i = 1; - } - } - - if ((data.$elemY < data.$pointYmin) && (data.$elemYheight >= data.$pointYmin) && (data.$elemYheight <= data.$pointYheight) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemXwidth > data.$pointXmin)) { - data.$temp = data.$elemY; - if (data.$temp < data.$pointYmin) { - data.$pointYmin = data.$temp; - i = 1; - } - } - if ((data.$elemY > data.$pointYmin) && (data.$elemYheight <= data.$pointYheight) && (data.$elemX <= data.$pointXwidth)) { - data.$temp = data.$elemYheight; - if (data.$temp > data.$pointYheight) { - data.$pointYheight = data.$temp; - i = 1; - } - } - }); - } + + if(settings.coordinateManipulateMagic){ + coordinateManipulateMagic($table,data); + } + + if (!event.ctrlKey) { + deselectAll($table); } - - coordinateManipulateMagic(); selectCells($table,data); $table.data(data); return true; function setPointCoordinates(data, $cell) { - data.$pointX2 = $cell.offset().left; - data.$pointX2width = $cell.offset().left + $cell.width(); + var cell = $cell[0]; + data.$pointX2 = cell.offsetLeft; + data.$pointX2width = cell.offsetLeft + cell.offsetWidth; - data.$pointY2 = $cell.offset().top; - data.$pointY2height = $cell.offset().top + $cell.height(); + data.$pointY2 = cell.offsetTop; + data.$pointY2height = cell.offsetTop + cell.offsetHeight; if (data.$pointX1 < data.$pointX2) { data.$pointXmin = data.$pointX1; @@ -292,20 +227,36 @@ data.selFrom.$el = $cell; var selectedCellClass = settings.selectedCellClass; - if ($cell.hasClass(selectedCellClass) && deselectAll($table) === 1) { - $cell.removeClass(selectedCellClass); - } else { - deselectAll($table); - $cell.addClass(selectedCellClass); + if (!event.ctrlKey) { + if ($cell.hasClass(selectedCellClass) && deselectAll($table) === 1) { + $cell.removeClass(selectedCellClass); + } else { + deselectAll($table); + $cell.addClass(selectedCellClass); + } + }else{ + if ($cell.hasClass(selectedCellClass)) { + $cell.removeClass(selectedCellClass); + } else { + $cell.addClass(selectedCellClass); + } } - data.$pointX1 = $cell.offset().left; - data.$pointX1width = $cell.offset().left+$cell.width(); - data.$pointY1 = $cell.offset().top; - data.$pointY1height = $cell.offset().top+$cell.height(); + var cell = $cell[0]; + data.$pointX1 = cell.offsetLeft; + data.$pointX1width = cell.offsetLeft+cell.offsetWidth; + data.$pointY1 = cell.offsetTop; + data.$pointY1height = cell.offsetTop+cell.offsetHeight; + data.$pointYheight = data.$pointY1height; + data.$pointXmin = data.$pointX1; + data.$pointXwidth = data.$pointX1width; + data.$pointYmin = data.$pointY1; data.isHighlighted = $cell.hasClass(selectedCellClass); $table.data(data); + if (event.ctrlKey) { + selectCells($table,data); + } return true; } @@ -331,7 +282,7 @@ function onOutTableClick(event){ //console.log('click (out of table)'); isMouseDown = false; - if($(event.target).closest($table).length==0) deselectAll($table); + //if($(event.target).closest($table).length==0) deselectAll($table); } } @@ -526,23 +477,54 @@ }*/ function selectCells($table, data) { - deselectAll($table); + getTableCells($table).each(function (key, cell) { - data.$elemX = $(cell).offset().left; - data.$elemXwidth = $(cell).offset().left + $(cell).width(); - data.$elemY = $(cell).offset().top; - data.$elemXheight = $(cell).offset().top + $(cell).height(); - + data.$elemX = cell.offsetLeft; + data.$elemXwidth = cell.offsetLeft + cell.offsetWidth; + data.$elemY = cell.offsetTop; + data.$elemYheight = cell.offsetTop + cell.offsetHeight; + //console.log("data",data); if ((data.$elemX >= data.$pointXmin) && (data.$elemXwidth <= data.$pointXwidth) - && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemY >= data.$pointYmin) - && (data.$elemY <= data.$pointYheight) && (data.$elemYheight >= data.$pointYheight)) { + && (data.$elemY >= data.$pointYmin) + && (data.$elemY <= data.$pointYheight) && (data.$elemYheight <= data.$pointYheight)) { $(cell).addClass(settings.selectedCellClass); } }); + if(settings.selectionSum){ + var sum,count,average; + sum = 0;count = 0;average = 0; + $table.next(".tcsCellsSelectionSum").remove(); + $table.find('.'+settings.selectedCellClass).each(function () { + count++; + var text = $(this).text(); + text = text.replace(/,/g,"."); + text = text.replace(/\s/g,""); + if(isNumber(text)){ + sum += parseFloat(text); + average = sum/count; + } + }); + var $last = $table.find('.'+settings.selectedCellClass).last(); + //console.log($last); + var $pointXmin = $last.offset().left; + var $pointYheight = $last.offset().top+$last.height(); + var style = ''; + if(settings.selectionSumBottom === false){ + style = 'style ="position:absolute;top:'+$pointYheight+'px;left:'+$pointXmin+'px;"'; + } + if(count > 1){ + $table.after('
'+ + 'Среднее:'+average+''+ + ' Кол-во:'+count+''+ + ' Сумма:'+sum+'
'); + } + } $table.trigger('selectionchange.'+ systemSettings.eventNamespace); } - + function isNumber(n) { + return !isNaN(parseFloat(n)) && isFinite(n); + } //todo: удалить параметр allTables function getSelectedCells($table) { return $table.find('.'+settings.selectedCellClass); @@ -598,4 +580,78 @@ data: $table.data(systemSettings.dataKey) } } + function coordinateManipulateMagic($table,data) { + var i = 1; + while (i > 0) { + i = 0;//wtf??? + getTableCells($table).each(function (key, cell) { + data.$elemX = cell.offsetLeft; + data.$elemXwidth = cell.offsetLeft + cell.offsetWidth; + data.$elemY = cell.offsetTop; + data.$elemYheight = cell.offsetTop + cell.offsetHeight; + + if ((data.$elemX < data.$pointXmin) && (data.$elemXwidth >= data.$pointXmin) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemYheight <= data.$pointYheight) && (data.$elemYheight > data.$pointYmin)) { + data.$temp = data.$elemX; + if (data.$temp != data.$pointXmin) { + data.$pointXmin = data.$temp; + i = 1; + } + } + + if ((data.$elemX >= data.$pointXmin) && (data.$elemX < data.$pointXwidth) && (data.$elemXwidth >= data.$pointXwidth) && (data.$elemYheight <= data.$pointYheight) && (data.$elemYheight > data.$pointYmin)) { + data.$temp = data.$elemXwidth; + if (data.$temp != data.$pointXwidth) { + data.$pointXwidth = data.$temp; + i = 1; + } + } + + if ((data.$elemY < data.$pointYmin) && (data.$elemYheight >= data.$pointYmin) && (data.$elemYheight <= data.$pointYheight) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemXwidth > data.$pointXmin)) { + data.$temp = data.$elemY; + if (data.$temp != data.$pointYmin) { + data.$pointYmin = data.$temp; + i = 1; + } + } + + if ((data.$elemY >= data.$pointYmin) && (data.$elemY < data.$pointYheight) && (data.$elemYheight >= data.$pointYheight) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemXwidth > data.$pointXmin)) { + data.$temp = data.$elemYheight; + if (data.$temp != data.$pointYheight) { + data.$pointYheight = data.$temp; + i = 1; + } + } + + if ((data.$elemX < data.$pointXmin) && (data.$elemXwidth >= data.$pointXwidth) && (data.$elemYheight <= data.$pointYheight) && (data.$elemYheight > data.$pointYmin)) { + data.$temp = data.$elemX; + if (data.$temp < data.$pointXmin) { + data.$pointXmin = data.$temp; + i = 1; + } + } + if ((data.$elemX > data.$pointXmin) && (data.$elemX < data.$pointXwidth) && (data.$elemY < data.$pointYheight) && (data.$elemY > data.$pointYmin)) { + data.$temp = data.$elemXwidth; + if (data.$temp > data.$pointXwidth) { + data.$pointXwidth = data.$temp; + i = 1; + } + } + + if ((data.$elemY < data.$pointYmin) && (data.$elemYheight >= data.$pointYmin) && (data.$elemYheight <= data.$pointYheight) && (data.$elemXwidth <= data.$pointXwidth) && (data.$elemXwidth > data.$pointXmin)) { + data.$temp = data.$elemY; + if (data.$temp < data.$pointYmin) { + data.$pointYmin = data.$temp; + i = 1; + } + } + if ((data.$elemY > data.$pointYmin) && (data.$elemYheight <= data.$pointYheight) && (data.$elemX <= data.$pointXwidth)) { + data.$temp = data.$elemYheight; + if (data.$temp > data.$pointYheight) { + data.$pointYheight = data.$temp; + i = 1; + } + } + }); + } + } })(jQuery, window, document); diff --git a/test.html b/test.html index 490d144..fadf978 100644 --- a/test.html +++ b/test.html @@ -40,7 +40,7 @@

TableCellsSelection - jQuery plugin for intuitive table's cells selection. -
+

Before without plugin

@@ -113,9 +113,9 @@

Before without plugin -

-
+ +

After with plugin

@@ -188,7 +188,84 @@

After with plugin< -

+
+
+

After with plugin

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table summaryGroup 1Group 2
Column 1Column 2Column 3Column 4Column 5Column 6
Property 1102030405060
Property 2102030405060
Property 3102030405060
Property 4102030405060
Property 5102030405060
Property 6102030405060
+
@@ -198,7 +275,8 @@

After with plugin<