Кастомизация
09
Авг
6

Новый тип данных – Таблицы

В последнее время что-то в CRM появляется много новых «типов» данных 🙂 Заведем еще один – Таблицы. Будет он представлять собой что-то вроде одного листа Excel, но только на форме CRM. Естественно через кастомизацию CRM этого не добится , поэтому воспользуемся тремя вещами:

  • Полем с типом ntext для хранения табличных данных;
  • iFrame’ом для подставновки кастомной страницы;
  • И самое главное – jQuery для реализации самой логики построения таблицы. Но не чистым jQuery, а двумя его плагинами: Flexigrid и jqGrid.

Для начала займемся общей кастомизацией:

  • Создайте в CRM для какого-либо объекта поле с типом ntext, именем new_payment и максимальным числом хранимых символов;
  • Разместите его на форме объекта;
  • Создайте в CRM запись этого объекта и заполните это поле примерно такими данными:
    10.08.2010;QF120;2000;EUR;Перевод на e-mail в WMZ
    12.08.2010;SF1920;12500;EUR;Платеж по кредиту
    19.08.2010;SV978;1050;RUR;Платеж по кредиту за автомобиль
    02.09.2010;ZO567;450;RUR;Оплата книги
    05.09.2010;FG456;2500;USD;Оплата путевка на Мальдивы
    16.09.2010;CX1120;21000;RUR;Взнос да 1 семестр обучения
    10.10.2010;FC870;2000;RUR;Перевод Yandex-деньги в RUR
    18.11.2010;FR2341;2000;RUR;Оплата коммунальных платежей за 2 квартал
    21.11.2010;KJ112;4200;EUR;Путевка на горнолыжный курорт
    27.11.2010;SN1501;2000;USD;Покупка плазмы Toshiba
    

Flexigrid

Начнем с самой простой реализации таблиц:

  • Скачайте и поместите содержимое архива flexigrid.zip в папку ISV сайта CRM. Самая главная тут страничка index.html, которая агригирует в себе всю логику. Вот ее содержимое:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Flexigrid</title>
    <!-- Подключаем внешние стили и js-файлы в которых реализована основная логика работы -->
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css" />
    <script type="text/javascript" src="lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="flexigrid.js"></script>
    <script type="text/javascript">
        // Функция, которая меняет размер таблицы в зависимости от размеров окна
        z = 0;
        function OnResize() {
            if (z == 2) {
                document.body.firstChild.childNodes[6].style.height = (document.documentElement.clientHeight - 116) + 'px';
                z = 0;
            } else {
                z += 1;
            };
        }
        // При загрузке страницы подгоняем размер таблицы под размеры окна и назначем функцию, управляющую размерами таблицы при ресайзе окна
        function OnLoad() {
            document.body.firstChild.childNodes[6].style.height = (document.documentElement.clientHeight - 116) + 'px';
            window.onresize = OnResize;
        }
    </script>
    </head>
    
    <body onload="OnLoad()">
    <table id="flex1">
        <tbody>
        </tbody>
    </table>
    
    <script type="text/javascript">
        // Функция динамически добавляющая строки в таблицу
        tBody = document.getElementById("flex1").getElementsByTagName('tbody')[0];
        
        function addNewRow(td1, td2, td3, td4, td5) {
            var newTD1 = document.createElement('td');
            newTD1.innerHTML = td1;
            var newTD2 = document.createElement('td');
            newTD2.innerHTML = td2;
            var newTD3 = document.createElement('td');
            newTD3.innerHTML = td3;
            var newTD4 = document.createElement('td');
            newTD4.innerHTML = td4;
            var newTD5 = document.createElement('td');
            newTD5.innerHTML = td5;
            
            var newTR = document.createElement('tr');
            newTR.appendChild(newTD1);
            newTR.appendChild(newTD2);
            newTR.appendChild(newTD3);
            newTR.appendChild(newTD4);
            newTR.appendChild(newTD5);
            
            tBody.appendChild(newTR);
        };
        
        // Вытаскиваем с формы CRM значение поля new_payment, парсим его и формируем из его данных строки и ячейки таблицы
        var arr = window.parent.document.crmForm.all.new_payment.DataValue.split(/\n/g);
        for (var i=0 ; i < arr.length ; i++) {
            line = arr[i].split(';');
            addNewRow(line[0],line[1],line[2],line[3],line[4]);  
        }
    
        // Заменяем обычную HTML-таблицу на Flexigrid
        $("#flex1").flexigrid
        ({
            colModel: [
                { display: 'Дата', name: 'date', width: 100, sortable: true, align: 'center' },
                { display: 'Номер платежа', name: 'no', width: 100, sortable: true, align: 'left' },
                { display: 'Сумма', name: 'amount', width: 100, sortable: true, align: 'left' },
                { display: 'Валюта', name: 'corrency', width: 100, sortable: true, align: 'left' },
                { display: 'Описание', name: 'description', width: 200, sortable: true, align: 'left' }
            ],
            buttons: [
                { name: 'Добавить', bclass: 'add', onpress: test },
                { name: 'Удалить', bclass: 'delete', onpress: test },
                { separator: true }
            ],
            searchitems: [
                { display: 'Дата', name: 'date' },
                { display: 'Номер платежа', name: 'no', isdefault: true }
            ],
            sortname: "date",
            sortorder: "asc",
            usepager: true,
            title: 'Платежи',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            height: 300
        });
    
        // Функция вызваемая при нажатии на кнопки Добавить и Удалить
        function test(com,grid)
        {
            if (com == 'Удалить')
            {
                confirm('Удалить ' + $('.trSelected',grid).length + ' строк?')
            }
            else if (com == 'Добавить')
            {
                alert('Добавить новую строку');
            }			
        }
    </script>
    
    </body>
    </html>
    

    Из чего оно состоит:

    • Сначала подгружаются внешние файлы ответственные за реализацию основной логики;
    • Далее объявляются две функции: одно меняет размер таблицы при изменении размеров окна, а вторая только призагрузке страницы + назначает функцию на событие onresize окна;
    • Пустая HTML-таблица;
    • Функция динамически заполняющая таблицу строками с данными;
    • Построчно считываем данные из поля new_payment, парсим их и помещаем в строки и ячейки таблицы;
    • Ну, и когда HTML-таблица уже готова, переделываем ее в Flexigrid.
  • Добавьте на форму нужного объекта новую вкладку, а на нее поместите iFrame с такими параметрами:
    • Имя: любое;
    • URL: \ISV\flexigrid\index.html;
    • Снимите галку запрещающую использование сценариев;
    • Разверните фрейм на всю доступную область и уберите границы.
  • За сим все 🙂 можете публиковать и смотреть на табличку 🙂




