jqGridPHP - таблицы на ajax без головной боли

[ua2fff]

Установил пример на OpenServer V5.2.3 Пример запустился, все работает, за исключением Upload файлов на сервер. Я сильно подозреваю, что проблема в настройках сервера. Может кто сталкивался с этим, подскажите на что там нужно обратить внимание?

 

[ua2fff]

Отвечу себе сам. Дело было в сорце... jQuery.jqGrid.js v4.6.0 которая у меня стояла изначально не делает Upload файлов на сервер, поставил v4.4.3 появился Upload.

 

[DieKon]

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

 'ddate' => array('label' => 'Дата создания',
                'width' => 50,
                'align' => 'center',
                'formatter'=>"date",
                'searchoptions' => array('dataInit' => $this->initDatepicker(array(
//                    'dateFormat' => 'dd.mm.yy', <- требуется такой вид даты, другой вид, для проверки, думал, вдруг в нем проблема
                    'dateFormat' => 'yy-mm-dd',
                    'changeMonth' => true,
                    'changeYear' => true,
//                    'minDate' => '01.01.2011', <- требуется такой вид даты, другой вид, для проверки, думал, вдруг в нем проблема
                    'minDate' => '2011-01-01',
                    'firstDay' => '1',
                    'monthNamesShort' => array("Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"),
                    'dayNamesMin'     => array("Вс","Пн","Вт","Ср","Чт","Пт","Сб"),
//                    'maxDate' => '2000-01-01',
                    'onSelect' => new jqGrid_Data_Raw('function(){$grid[0].triggerToolbar();}'),
                ))),
                'search_op' => 'date',
            ),

