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

Silentium · 21 Янв 2014

Извиняюсь за примитивные вопросы... Со всем вроде разобрался, но не получается скрыть панель навигации в гриде. Делаю так:
На серверной стороне

Код:

$this->nav=null;

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

Код:

$grid.navGrid(pager,
{
    add: false,
    edit: false,
    del: false,
    refresh: false,
    search:false,
   
}).hide();

Но ничего не происходит.

gudzik · 28 Янв 2014

привет!

очень понравился плагин!

но уже второй день мучаюсь, никак не могу заставить его работать...

сама таблица работает а вод данные из базы не подгружаются, при этом никаких ошибок Firebug не отображает, более того в консоли Firebug вообще ничего нет!
даже если задаю неправильные параметры в строке подключения к базе тоже не выдает никакой ошибки...

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

gudzik · 29 Янв 2014

ура! разобрался!!!

pirat89 · 1 Фев 2014

Ребят прошу вашей помощи, никак не выходит настроить кнопку удаления строки, т.е. она работает, но передаёт "id" строки, а нужно значение колонки например "tid".
Код:

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <title>Выработка сотрудников доставки</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="description" content="jqGrid" />
    <meta name="keywords" content="jqGrid, javascript, jquery" />

    <link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
</head>

<body>
    <table id="list"></table>
    <div id="pager"></div>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/i18n/grid.locale-ru.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        var lastSel;
        jQuery("#list").jqGrid({
            url:'2getdatanew.php',
            datatype: 'json',
            mtype: 'POST',
            colNames:['#', '1', '2','3','4','5','6','7','8','9','10'],
            colModel :[
                {name:'tid', index:'tid', width:50, align:'right', editable:true, search:true}
                ,{name:'ProductionResource_driver_id', index:'ProductionResource_driver_id', width:150,editable: true ,edittype:"select",editoptions:{dataUrl:'test.php'}}
                ,{name:'ProductionResource_forwarder_id', index:'ProductionResource_forwarder_id', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'Quantity_RN', index:'Quantity_RN', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'Quantity_TT', index:'Quantity_TT', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'SKU', index:'SKU', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'pcs', index:'pcs', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'box', index:'box', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'kg', index:'kg', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'ye', index:'ye', width:150, align:'right', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ,{name:'CreateDate', index:'CreateDate', width:150,  formatter: 'date', align:'right', editable:false, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn','le','lt','gt','ge']}}
                ],
            pager: jQuery('#pager'),
            rowNum:30,
            rowList:[3,20,30],
            sortname: 'tid',
            sortorder: "asc",
            viewrecords: true,
            autowidth: true,
            caption: 'Выработка сотрудников доставки',
            height: '100%', viewrecords: true, fixed: true, gridview: true, loadonce: false,
            ondblClickRow: function(tid) {
                if (tid && tid != lastSel) {
                    jQuery("#list").restoreRow(lastSel);
                    jQuery("#list").editRow(tid, true);
                    lastSel = tid;
                }
            },
            editurl: 'editjqgrid.php'
        }).navGrid('#pager',{view:false, del:true, add:true, edit:false},
            {}, //  default settings for edit
            {addCaption: "Добавление записи",
            editCaption: "Edit Record",
            url:"addjqgrid.php",
            bSubmit: "Добавить",
            bCancel: "Отмена",
            bClose: "Закрыть",
            saveData: "Data has been changed! Save changes?",
            bYes : "Да",
            bNo : "Нет",
            bExit : "Закрыть"}, //  default settings for add
         
            {caption: "Delete",
            msg: "Delete selected record(s)?",
            bSubmit: "Delete",
            bCancel: "Cancel",
            url: 'jqgriddelete.php',
            reloadAfterSubmit:true,
            mtype: "POST",     
            },  // delete instead that del:false we need this
            {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
            {} /* view parameters*/
        )
    });
    </script>
</body>
</html>

pirat89 · 2 Фев 2014

Не дайте городить велосипед, подскажите как правильно настроить кнопку удаления.

pirat89 · 3 Фев 2014

Понял что с помощью "delData", но какие параметры туда задать не могу понять.

pirat89 · 6 Фев 2014

Сам отвечаю на свой вопрос:

Код:

{msg:"Delete selected row(s)",
            url:"jqgriddelete.php",
            reloadAfterSubmit:false,
            delData: {
            tid: function () {
            var t_row = $('#list').getGridParam('selrow');
            var value = $('#list').getCell(t_row,'tid');
            return value;
            }
            }
      }

Silentium · 6 Фев 2014

Добрый день!
Пытаюсь реализовать пример "загрузка файлов" у себя. на локальном сервере загрузка работает, копирую на хостинг и возникает ошибка Uncaught SyntaxError: Unexpected token < в

jquery.jqGrid.src.js:76 после нажатия кнопки добавить в форме. Судя по коду не отрабатывает на этом участке:

PHP:

 ...
parse : function(jsonString) {
var js = jsonString;
if (js.substr(0,9) == "while(1);") { js = js.substr(9); }
if (js.substr(0,2) == "/*") { js = js.substr(2,js.length-4); }
if(!js) { js = "{}"; }
return ($.jgrid.useJSON===true && typeof (JSON) === 'object' && typeof (JSON.parse) === 'function') ?
JSON.parse(js) :
eval('(' + js + ')');
},
...

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

P>S Один нюанс в том, что локально стоит PHP 5.4 а на хостинге 5.3.
P.P.S>И еще один нюанс: В примере добавляемые картинки при отображении в гриде масштабируются, не нарушая размерности колонок , у меня же при добавлении картинки, допустим 300х400, в колонке image картинка загружается не в масштабе а в натуральную величину.Где я ошибся с настройками?

Silentium · 7 Фев 2014

Сам разобрался.
1)Ошибка: Uncaught SyntaxError: Unexpected Tocken <
Проблема была в строке
require_once '/misc/upload.class.php'; - здесь лишний слэш вначале ссылки
2) Параметры изображений в гриде настраиваются через upload.class.php
за это отвечают параметры
$this->upload->image_resize = true;
$this->upload->image_x = 75;
$this->upload->image_y = 75;
3)Как заменить обозначения в навигационной панели на русский(Page,View ....) ?
На серверной стороне параметры:
$this->options=array('pgtext' =>'Страница {0} из {1}','loadtext' =>'Загрузка...','emptyrecords'=> 'Пусто','recordtext'=> 'Вид {0} - {1} из {2}');
На клиентской: поправить\заменить файл grid.locale-en.js
4)Как выводить сообщения по событию 'editrules' => array('required'=>true) на русском языке?
Добавить:
$.extend($.jgrid.defaults,
{
required:'Поле является обязатеным'
})
или поправить\заменить файл grid.locale-en.js
5)Как скрыть навигационную панель в гриде полностью?
$this->nav = null; - не помогло

