Добавить границы вокруг гибкого handsontable

Я хочу сделать handsontable, начиная с 1 отдельной ячейки. Затем мы можем добавлять/удалять строки/столбцы с помощью контекстного меню или даже копировать данные из файла Excel. Я фиксирую максимальный размер . Так что, если есть много данных, у handsontable будет прокрутка.Добавить границы вокруг гибкого handsontable

Теперь я хочу добавить границы вокруг таблицы для всех случаев: 1) когда таблица не достигает своего максимального размера, границы должны быть JUST вокруг ячеек; 2) когда таблица достигает максимального размера, границы должны быть примерно максимального размера. Я сделал это JSBin, которая удовлетворяет второй случай, но не первый:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.css"> 
    <style> 
    .handsontable { border: 1px solid red; } 
    </style> 
</head> 
<body> 
    <div id="example4" class="hot head-gap handsontable htRowHeaders htColumnHeaders"></div> 
</body> 
</html>

JavaScript:

document.addEventListener("DOMContentLoaded", function() { 
    function getData() { 
    return [ 
     [""] 
    ]; 
    } 

    var 
    example4 = document.getElementById('example4'), 
    hot4; 

    hot4 = new Handsontable(example4, { 
    data: getData(), 
    width: 104, 
    height: 66, 
    colWidths: 47, 
    rowHeights: 23, 
    rowHeaders: false, 
    colHeaders: false, 
    contextMenu: true, 
    contextMenuCopyPaste: { 
     swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf' 
    } 
    }); 
});

Кто-нибудь есть решение?

Edit 1: После ответа Serg Chernata:

Edit 2: После ответа FAP, я вижу две проблемы:

1) красные бордюры даже вокруг контекстного меню:

2) красные границы находятся за пределами синих границ данных:

источник

2017-01-27 Anonymous

кажется, что вы не исправили ** максимальный размер ** таблицы, но вместо этого вы установили свой ** размер **, поэтому он всегда 104 x 66. Таким образом, ваша таблица не будет достигать ничего, поскольку он не изменит его измерение. Поэтому условие применения границ в некоторых определенных сценариях кажется несущественным. – robjez

Таблица может содержать много данных, например, при копировании большой таблицы из файла Excel. Я хочу установить лимит макета с прокруткой для этого случая. –

Вы играли со средствами массовой информации, чтобы решить эту проблему? – robjez

У меня есть кое-что добавлено и опубликовано в JSBin. Я добавил css и включил jquery в ваш оригинальный html для запросов, связанных с dom. Дайте мне знать, помогает ли это. Вот код JS.

document.addEventListener("DOMContentLoaded", function() { 
function getData() { 
return [ 
    [""] 
]; 
} 

var 
example4 = document.getElementById('example4'), 
hot4; 

hot4 = new Handsontable(example4, { 
data: getData(), 
width: 104, 
height: 66, 
colWidths: 47, 
rowHeights: 23, 
rowHeaders: false, 
colHeaders: false, 
contextMenu: true, 
contextMenuCopyPaste: { 
    swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf' 
}, 
afterRender: function() { 
    var item = $('.ht_master.handsontable .wtHolder')[0]; 
if (item.scrollHeight > item.clientHeight || item.scrollWidth > item.clientWidth) { 
    $('.handsontable').css('border', '1px solid red'); 
    $(item).find('.htCore').css('border', '0px none white'); 
} else { 
    $(item).find('.htCore').css('border', '1px solid red'); 
} 


} 
}); 
});

источник

2017-02-05 02:33:36 debatanu

Спасибо, пожалуйста, см. Мое обновление ... –

Разве вы не хотите границ вокруг контекстного меню? – debatanu

Мне не нужны границы вокруг контекстного меню ... –

Предполагая, что я правильно понял ваши требования, мы можем, вероятно, сделать это с немного CSS:

#example4{ 
    max-width: 104px; 
    max-height: 66px; 
    display: inline-block; 
}

Примечание. Я удалил ширину и высоту из конфигурации dandsontable. Таким образом, мы можем масштабировать контент до определенного значения max-width и max-height.

http://jsbin.com/qehexiyidu/edit?html,css,js,output

источник

2017-01-30 21:00:45

Пожалуйста, посмотрите мое обновление, это то, что я получил .. . Таблица выглядит слишком маленькой ... –

Мой плохой, удалите переполнение: прокрутите. Я обновил свой пример. Я не уверен, как вы хотите справиться с прокруткой. http://jsbin.com/qehexiyidu/edit?html,css,js,output –

Я хочу сохранить прокрутку, когда в таблице много ячеек. Вот почему я установил максимальный размер. Ваш пример не позволяет прокручивать ... –

У меня есть решение, которое, я считаю, охватить все свои потребности с помощью после создания/удаления событий цв/строк, но она не совершена.

То, что я сделал динамически изменяя ширину и высоту таблицы после одного из событий, например:

hot4.addHook('afterCreateCol', function() { 
    setTable(); 
});

Если одна или обе значение выше предела, они будут оставаться на этом пределе. (104 х 66 в вашем примере)

Таким образом, основная функция будет:

function setTable() { 
    if(hot4.getColWidth()*hot4.countCols()<208) 
    hot4.updateSettings({ 
     width: hot4.getColWidth()*hot4.countCols() 
    }); 
    else 
    hot4.updateSettings({ 
     width: 208 
    }); 

    if(hot4.getRowHeight()*hot4.countRows()<132) 
    hot4.updateSettings({ 
     height: hot4.getRowHeight()*hot4.countRows() 
    }); 
    else 
    hot4.updateSettings({ 
     height: 132 
    }); 
}

(я использовал 208 х 132 для моих глаз ..)

Обратите внимание, что я загружаю данные после создания таблицы для запуска события afterLoadData.

Единственная оставшаяся проблема (я сказал, что она не идеальна ..) будут полосами прокрутки. Я не знаю почему, но даже если данные подходят, полоса прокрутки присутствует под пределом. It's supposed to be fixed, но, видимо, нет ... (Мне очень интересно, если вам удастся это исправить)

В любом случае, я думаю, что, начиная с этого решения, вам может удастся достичь именно того, что вы хотите, поэтому я решил поделиться им с вами в текущем состоянии. Вы можете найти рабочий пример в этом JSBin.

Edit 1: Скриншот "вопрос ScrollBars"

Даже если 2х2 клетки подходят в таблице, скроллбары присутствуют.

источник

2017-02-01 19:37:46 fab

Я не понимаю, что вы подразумеваете под «даже если данные подходят, полоса прокрутки присутствует под пределом», см. Мое обновление ... –

Используйте хром, и вы увидите что я имею в виду, это действительно отличается от Firefox. Кроме того, да, я раньше не заметил границы для контекстного меню, но он также присутствует в вашем примере в вашем вопросе. Не знаю, как я пропустил это – fab

Я использую хром ... –

Добавить границы вокруг гибкого handsontable

ответ

Смежные вопросы