Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Copy/paste from excel into ExtJs-Grid? 
:(
    Опции темы
Killer_13
  Дата 15.8.2012, 15:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Здравтсв, порыл, порыл - инфы не нашел.
Нужно сделать следующее(из названия темы видно что именно).

Есть в excel табличка с данными, мы копируем эту табличку и все данные так же ровненько вставляются в ExtJs табличку.

Кто-то делал такое?


На данный момент нашел только один инструмент который это делает корректно - SocialCalc.
http://plugindetector.com/socialcalc

Смастерил я из примеров ExtJs табличку, что дальше? Как парсить буфер? Насколько я знаю такое(ровненькое вставление данных из excel) по умолчанию в ExtJs не предусмотрено...

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

В общем много как, как, как... 

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

Это сообщение отредактировал(а) Killer_13 - 15.8.2012, 15:25
PM MAIL   Вверх
ksnk
Дата 15.8.2012, 15:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Делал. 
Вставка таблицы из Excel делается в окно wysiwyg редактора. Использовался nicedit, так как он позволяет свободно встраивать себя в элементы управления и все равно использовался в админке. Принципиальной разницы редакторов в этом смысле - нет.

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

Специально было сделано окошко по форме выглядящее как окно ввода. Сразу после вставки принятый HTML парсится на предмет наличия там тегов table, tr, td и прочих атрибутов таблицы. По colspan и rowspan определяются все склеенные строки-столбики. Ничего принципиально сложного нет.

Это сообщение отредактировал(а) ksnk - 15.8.2012, 15:36


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Killer_13
Дата 15.8.2012, 15:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Цитата(ksnk @  15.8.2012,  15:33 Найти цитируемый пост)
Делал. 
 - это звучит оч обнадежывающе... smile


Цитата(ksnk @  15.8.2012,  15:33 Найти цитируемый пост)
Принципиальной разницы редакторов в этом смысле - нет.
 - надеюсь, только если придется все это делать. то думаю разница все-таки будет. 

Тоисть с вашых слов, надеюсь правильно понял, нужно в extJs-табличку парсить содержимое буфера, отслеживать табы(значит новая ячейка), потом notepad++ показывает мне переход на другую строку "CRLF" и пошло поехало в цикле...?

PM MAIL   Вверх
ksnk
Дата 15.8.2012, 16:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Цитата(Killer_13 @  15.8.2012,  15:46 Найти цитируемый пост)
Тоисть с вашых слов, надеюсь правильно понял, нужно в extJs-табличку парсить содержимое буфера, отслеживать табы(значит новая ячейка), потом notepad++ показывает мне переход на другую строку "CRLF" и пошло поехало в цикле...?

Нет. я заодно описал и неудачную попытку с использованием простого textarea. 

Если использовать wysiwyg, то в результате copy-paste вставляется полноценная HTML таблица из которой достаточно выкинуть лишнюю офисную разметку. В моем случае достаточно было сохранить только внутреннюю структуру таблиц (склеенные ячейки) и их содержимое. Так что атрибуты строк и столбцов не рассматривались вообще.




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Killer_13
Дата 15.8.2012, 16:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Ясн, ну полюбому нужно будет найти как ExtJs буфер курит...
PM MAIL   Вверх
skyboy
Дата 15.8.2012, 19:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 3
Всего: 260



по-моему, ExtJS тебе не поможет
смотри, в буфере обмена одни и те же данные хранятся в миллионе разных форматов. касательно таблицы из Экселя, это будет:
а) текст с разделением табуляцеий/переводом строк
б) HTML с <table>/<tr>/<td>
в) бинарные данные, понятные экселю же с большим количеством специфической информации
Может, и очевидно.
Пойдем дальше: тип данных определяет программа-получатель. Т.е. браузер. Это браузер считает, что в IFrame с contentEditable(WYSIWYG-редакторы) безпроблемно можно вставить HTML. а в textarea — только текст без форматирования. Я очень-преочень сильно удивлюсь, если узнаю, что на это можно влиять из джаваскрипт кода.
потому предложение: вставлять все ж в какой-то аналог WYSIWYG, а уже после вставки  — парсить и переносить
PM MAIL   Вверх
Killer_13
Дата 15.8.2012, 22:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Цитата(skyboy @  15.8.2012,  19:51 Найти цитируемый пост)
потому предложение: вставлять все ж в какой-то аналог WYSIWYG, а уже после вставки  — парсить и переносить 
 - мне нравится то что вы советуете, - но такой вопрос, можно ли инсценировать программно вставку из буфера в какой нить WYSIWYG?