jqGrid

Это более функциональная таблица, в чем Вы можете убедится из ее документации:

  • Скачайте и поместите содержимое архива jqgrid.zip в папку ISV сайта CRM. Как и в предыдущем случае главная страцница – это index.html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jqGrid</title>
    <!-- Подключаем внешние файлы плагина jqGrid -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui-start/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.searchFilter.css" />
     
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        // Функция разворачивает таблицу на всю область окна при изменении размеров окна
        z = 0;
        function OnResize() {
            if (z == 2) {
                document.body.firstChild.childNodes[2].childNodes[2].style.height = (document.documentElement.clientHeight - 74) + 'px';
                z = 0;
            } else {
                z += 1;
            };
        }
        // Функция меняет размер таблицы в соответствии с размерами окна при загрузке страницы
        function OnLoad() {
            document.body.firstChild.childNodes[2].childNodes[2].style.height = (document.documentElement.clientHeight - 74) + 'px';
            window.onresize = OnResize;
            
            document.body.firstChild.style.width = '100%';
            document.body.firstChild.childNodes[2].style.width = '100%';
            sdocument.body.firstChild.childNodes[2].childNodes[1].style.width = '100%';
            document.body.firstChild.childNodes[2].childNodes[2].style.width = '100%';
            document.body.firstChild.childNodes[4].style.width = '100%';  
        }
    </script>
    
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
    
    <script type="text/javascript">
        // Вытаскиваем с формы CRM данные поля new_payment, разбираем его на строки и столбцы и помещаем из в массив
        var arr = window.parent.document.crmForm.all.new_payment.DataValue.split(/\n/g);
        var mydata = new Array;
        for (var i = 0; i < arr.length; i++) {
            line = arr[i].split(';');
            mydata[i] = { date: line[0], no: line[1], amount: line[2], corrency: line[3], description: line[4] };
        }
        // Конвертируем пустую таблицу list в jqGrid и заполняем ее данными из массива
        jQuery(document).ready(function() {
            jQuery("#list").jqGrid({
                colNames: ['Дата', 'Номер платежа', 'Сумма', 'Валюта', 'Описание'],
                colModel: [
                  { name: 'date', index: 'date', width: 100, align: 'center' },
                  { name: 'no', index: 'no', width: 120, align: 'left' },
                  { name: 'amount', index: 'amount', width: 100, align: 'right' },
                  { name: 'corrency', index: 'corrency', width: 100, align: 'left' },
                  { name: 'description', index: 'description', width: 200, align: 'left' }
                ],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'date',
                sortorder: 'desc',
                viewrecords: true,
                caption: 'Платежи',
                loadtext: 'Загрузка...'
            }).ready(function() {
                for (var i = 0; i <= mydata.length; i++)
                    jQuery("#list").jqGrid('addRowData', i + 1, mydata[i]);
            });
        });
    </script>
    
     
    </head>
    <body onload="OnLoad()">
        <table id="list"></table> 
        <div id="pager"></div> 
    </body>
    </html>
    

    Ее содержимое:

    • Подключаем базовые внешние файлы;
    • Обявляем две функции: одна отвечает за именение размеров таблицы на всю доступную область при загрузки, а вторая при каждом изменении размеров окна;
    • Далее вытаскиваем данные из поля new_payment и помещаем их в массив;
    • Конвертируем пустую таблицу в jqGrid и заполняем ее данными из массива.
  • Добавьте на форму объекта новую вкладку и поместите на нее iFrame с такими параметрами:
    • Имя: любое;
    • URL: \ISV\jqgrid\index.html;
    • Снимите галку запрещающую использование сценариев;
    • Разверните фрейм на всю доступную область и уберите границы.
  • Публикуем и смотрим 🙂



P.S. И в первом и во втором случае представлена только сама таблица, без реализации какого-либо дополнительного функционала: добавление, удаление строк, поиск и т.д. Но Вы вполне можете добавить необходимые функции обратившись веб-страницам этих плагинов!

Комментарии (6)
  • webmaster 09.08.2010

    Доброго времени суток 🙂
    А можно ли каким-либо образом выгрузить информацию из таблицы как таблицу excel? Чтобы это происходило примерно как в самой системе(кнопка на риббоне: выгрузка в excel)

  • slivka_83 09.08.2010

    Здасьте 🙂

    Для этого нужно программировать… и не мало 🙂

  • дима 09.08.2010

    А какой лучше выбрать плагин flexgrid или jqGrid ?

  • slivka_83 09.08.2010

    jqGrid значительно мощьнее, но и документация по нему больше.

  • Влад 09.08.2010

    А почему через вебресурсы не реализовали и саму страницу и плагины необходимые для её работы?

  • slivka_83 09.08.2010

    Потому что это CRM 4.0 🙂 Там небыло никаких Веб-ресурсов 🙂

*

code