Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Copy/paste from excel into ExtJs-Grid?


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Автор: Killer_13 15.8.2012, 16:29
Ясн, ну полюбому нужно будет найти как ExtJs буфер курит...

Автор: skyboy 15.8.2012, 19:51
по-моему, ExtJS тебе не поможет
смотри, в буфере обмена одни и те же данные хранятся в миллионе разных форматов. касательно таблицы из Экселя, это будет:
а) текст с разделением табуляцеий/переводом строк
б) HTML с <table>/<tr>/<td>
в) бинарные данные, понятные экселю же с большим количеством специфической информации
Может, и очевидно.
Пойдем дальше: тип данных определяет программа-получатель. Т.е. браузер. Это браузер считает, что в IFrame с contentEditable(WYSIWYG-редакторы) безпроблемно можно вставить HTML. а в textarea — только текст без форматирования. Я очень-преочень сильно удивлюсь, если узнаю, что на это можно влиять из джаваскрипт кода.
потому предложение: вставлять все ж в какой-то аналог WYSIWYG, а уже после вставки  — парсить и переносить

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

Такое возможно?
Пасиб.

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

не думаю.

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

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

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

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

Автор: Killer_13 16.8.2012, 11:31
Цитата(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()

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

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

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

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

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

Автор: ExSoft 16.8.2012, 13:52
Цитата(_webdev_)
Подскажите еще пож, можно ли средствами ExtJs создать вот такой grid?
http://www.developerextensions.com/index.php/extjs-excel-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();
    }
     }]);
    },
...

Автор: Killer_13 16.8.2012, 14:48
ExSoft - firebug показывает что так то вроде не много кода, но для меня как новичка в этом всем нужно будет долго курить.
Ну ничего помаленьку. Здесь вроде все и логично, но иногда не знаешь что и куда вешать, как склеивать.
Пасиб.

Автор: Killer_13 16.8.2012, 16:31
Вот что получилось
Код

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.

Автор: Killer_13 16.8.2012, 16:56
update:
Хах, на счет никаких данных в колонках, то можно вот так... Работает.

Код

{
    'one' : '',
    'two' : '',
    'three' : ''
}


Но может есть какой то спец метод?

Автор: Killer_13 16.8.2012, 17:51
update:

понял что делает selType, попробовал еще "multiSelect" - не то.
какая же опция отвечает за возможность выделения нескольких ячеек? :(

Автор: ExSoft 16.8.2012, 20:39
Цитата(Killer_13 @ 16.8.2012,  17:51)
какая же опция отвечает за возможность выделения нескольких ячеек? :(

http://www.sencha.com/forum/showthread.php?189346-MULTI-Mode-for-cell-Selection-Model-Not-working

Автор: Killer_13 16.8.2012, 20:53
Цитата(ExSoft @  16.8.2012,  20:39 Найти цитируемый пост)
ложка дегтя 
 - Приплыли... :( А на счет заполнения Store в цыкле? Возможно же...

Автор: ExSoft 16.8.2012, 21:05
Цитата(Killer_13 @ 16.8.2012,  20:53)
 - Приплыли... :(

А Вам какая печаль? Насколько я понял у Вас же задача copy -> paste (excell -> ext). По сему - зачем Вам вообще селект в ext'ах?

Цитата(Killer_13 @ 16.8.2012,  20:53)
А на счет заполнения Store в цыкле? Возможно же...

В смысле?

Автор: Killer_13 16.8.2012, 21:30
Цитата(Killer_13 @ 16.8.2012,  16:31)
Вот что получилось
Код

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.

Цитата

А Вам какая печаль? Насколько я понял у Вас же задача copy -> paste (excell -> ext). По сему - зачем Вам вообще селект в ext'ах?
 - да, но хотелось бы и это реализовать, ну если оно не заложено в 4 ексте, то не попрешь...


Цитата

В смысле?


А на счет loop я имел ввиду, как цыклом занести данные в Store?
Выше видно как я заполняю Store. 

Потом я придумал, что можно вот так забивать Store->data, чтоб ячейки были и пустые и редактировались.

Код

{
    'one' : '',
    'two' : '',
    'three' : ''
}

Вопрос в том, как мне их цыклом в Сторе->data загонять?

Автор: ExSoft 16.8.2012, 22:33
Цитата(Killer_13 @ 16.8.2012,  21:30)
Вопрос в том, как мне их цыклом в Сторе->data загонять?

Код

    var
        createData = function(max) {
            var
                data = [];

            for(var i=0; i<max; ++i)
                data.push( { id: i, name: "Record# "+i } );

            return data;
        },
        store = Ext.create("Ext.data.Store", {
            fields: [
                { name: "id", type: "int" },
                "name"
            ],
            data: createData(1000)
        });

Автор: Killer_13 17.8.2012, 15:25
Что-то мне не оч получается. .:(
нужны просто пустые ячейки.

Код

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

Ext.onReady(function() {
    

    var createData = function(max) {
        var data = [];
        for (var i = 0; i < max; ++i)
            data.push({
                id : i,
                name : ''
            });
        return data;
    }
    
    var  myStore = Ext.create("Ext.data.Store", {
        fields : [{name : 'a'},{name : 'b'},{name : 'c'},{name : 'd'},{name : 'e'},{name : 'f'},{name : 'g'},{name : 'h'},],
        data : createData(1000)
    }); 
    
    
        Ext.create('Ext.grid.Panel', {
        title : 'Copy/Paste Grid',
        store : Ext.data.StoreManager.lookup('myStore'),
        columns : [{
            header : 'A',
            dataIndex : 'a',
            editor : 'textfield'
        }, {
            header : 'B',
            dataIndex : 'b',
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }, {
            header : 'C',
            dataIndex : 'c',
            editor : 'textfield'
        }, {
            header : 'D',
            dataIndex : 'd',
            editor : 'textfield'
        }, {
            header : 'E',
            dataIndex : 'e',
            editor : 'textfield'
        }, {
            header : 'F',
            dataIndex : 'f',
            editor : 'textfield'
        }, {
            header : 'G',
            dataIndex : 'g',
            editor : 'textfield'
        }, {
            header : 'H',
            dataIndex : 'h',
            editor : 'textfield',
            flex:1
        }],
        
        selType : 'cellmodel',
        plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit : 2
        })],
        height : 400,
        width : 1000,
        selType: 'cellmodel',
        selModel: { mode: 'MULTI' },
        multiSelect:'true',
        padding: 25,
        renderTo : 'grid',
        listeners:{
            cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
             console.log('Column: ',iView.getGridColumns()[iColIdx].dataIndex);
             
            }
        }
    });

    
});

Автор: ExSoft 18.8.2012, 00:15
Код

    var createData = function(max) {
        var
          data = [],
          o;

        for (var i = 0; i < max; ++i)
        {
            o = {};
            for(var j=0x061; j<0x069; ++j)
                o[String.fromCharCode(j)] = "";
            data.push(o);
        }

        return data;
    }

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)