Потому что вариант Буфер-WYSIWYG-ExtJsGrid мне точно не подойдет.  
Если можно Буфер-Манипуляции с WYSIWYG на программном уровне-ExtJsGrid
Имеется ввиду, что нужно будет как-то влезть между буфером и вставкой в ExtJsGrid, чтоб сделать все необходимые манипуляции...

Такое возможно?
Пасиб.
PM MAIL   Вверх
skyboy
Дата 15.8.2012, 23:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 3
Всего: 260



Цитата(Killer_13 @  15.8.2012,  21:38 Найти цитируемый пост)
можно ли инсценировать программно вставку из буфера в какой нить WYSIWYG?

не думаю.
PM MAIL   Вверх
ksnk
Дата 15.8.2012, 23:30 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



В Excel пользователь отмечает таблицу и нажимает Сtrl-С
переходит  в окно админки, находит окно "вставки таблицы", кликает правой кнопкой мышки и выбирает "вставить".

Чудесным образом после этих телодвижений в нужном месте появляется вставленная таблица.

Чудо происходит так: 
На событии mouseover области редактирования ставится обработчик события mousemove. По выходу мышки из области - обработчик снимается. Обработчик проверяет, что содержимое области редактирования стало не пустым. В этом случае содержимое анализируется на наличие таблицы. После анализа содержимое очищается.

Всякие onpaste и onchange показали слабую применимость, тем более, что избранный визивиг использовал ифреймы для комфортной совместимости с IE6. Этот вариант (с правой кнопкой мышки) довольно успешно срабатывал на всех доступных мне вариантах броузеров.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Killer_13
Дата 16.8.2012, 11:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Цитата(ksnk @  15.8.2012,  23:30 Найти цитируемый пост)
переходит  в окно админки, находит окно "вставки таблицы", кликает правой кнопкой мышки и выбирает "вставить".
 - а как же ctrl+v? Просто мышкой мне не подойдет. Нужно реализовать как в SocialCalc.

Цитата(ksnk @  15.8.2012,  23:30 Найти цитируемый пост)
На событии mouseover области редактирования ставится обработчик события mousemove. По выходу мышки из области - обработчик снимается. Обработчик проверяет, что содержимое области редактирования стало не пустым. В этом случае содержимое анализируется на наличие таблицы. После анализа содержимое очищается.
 - не совсем понял это чудо..

Добавлено через 3 минуты и 13 секунд
Тут мне посоветовали вот такой вариант

Цитата

1. Получаем данные из clipboard'а
2. Приводим к удобоваримому виду для reader'а
3. Ext.data.Store.loadData()

PM MAIL   Вверх
ksnk
Дата 16.8.2012, 11:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386



Цитата(Killer_13 @  16.8.2012,  11:31 Найти цитируемый пост)
Тут мне посоветовали вот такой вариант

Мое "чудесное"  описание занимается только пунктом 1 -  Получаем данные из clipboard'а. Все остальные пункты считаются мной тривиальными  smile 
Цитата(Killer_13 @  16.8.2012,  11:31 Найти цитируемый пост)
- а как же ctrl+v?

Можно совместно с mousemove иметь еще и обработчик onkeydown с той-же функцией обработки. Или, вероятнее всего, правильнее будет вызывать обработчик с небольшой задержкой после события keydown...

Дело в том, что редактор ставит довольно странный набор элементов вместо того, в который "внедряется". Добраться до нужного и вписать этому нужному правильные обработчики событий не очень просто. 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Killer_13
Дата 16.8.2012, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Цитата(ksnk @  16.8.2012,  11:50 Найти цитируемый пост)
Можно совместно с mousemove иметь еще и обработчик onkeydown с той-же функцией обработки. Или, вероятнее всего, правильнее будет вызывать обработчик с небольшой задержкой после события keydown...
 - пасиб, о этом подумаю уже попозже. Сейчас первым делом нужно, хоть по какому-то собитию прочитать буфер. А потом уже и этим заниматься.
