eGrid

[LokiDi L0ck]

http://js.dark-souls.ru/egrid/

Как и обещал, выкладываю. Может кому будет интересно для общего образования. Сортировку и перемещение заголовков не делал, лень)

Изменение размеров колонок нормально работает в ff, ie.

[ProfiT]

http://js.dark-souls.ru/egrid/

Как и обещал, выкладываю. Может кому будет интересно для общего образования. Сортировку и перемещение заголовков не делал, лень)

Изменение размеров колонок нормально работает в ff, ie.

Круто Спасибо!

Пригодится как раз для одного проекта...

[LokiDi L0ck]

Заполнение полей происходит через метод

.setCellData([
 ['cell1','cell2'], //row1
 ['cell1','cell2'] //row2
]);

Массив можно формировать на сервере.

Но минус - такой способ медленно работает, т.к. при большом количестве строк ява-скрипт созда?т оные прокручивая массив в цикле.

Гораздо большей скорости можно добиться перенеся логику формирования таблицы на серверные языки (т.е. перенести то, что я сделал через .write() ).

В реальных проектах врядли можно использовать (по крайней мере в нынешнем его виде), скрипт делался в качестве эксперимента.

[ProfiT]

Заполнение полей происходит через метод

.setCellData([
 ['cell1','cell2'], //row1
 ['cell1','cell2'] //row2
]);

Массив можно формировать на сервере.

Но минус - такой способ медленно работает, т.к. при большом количестве строк ява-скрипт созда?т оные прокручивая массив в цикле.

Гораздо большей скорости можно добиться перенеся логику формирования таблицы на серверные языки (т.е. перенести то, что я сделал через .write() ).

В реальных проектах врядли можно использовать (по крайней мере в нынешнем его виде), скрипт делался в качестве эксперимента.

Мне понравилась реализация изменения размеров в столбиках))

А что сильно думаешь тормозить будет?

В проекте будет подгрузка из прайсов, а они немаленькие...

[Tokolist]

2 LokiDi L0ck

уууу! респект!

кстати не могу найти предыдущей темки, где мы обсуждали такие штуки, поэтому запостю сюда

http://www.eyeos.info/eyeOS/

http://www.youos.com/

[ProfiT]

2 LokiDi L0ck

уууу! респект!

кстати не могу найти предыдущей темки, где мы обсуждали такие штуки, поэтому запостю сюда

http://www.eyeos.info/eyeOS/

http://www.youos.com/

Первый че-то не грузится, второй требует авторизации.

[rash]

А у меня самый первый не грузится... -/

А вот eyeOS - очень эффектно -)

[LokiDi L0ck]

А что сильно думаешь тормозить будет?

2ProfiT, если добавлять строки через js, то сильно. При 200 и более IE возможно отдаст концы )

Grid прив?л в учебных целях. В одной из прошлых тем как-то обещал выложить примерную реализацию. Если тебе нужен грид для проекта, рекомендую посмотреть в сторону extjs.

[ProfiT]

А что сильно думаешь тормозить будет?

2ProfiT, если добавлять строки через js, то сильно. При 200 и более IE возможно отдаст концы )

И слава богу

Grid прив?л в учебных целях. В одной из прошлых тем как-то обещал выложить примерную реализацию. Если тебе нужен грид для проекта, рекомендую посмотреть в сторону extjs.

а где про него инфу можно пробить, а то там как раз не

[LokiDi L0ck]

Набираешь в гугле - extjs. Первая ссылка твоя. В документации по API там вс? подробно расписано.

[Tokolist]

2 ProfiT, rash

Все нормально, все грузится.

для начала юзаем Фокс, ибо в Опере нормально не пашет, а ИЕ не юзаем из принципа

для http://www.eyeos.info/eyeOS/ жмем ссылочку New User, создаем учетную запись и логинимся

для https://www.youos.com/ жмем ссылочку Try a demo

2 LokiDi L0ck

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

почему используете квиркс моде (вроде можно было сделать валидно)?

почему в каждой ячейке таблицы еще и див?

лучше ИМХО вместо setCellData сделать что-то типа addRow для добавления одной строки... может немножко тяжелей будет в реализации, но зато удобней

а так в целом мне очень нравится

[LokiDi L0ck]

почему используете квиркс моде (вроде можно было сделать валидно)?

Можно с любым доктайпом, когда тестировал, вроде везде работало нормально.

почему в каждой ячейке таблицы еще и див?

Потому что лень придумывать хитрости =)

При уменьшении размера колонки в диве прячется текст (overflow: hidden;). Однако IE умеет прятать текст, даже если этот стиль установлен непосредственно для ячейки.