Silentium · 26 Фев 2014

Вопрос к разработчику, в примере http://jqgrid-php.net/examples/?render=jqOperUpload где добавляется файл- картинка.
При добавлении файла не отрабатывает функция operAfterAddEdit($id)
$id не передается в строку $this->upload->file_new_name_body = $id; и соответственно имя файла не перезаписывается. Работает только EDIT.
С чем это может быть связано?

Bagrintsev · 24 Мар 2014

никто не пробовал в качестве источников данных использовать sqlite? может у кого есть код адаптера? выложите плз.

mictor1973 · 17 Апр 2014

Добрый день.!
Займите ума! Не могу покрасить данные ИТОГО по аналогии с полем. Т.е. отрицательное значение - красным, положительное - зелёным.
сварганил незамысловатый grid. Есть поле с "ИТОГО:" :

'deb_kred' => array('label' => 'Платеж',
'width' => 30,
'align' => 'center',
'db' => 'dk.deb_kred',
'db_agg' => 'sum',
'editable' => true,
'editrules' => array('required' => true),
'editoptions' => array('style' => 'width: 90%;'),
"formatter"=>"currency",
'formatoptions' => array('suffix' => 'p.'),
),
Данные красятся в зависимости от значения:
#---------- красим дебет кредит ---------------------------
protected function parseRow($r)
{
$r['_class'] = array('deb_kred' => ($r['deb_kred'] < 0) ? 'bold font-red' : 'bold font-green');
return $r;
}

#---- Нижняя строка итого-------------------------------------
protected function getDataAgg()
{
parent::getDataAgg();
$this->agg['data_oper'] = 'Сумма: ';
}

~WR~ · 17 Апр 2014

Стандартной подкраски для user_data, по-моему, не предусмотрено.
Но можно прямо html передавать.

Код:

protected function getDataAgg()
{
    parent::getDataAgg();
    $this->agg['data_oper'] = 'Сумма: ';
    $this->agg['deb_kred'] = "<span class='" . ($this->agg['deb_kred'] > 0) ? 'bold font-red' : 'bold font-green') . "'>{$this->agg['deb_kred']}</span>";
}

А еще лучше в javascript'е это делать. По событию gridComplete получать значение поля и добавлять ему нужный класс.

~WR~ · 17 Апр 2014

никто не пробовал в качестве источников данных использовать sqlite? может у кого есть код адаптера? выложите плз.

Из адаптера для mysql получается практически заменой функций один-к-одному.
Кажется, кто-то в этой теме уже делал. Или в почте было)

