jQuery Excel и edit Grid
 

Я хочу зделать свой простенький плагин на jquery таблички или подобия екселя, не потому что нету аналогов, нашол минимум два аналога екселя и неплохой плагин jqgrid.
Основная цель скорее обучение чем создание чегото особеного.
Вообщем зделал обычную табличку, зделал <div>, который по логике должен "летать" по табличке и при щелчке мышью появлятся в нужном месте. Но непонятно:
1) Как в див вставлять текст средствами jquery или javascript, не хочется над дивом навешивать еще какуюнибудь форму.
2) Как определять куда летит див, не понимаю как определить координаты клеток таблицы.
3) Как потом этот текст потом отправлять в базу.

непонятно, зачем летающий div
upd: подсветка строки что ли?

Если я правильно понял предназначение дива:

Это раньше такой вариант в dojo кажется, использовался, или где то еще.
Щелкаешь по ячейке таблицы, див навешивается над ней и в диве input встроен. Вводишь текст, и он в ячейку записывается. Сейчас это уже по-другому делается, но и этот способ имеет свои плюсы.

а в чем плюсы?

Навешанный input/textarea может быть заметно больше ячейки таблицы. Если его встраивать в ячейку, то таблица передергивается. Иногда это не очень хорошо.

а почему бы не делать input/textarea такой же высоты/длинны как ячейка ?

Если это удобно, то никто не мешает так сделать. Только не очень удобно писать несколько строк текста в textarea высотой в одну строку.

ну в экселе так и делается:)) поэтому почему бы и нет ?

просто если неудобно писать, то и читать тоже неудобно

Я, что сказал что нет и все? Я лишь указал преимущество.

Ага. И если нужно это исправить, то вариант я предложил.

А как это сечас делается какие еще варианты существуют я только этот знаю с дивом и все?
И как этот инпут с дивом перемещается в задействованую ячейку вернее как он понимает координаты куда ему нужно попасть?

Из ячейки все стирается. В пустую, теперь уже, ячейку добавляется input и в него текст который был в ячейке. Так намного проще, поскольку не нужно высчитывать реальную позицию ячейки.

Тоесть в каждую ячейку инпут вставляется? Тоесть получается штук 100-150 инпутов. Может чтото я не так понял?

Это проделывается при каждом щелчке на ячейке. При щелчке в другом месте input удаляется, а его содержимое возвращается обратно на место.

Ищите в Jquery метод с вызовом getBoundingClientRect.

В экселе так НЕ делается, поскольку эксель показывает многострочный контрол висящий НАД сеткой и отображающий столько строчек, сколько их влезет на экран (по ширине кстати аналогично - длинные формулы показываются до границы экрана и только потом начинают переноситься на вторую строку).

Хех, "намного проще" != "намного лучше" ))
Вообще есть идея рисовать таблицу не через table, а дивами, но это уже дело вкуса.
Координаты можно вычислить просуммировав ширину и высоту предыдущих столбцов и строк, соответственно, учтя отступы.
Что из этого окажется более кроссбраузерным при меньших жертвах - это и будет критерием при выборе.

Я этого не говорил.

Согласен на 100%. Только более кроссбраузерным окажется вариант без "летающего дива".

Здравствуйте,
у меня примерно такая же разработка. В целях самообразования пишу небольшой Calc-like грид.
Хочу спросить совета у специалистов. Когда генерируется грид, каждой ячейке присваивается уникальный id вида R10C5.
Соответственно первое - это строка, второе - столбец.
Когда я делаю подсветку шапки строки и столбца приходиться определять их координаты, точнее номер строки и столбца. На данный момент я это делаю распарсиванием id с помощью регулярных выражений, примерно так:

var str = jQuery(this).attr('id').match(/R[0-9]+|C[0-9]+/ig);
var row = str[0].replace("R", "");
var col = str[1].replace("C", "");

Можно конечно id упростить до вида 10_5, тогда его можно сплитом сразу разделить на координаты
Возможно лучшим вариантом будет с помощью jQuery определять номер строки и столбца, например вот так:

var col = jQuery(this).parent().children().index(jQuery(this));
var row = jQuery(this).parent().parent().children().index(jQuery(this).parent()) * 1 + 1;

Вопрос именно по производительности. Что быстрее и лучше будет работать при размере грида 100х100 например.
Предполагаю что RegExp будет быстрее, чем jQuery будет перебирать все элементы данного узла DOM.
Также хотелось бы в конце работы выставить работу на показ для критики/оптимизации специалистами.
Из практических задач:
- разработка самого грида
- поддержка навигации и редактирования значений (в стиле Excel/LibreCalc)
- поддержка работы с формулами внутри одного грида и между несколькими
- из методов: выдергивание значений из грида (ячейка, строка, столбец, диапазон) в виде массивов и JSON.
- небольшая панель форматирования стиля текста в ячейках
- поддержка диаграмм (думаю использовать jqplot)
... что то еще наверное добавиться чуть позже.
Уже есть рабочий макет, но сейчас занимаюсь оформлением в виде плагина jQuery и оптимизацией (на сколько могу...) параллельно изучаю и доки по написанию плагинов. Информации просто море :)
Есть конечно jQuery Sheet, но по ряду причин он меня не устраивает и самообразование конечно тоже немаловажно.
Спасибо всем кто поможет!

хорошая идея, упрощай, если есть возможность. Только я бы использовал класс (иначе нельзя будет вставить несколько grid'ов на страницу) и назвал бы его как-то так: myGrid-10-5. А так как этот id используется только для определения номера ячейки, я бы эту информацию в свойствах ячеек разместил:

cell.row = 10;
cell.column = 5;

x-yuri, спасибо за помощь. Точно, надо либо класс использовать либо более уникальный id делать. С ячейкой я так и делаю, создаю объект и в его свойства записываю (если я верно вас понял). Все таки вопрос по быстродействию остался, я так понял, что распарсивание regexp-ом будет в данной ситуации быстрее?
И еще вопрос по дополнительным аттрибутам. <td> может иметь аттрибут abbr, можно ли в него например сохранять формулу. И на сколько критично с точки зрения семантики (наверное), если использовать произвольные атрибуты. Например теже координаты записывать сразу отдельно в аттрибуты row и column например вот так:

<td row="10" col="5" id="myGrid-10-5" formula="=R1C1*R10C5"></td>

Понимаю, что валидатор такое не пропустит, но все же?
Спасибо!

зачем беспокоиться об уникальности, если есть классы?

а речь идет не только об ячейках?

если ты знаешь разницу между свойствами и атрибутами, тогда правильно понял

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

добавляй префикс 'data-' к имени атрибута и все будет нормально

валидатор? А что он делает? :)