лучше ИМХО вместо setCellData сделать что-то типа addRow

Нет. Реализация будет также проста как и с setCellData. Но в этом случае, при реализации таблицы, прид?тся писать много строк типа:

grid.addRow['cell-1', 'cell-2'];

grid.addRow['cell-1', 'cell-2'];

...

grid.addRow['cell-n', 'cell-n'];

А это лишний текст.

Скорость реализации таблицы можно увеличить в несколько раз с помощью php =) Написать класс, полностью индентичный js'овскому, который будет е? "рисовать". Браузер сразу получит нормальную таблицу, и ява скрипту не нужно будет обрабатывать гигантские массивы и рендеринг)

[WingedFox]

А я тут, как раз, сделал другую "сторону Луны" =)

Двигло для асинхронной сортировки и рендеринга таблиц. Прекрасно себя чувствует при нескольких тысячах строк.

Правда я прототайп не переношу.... ;-)

hxxp://debugger.ru/temp/3/test.html

[Tokolist]

При уменьшении размера колонки в диве прячется текст (overflow: hidden;). Однако IE умеет прятать текст, даже если этот стиль установлен непосредственно для ячейки.

Я вот решил немножко поработать на данной проблемой. Вот результат, правда работает только в квиркс моде, но ИМХО это лучше чем дополнительные дивы, которые жрут память

<html>
<head>
<title></title>
<style type="text/css">
table td {
 color: #f00;
 white-space: nowrap;
 overflow: hidden;
}

table {
 table-layout: fixed;
}
</style>
</head>
<body>
<table border="1" width="30">
<tr>
<td width="30" height="20">
testing no wrap for a very long string
</td>
</tr>
</table>
</body>
</html>

Нет. Реализация будет также проста как и с setCellData. Но в этом случае, при реализации таблицы, прид?тся писать много строк типа:

grid.addRow['cell-1', 'cell-2'];

grid.addRow['cell-1', 'cell-2'];

...

grid.addRow['cell-n', 'cell-n'];

А это лишний текст.

А если я захочу добавить динамически строку уже после генерации таблицы, то мне прийдется генерировать, как я понял, всю таблицу заново?

[LokiDi L0ck]

2WingedFox, js-мОньяг

К сожалению я очень ленивый, потому prototype меня всем устраивает)

2Tokolist, способ с table-layout: fixed; не подходит, его я пробовал одним из первых. Но специфика изменения размеров колонок таблицы не позволяет его использовать - колонки и шапка начинают себя вести не так как ожидается.

А если я захочу добавить динамически строку уже после генерации таблицы, то мне прийдется генерировать, как я понял, всю таблицу заново?

А, понял о ч?м ты) Да, динамическую работу со строками я не делал вс? по той же причине любви к prototype

[WingedFox]

LokiDi L0ck

Начальство может и не так прогнуть... сказали, что пользователь должен комфортно работать с таблицами 1500..3000 строк, вот и маньячу ;-)

Более подробно по этому вопросу можно пообщаться в теме http://forum.dklab.ru/js/other/Sverhbistra...vkaTablits.html

[Tokolist]

2WingedFox, js-мОньяг

+1

[WingedFox]

Подыму тему про маньяков повыше =)

Сортировка с практически линейной зависимостью: http://debugger.ru/blog/bystraja_sortirovka_tablic

Переписал почти полностью, получилось значительно веселее.

[LokiDi L0ck]

Кстати по двум колонкам сортировать не такая уж и редкость.

Например есть список клиентов - Компания в которой работает клиент | Имя клиента. Необходимо чтобы список выводился отсортированным по компаниям - и при этом в каждой компании должны быть отсортированы имена)

Так что вещь нужная)

[WingedFox]

LokiDi L0ck

Конечно нужная =)

В общем, после небольшой оптимизации -- прикрутил реверс-индекс -- сортировка укладывается в

Теперь буду оптимизировать инициализацию.

[aleksejm]

А не могли бы вы выложить кусок кода который отвечает именно за изменение размера мстолбцов

[LokiDi L0ck]

2aleksejm, слишком большой кусок текста.

http://js.dark-souls.ru/egrid/eGrid.v0.1b.js

Код находиться в объекте, со строк:

new Draggable(this.headToddler[i], {

Метод "snap" этого объекта отвечает за изменение и контроль ширины перемещаемой шапки.

Метод "starteffect" запускается один раз, при начале изменения ширины, отвечает за правильную подсветку шапки.

Метод "endeffect" запускается по окончании изменения размера шапки, отвечает за изменение размеров колонки измененной шапки и разброс невидимых слоев-ползунков по середине каждого разделителя в шапке.