mictor1973 · 17 Апр 2014

~WR~ написал(а):
Стандартной подкраски для user_data, по-моему, не предусмотрено.
Но можно прямо html передавать.

Код:

protected function getDataAgg() { $this->agg['deb_kred'] = "<span class='" . ($this->agg['deb_kred'] > 0) ? 'bold font-red' : 'bold font-green') . "'>{$this->agg['deb_kred']}</span>"; }

На месте суммы теперь "NaN"

А еще лучше в javascript'е это делать. По событию gridComplete получать значение поля и добавлять ему нужный класс.

Нажмите для раскрытия...

вот, нарыл:

Код:

    var $self = $(this),
        sum = $self.jqGrid("getCol", "deb_kred", false, "sum"),
        i,
        iCol = $("#" + $.jgrid.jqID(this.id) + "_" + "deb_kred")[0].cellIndex, // get index of "deb_kred" column
        sumFormatted = this.formatter("", sum, iCol);
    $self.jqGrid("footerData","set",{invdate: "Total:",deb_kred: sum < 0 ? "<span style='color:red'>" + sumFormatted + "</span>": sum},false);

Только это сумма уместившихся записей на странице. И красит только отрицательные значения.
Я в jquery полный ноль :oops:

. Может гуру подскажет оптимальный код для данной задачи?

demeshko · 18 Апр 2014

mictor1973 написал(а):
вот, нарыл:

Код:

var $self = $(this), sum = $self.jqGrid("getCol", "deb_kred", false, "sum"), i, iCol = $("#" + $.jgrid.jqID(this.id) + "_" + "deb_kred")[0].cellIndex, // get index of "deb_kred" column sumFormatted = this.formatter("", sum, iCol); $self.jqGrid("footerData","set",{invdate: "Total:",deb_kred: sum < 0 ? "<span style='color:red'>" + sumFormatted + "</span>": sum},false);

Только это сумма уместившихся записей на странице. И красит только отрицательные значения.
Я в jquery полный ноль . Может гуру подскажет оптимальный код для данной задачи?

Попробуйте так:

Код:

    var opts = {
        'viewrecords':true,
        'footerrow'    : true,
        'gridComplete' : function()
        {
          $(this).jqGrid('extFooterAgg');
          var w= $("tr.footrow td[role='gridcell']:eq(1)").html();
          w=  parseInt(w) ;
          if (w < 0) {
            $("tr.footrow td[role='gridcell']:eq(1)").css("color","red")
          }
          else
          {
              $("tr.footrow td[role='gridcell']:eq(1)").css("color","green")
          };
        }
    };

Вместо 1 - номер соответствующей колонки...

mictor1973 · 18 Апр 2014

Вместо 1 - номер соответствующей колонки...

Спасибо! Работает!!

Bagrintsev · 12 Май 2014

gudzik написал(а):
привет!

очень понравился плагин!

но уже второй день мучаюсь, никак не могу заставить его работать...

сама таблица работает а вод данные из базы не подгружаются, при этом никаких ошибок Firebug не отображает, более того в консоли Firebug вообще ничего нет!
даже если задаю неправильные параметры в строке подключения к базе тоже не выдает никакой ошибки...

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

ура! разобрался!!!

молодец. у меня те же симптомы и я НЕ РАЗОБРАЛСЯ. может подскажешь?

~WR~ · 12 Май 2014

Все же, в firebug должно что-то быть. Потыкайте там кнопочки - может просто фильтр строит.
Если совсем ничего, значит URL не определен, либо тип данных стоит как local. Посмотрите код страницы - с какими параметрами создается jqGrid. Можно сюда скопировать.

Если все же запрос есть, то все должно быть видно. Он либо кидает PHP-ошибку (если display_errors включен), либо JSON с описанием, что именно пошло не так.

Bagrintsev · 17 Май 2014

Игорь2000 написал(а):
Спасибо. Работает. Правда только после рефреша таблицы.
У меня еще вопрос: как разукрасить данные двух столцов А и В, надо чтобы если А>B то А зеленый, а В красный и наоборот, а если равно то оба синие.
Получается разукрасить только одно условие.
protected function parseRow($r)
{
$r['_class'] = array('A' => ($r['A'] < $r['B']) ? 'bold font-red' : null);

return $r;
}

элементарно, Ватсон, используем рекурсию. тернарные операторы вкладываются друг в друга.
$r['_class'] = array(
'A' => (
($r['A'] > $r['B']) ? 'bold font-red' : (($r['A'] < $r['B']) ? 'italic font-green yellow' : 'bold yellow')
)
);
только не забываем, что тернар считает условия по еврейски справа налево, ну и правильные скобки в условиях - самое главное.

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

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок

Новичок