в консоли выдает:
jqgrid-ext.js:23 Uncaught TypeError: Cannot read property 'errcap' of undefined
at Object.errorHandler (jqgrid-ext.js:23)
at HTMLTableElement.loadComplete (jqgrid-ext.js:9)
at Object.success (jquery.jqGrid.min.js:225)
at o (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at w (jquery.min.js:4)
at XMLHttpRequest.d (jquery.min.js:4)

Очень надеюсь на помощь и прошу ответы писать достаточно подробные, т.к. с гридом я еще очень мало знаком.

 

[DieKon]

Если кому-то понадобится, то вот мое решение данной проблемы:
Удалось решить проблему удалив строки 'formatter'=>"date", и 'search_op' => 'date',
Но работает только с датой формата 'yy-mm-dd'.
Если кто-то может подсказать более правильное решение, то буду благодарен.

 

[WMix]

не форматируй на сервере, клиенту шли всегда iso и ожидай iso. форматирование это задача клиента

 

[ua2fff]

@DieKon Если нужно на стороне сервера, тогда так: в БД дата хранится в Y-m-d, Datepicker так же подставляет дату в этом же формате. Для вывода в грид преобразуем дату в формат дд.мм.гггг. При редактировании в форму пользователь может ввести дату в любом формате, как вручную, так и Datepicker-ом, перед записью в БД проверяем формат и если он не Y-m-d, преобразуем. Вот код:

        #Set columns
        $this->cols = array(

           'QSO_DATE' => array('label' => 'Date',
                'width' => 8,
                'align' => 'center',
                'editable' => true,
                'formatter' => 'date',
                'editoptions' => array('dataInit' => $this->initDatepicker(array(
                        'changeMonth' => true,
                        'changeYear' => true,
                        'dateFormat' => 'yy-mm-dd',
                        'minDate' => '2016-10-12',
                        'maxDate' => '2026-10-12',
                ))),
                'searchoptions' => array('dataInit' => $this->initDateRangePicker(array(
                    'posX' => '530px',
                    'posY' => '70px',
                    'earliestDate' => '-20',
                    'latestDate' => '+20',
                    'dateFormat' => 'yy-mm-dd',
                    'onChange' => new jqGrid_Data_Raw('dateRangePicker_onChange'),
                    'presetRanges' => array(),
                    'datepickerOptions' => array(
                           'changeMonth' => true,
                           'changeYear' => true,
                           'dateFormat' => 'yy-mm-dd',
                           'minDate' => '2016-10-12',
                           'maxDate' => '2026-10-12',
                    ),
                ))),
                'search_op' => 'date_range',
            ),
...................................................................
...................................................................

protected function operData($data)
            {

// Если дата из формы редактирования пришла в формате дд.мм.гггг
// перед записью в БД преобразуем ее в формат Y-m-d

        if(strpos($data['QSO_DATE'], '.'))
        {
    $data['QSO_DATE'] = date('Y-m-d', strtotime($data['QSO_DATE']));

            if(!$data['QSO_DATE'])
            {
                throw new jqGrid_Exception('Не правильный формат даты');
            }

    }

...................................................................
...................................................................
 
                return $data;
            }

    protected function searchOpDateRange($c, $val)
    {
        //--------------
        // Date range
        //--------------

        if(strpos($val, ' - '))
        {
            list($start, $end) = explode(' - ', $val, 2);

            $start = strtotime(trim($start));
            $end = strtotime(trim($end));

            if(!$start or !$end)
            {
                throw new jqGrid_Exception('Invalid date format');
            }

            #Stap dates if start is bigger than end
            if($start > $end)
            {
                list($start, $end) = array($end, $start);
            }

            $start = date('Y-m-d', $start);
            $end = date('Y-m-d', $end);

            return $c['db'] . " BETWEEN '$start' AND '$end'";
        }

        //------------
        // Single date
        //------------

        $val = strtotime(trim($val));

        if(!$val)
        {
            throw new jqGrid_Exception('Invalid date format');
        }

        $val = date('Y-m-d', $val);

        return "DATE({$c['db']}) = '$val'";
    }

    protected function initDatepicker($options = null)
    {
        $options = is_array($options) ? $options : array();

        return new jqGrid_Data_Raw('function(el){$(el).datepicker(' . jqGrid_Utils::jsonEncode($options) . ');}');
    }
 
    protected function initDateRangePicker($options = null)
    {
        $options = is_array($options) ? $options : array();

        return new jqGrid_Data_Raw('function(el){$(el).daterangepicker(' . jqGrid_Utils::jsonEncode($options) . ');}');
    }

На клиентской стороне:

..............................................
    <?= $rendered_grid ?>

    function dateRangePicker_onChange() {
        var $input = $('#gs_data');
        var old_val = $input.val();

        setTimeout(function () {
            if ($input.val() == old_val) {
                $grid[0].triggerToolbar();
            }
        }, 200);
    }
</script>
..........................................................

Еще один момент. Если у вас в грид дата выводиться в формате YY-mm-dd, а вам нужно дд.мм.гггг откройте файл templates/_layout.php и закоментируйте строку:

        //$.jgrid.formatter.date.newformat = 'ISO8601Short';

Если вам не нужно редактирование, уберите из ColModel -> editoptions и преобразование даты в operData.

Вот собственно все, что касается обработки даты. Если будут вопросы, спрашивайте, чем смогу тем помогу.

 

[Kraken9]

Столкнулся с задачей окрашивать столбец простой таблицы jqSimple по условию, если число с столбце меньше нуля, то красный текст, если больше нуля - зеленый. Написал простой js с условиями. К столбцу добавил класс по которому его и отслеживаю
'classes' => 'dinamics'. При первой загрузке все нормально окрашивается. Но когда происходит сортировка цвет теряется. Через консоль вижу, что отправляется ajax запрос. Куда поместить js по окрашиванию цвета текста столбца, чтобы он срабатывал после успешного ajax запроса? Подскажите куда копать. Вот сам код js. Может можно и по другому реализовать. Сильно не ругайтесь, а только учусь.)

document.addEventListener("DOMContentLoaded", function() {
        var eval_table = document.getElementsByClassName('dinamics');
        console.log(eval_table, eval_table.length);

        for (var i = 0; i <= 55; i++) {
            var znachen = eval_table.childNodes[0].data;
            var colorRed = eval_table.attributes[3]; //.nodeValue;
            var znachenieattributa = eval_table.style.cssText;
          
            eval_table.setAttribute('style', "text-align:left; color:green");
          
             var znachen1 = Number(znachen);
            
             if (znachen1 < 0) {
                console.log("Значение ячейки меньше нуля");
              
                eval_table.setAttribute('style', "text-align:left; color:red");
                // добавлять атрибут к ячейке Красит красным цветом
            }
            else console.log("Значение ячейки больше нуля");
        }       
    });

 

[~WR~]

У jqGrid есть хорошее событие на этот случай - gridComplete.
Документация: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

Или ещё так можно:

$grid.bind('jqGridGridComplete', function(...), {
    ...
}

 

[mishas]

Добрый день.
В таблице есть поле enum('A', 'B', 'C', 'D')
Как это поле вывести в таблицу?
При попытке вывести

'bType' => array(
        'label' => 'Тип',
        'formatter' => 'enum',
        'editable' => true,
        'edittype' => 'enum',
        'editoptions' => array(
          'value' => 'A, B, C, D'
        ),
),

Выдает ошибку: jqgrid_exception.class.php in line 12: A non well formed numeric value encountered

Заранее благодарен

 

[krokzz]

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

 

[gevaraweb]

Примеры работают, только не исчезает окно редактирование и ошибка в консоли:

Uncaught TypeError: Cannot set property 'refreshtext' of undefined
    at ?render=jqSimple:48

Версия jqGrid-5.3.1

Взял версию jqGrid-4.4.1, ошибка исчезла, все работает... Или собрал криво первый раз? Еще поэкспериментирую.

И все-таки, какой правильный способ сделать поле со списком из другой таблицы? Хорошо бы такой частый случай в копилку примеров на http://jqgrid-php.net/

(Добавлено позже). Почитал сообщения, думал, и вроде разобрался . В beforeInit() строю массив arrayForStudy для будущего столбца - списка.

protected function beforeInit()
    {
        $this->arrayForStudy = array();
        $result = $this->DB->query("select * from `study`");
        while ( $row = $this->DB->fetch($result) ) {
            $this->arrayForStudy[ $row['id_study'] ] = $row['namestudy'];
        }

    }

Потом в init():

'fstudy' => array('label' => 'Направление',
                'edittype'    => 'select',
                'editoptions' =>  array('style' => 'width: 140px;', 'value'=> new jqGrid_Data_Value($this->arrayForStudy) ),
                'width' => 50,
            ),

Может, есть покрасивше решение? Или все ок? Кстати, для мускула используются старые версии функций mysql_query вместо mysqli_query и пр.

(Добавлено еще позже). Еще. Как я понял, по умолчанию идет сортировка по ключу. Это не всегда удобно. Например, мне нужно сразу видеть свежие записи. Я нашел место, которое за это отвечает:

$this->sidx = $this->input('sidx') ? jqGrid_Utils::checkAlphanum($this->input('sidx')) : $this->primary_key[0];

К счастью, это легко вылечить так:

 $this->sidx = $this->input('sidx') ? jqGrid_Utils::checkAlphanum($this->input('sidx')) : "NULL";

После этого можно создавать свои гибкие запросы с сортировкой по нужным ключам. Интересно, автор, примете пулл реквест? Не лень будет ?

 

[Heess]

если ветка еще жива.
второй день бьюсь с формирование dropbox реализовал как мануале:
{ name: "fotik",
index: 'id_fotik',
label: 'id_fotik',
align: "left",
editable:true,
edittype:"select",
editoptions: {
dataUrl: datas,
dataUrl: 'main/selectFotik',
}},
не формируется select хотя если смотреть в консоли ответ приходит правильный вида {value:{'1':'One';'2':'Two';'1':'QWE'}} , но как показывает консоль такой формат не поддерживается.
Но если я заменяю 'main/selectFotik' полученным значением {value:{'1':'One';'2':'Two';'1':'QWE'}} , options нормально формируется.

Где накосячил?

 

[Юрий Вакуленко]

Ребята, я так понимаю это отличное решение для простых табличек, в ячейках которых может содержатся только строки с текстом или числа..
а как использовать эту библиотеку, если нужно отредактировать строку, но на странице редактирования будет сложная форма (к примеру с radio. checkbox, textarea, select с Визавиг Редактором.. и т.д.) Можно ли как-то вручную задать ссылку на редактирование строки и при этом ссылка должна открыв в новом окне и показыватся форма редактирования материала, которая формируется контроллером платформы (CMS) где содердится редактируемый материал?

Надеюсь вы меня поняли.. меня смущает простота данных в ячейках.. одни строки и цифры.. а мне бы такой функционал как в Joomla к примеру.. где по сслке редактирования материала открывается полноценная сложная многоэлементная форма редактирования материала.