Сейчас нужно еще правильный grid na Ext замутить...


PM MAIL   Вверх
ExSoft
Дата 16.8.2012, 13:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 30
Регистрация: 29.6.2008

Репутация: 1
Всего: 1



Цитата(_webdev_)
Подскажите еще пож, можно ли средствами ExtJs создать вот такой grid?
http://www.developerextensions.com/index.p...-copypaste-grid

BTW,
Цитата(http://www.developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/excel-grid/EditorPasteCopyGrid.js)

Код

...
     Ext.DomQuery.selectNode('div[class*=x-grid3-scroller]', this.getEl().dom).style.overflowX='hidden';
    // map multiple keys to multiple actions by strings and array of codes    
    new Ext.KeyMap(Ext.DomQuery.selectNode('div[class*=x-grid3-scroller]', this.getEl().dom).id, [{
         key: "c",
         ctrl:true,
         fn: function(){         
==>    thisGrid.copyToClipBoard(thisGrid.getSelectionModel().getSelectedCellRange());
    }
     },{
      key: "v",
         ctrl:true,
         fn: function(){              
==>           thisGrid.pasteFromClipBoard();
    }
     }]);
    },
...



PM MAIL   Вверх
Killer_13
Дата 16.8.2012, 14:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



ExSoft - firebug показывает что так то вроде не много кода, но для меня как новичка в этом всем нужно будет долго курить.
Ну ничего помаленьку. Здесь вроде все и логично, но иногда не знаешь что и куда вешать, как склеивать.
Пасиб.
PM MAIL   Вверх
Killer_13
Дата 16.8.2012, 16:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1



Вот что получилось
Код

Ext.Loader.setConfig({
    enabled : true
});
Ext.Loader.setPath('Ext', '../../extjs');
Ext.require(['Ext.*']);

Ext.onReady(function() {

    Ext.create('Ext.data.Store', {
        storeId : 'myStore',
        fields : ['one', 'two', 'three'],
        data : {
            'items' : [{
                'one' : '1',
                "two" : "2",
                "three" : "3"
            },{
                'one' : '1',
                "two" : "2",
                "three" : "3"
            },{
                'one' : '1',
                "two" : "2",
                "three" : "3"
            },{
                'one' : '1',
                "two" : "2",
                "three" : "3"
            },{
                'one' : '1',
                "two" : "2",
                "three" : "3"
            },{
                'one' : '1',
                "two" : "2",
                "three" : "3"
            },]
        },
        proxy : {
            type : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title : 'Copy/Paste Grid',
        store : Ext.data.StoreManager.lookup('myStore'),
        columns : [{
            header : 'A',
            dataIndex : 'one',
            editor : 'textfield'
        }, {
            header : 'B',
            dataIndex : 'two',
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }, {
            header : 'C',
            dataIndex : 'three',
            editor : 'textfield'
        }, {
            header : 'D',
        }, {
            header : 'E',
        }, {
            header : 'F',
        }, {
            header : 'G',
        }, {
            header : 'H',
            flex:1
        }],
        
        selType : 'cellmodel',
        plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit : 2
        })],
        height : 400,
        width : 1000,
        selType: 'cellmodel',
        selModel: { mode: 'MULTI' },
        padding: 25,
        renderTo : 'grid'
    });

});



Не подскажете, почему не выделяются несколько ячеек одновременно, так сказать группа ячеек? В документации пишет, что за это отвечает свойство
Код

selType: 'cellmodel',
, но почему-то оно у меня не работает..


Можно ли создать сетку например 100х100 и не забивать данными? И с возможностью редактирования этих полей, а то когда нет данных в ячейке ничего ни вставить нельзя и так д... Воно то и логично, потому что за это отвечает Store.

Я не ошибусь если предположу такое видение....?
Нужно вешать на ячейки какой-то обработчик, потом при двойном клике если ячейка пестая, то как-то все таки открывать ее и по ее закритии писать данные в Store.
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.1673 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.