Архив метки: jqgrid

JQgrid, странный глюк с jqContextMenu

На днях произошел странный глюк с плагином jqContextMenu, а именно, после нажатия на правую кнопку мыши контекстное меню появлялось, но пропадало после отпускания клавиши. Проявилось только в браузере FireFox и только у меня.  На что уж только не грешил, делал откат кода назад на пару недель, думал сам где какую ошибку внес. Затем сходил на сайт  Причем специально сходил на www.guriddo.net, где собственно размещена демка от «создателей» — опаньки, и там тоже самое. Значит проблема в браузере. Пробовал отключать плагины, чистить кэшь и т.д. — ничего не помогло. Пришлось засучить рукава и лезть в исходный код плагина context-menu.js, и ставить «костыль». А именно, заменил эвент «клик» на эвент «нажатие» (не отпускание) на скрытие «предыдущего» меню. Что за глюк браузера и почему вдруг «сломалось» — пока загадка.

Читать далее JQgrid, странный глюк с jqContextMenu

Обработка ошибок загрузки данных в операциях Add, Edit, Del в JqGrid

Чтобы отобразить «свою» интерпретацию ошибки на сервере при выполнении операции Add, Del, Edit можно воспользоваться следующим «финтом ушами»: 1) на сервере генерируем ошибку, например 501 которую обрабатывает стандарный обработчик ошибок errorTextFormat:

php:

 header('HTTP/1.1 501 Internal Server Error'); 
                die("Не могу добавить пользователя! " . mysqli_error(Module::$sqln->idsqlconnection));

И код JavaScript на клиенте:

$("#list1").navGrid("#pager1",{
				search: true,
				add: true,
				edit: true,
				del: true,
				refresh: true
				},
				{errorTextFormat: commonError}, //edit options
				{errorTextFormat: commonError}, //add options
				{errorTextFormat: commonError}, //delete options
				{
					multipleSearch: true
					,closeAfterSearch: true
					,closeAfterReset: true									
				}
			);
...
function commonError(data) {
    console.log(data.responseText);
    return data.responseText;
}

 

Плагин для jqGrid для сохранения и восстановления состояния колонок в локальном хранилище

Данный плагин разработан для сохранения состояния колонок таблиц jqgrid при перезагрузке страницы. Сохраняет/восстанавливает состояние колонок: скрыт/не скрыт и ширину. Более ничего. В принципе легко доработать для получения возможности сохранения любых других параметров.

Пример использования:

  jQuery("#fininetinfo").jqGrid({
   	url:'tinfo.php?orgid='+defaultorgid+"&blibase="+$("#blibase").val()+"&agrm_id="+agrm_id,
	datatype: "json",
   	colNames:['id','Сумма','Тариф','Период','Дата нач.'],
   	colModel:[   		
   		{name:'record_id'   ,index:'record_id'      , width:15,search: false,hidden:true,fixed:true},
   		{name:'amount'      ,index:'amount'         , width:55,editable:false,search: true,fixed:true},
                {name:'tarif'       ,index:'tarif'        , width:60,editable:false,search: true},
                {name:'period'      ,index:'period'         , width:60,editable:true,search: false,fixed:true},                                
                {name:'dateofcharge',index:'dateofcharge'   , width:60,editable:false,search: true,fixed:true}

   	],     
	resizeStop: function() {
	    $("#fininetinfo").saveCommonParam("fininetinfo");
	},		
	gridComplete:function() {			    
	    $("#fininetinfo").loadCommonParam("fininetinfo");
	},	
...
...

Команды:

$("селектор").saveCommonParam("уникальный идентификатор");  //сохраняем данные по колонкам

$("селектор").loadCommonParam("уникальный идентифкатор использованный в saveCommonParam"); // загрузить данные по колонкам.

Собственно сам плагин:

$(function() {         
    $.jgrid.extend({
	setColWidth: function (iCol, newWidth, adjustGridWidth) {
	    return this.each(function () {
		var $self = $(this), grid = this.grid, p = this.p, colName, colModel = p.colModel, i, nCol;
		if (typeof iCol === "string") {
		    colName = iCol;
		    for (i = 0, nCol = colModel.length; i < nCol; i++) {
			if (colModel[i].name === colName) {
			    iCol = i;
			    break;
			}
		    }
		    if (i >= nCol) {
			return; 
		    }
		} else if (typeof iCol !== "number") {
		    return;
		}
		grid.resizing = { idx: iCol };
		grid.headers[iCol].newWidth = newWidth;
		grid.newWidth = p.tblwidth + newWidth - grid.headers[iCol].width;
		grid.dragEnd(); 
		if (adjustGridWidth !== false) {
		    $self.jqGrid("setGridWidth", grid.newWidth, false); 
		}
	    });
	}
    });  
    $.jgrid.extend({
	saveCommonParam: function(stname){	    
	     colarray=$(this).jqGrid('getGridParam','colModel');
	     localStorage.setItem(stname, JSON.stringify(colarray));
	     console.log(JSON.stringify(colarray));	     
	},
	loadCommonParam: function(stname){	    	
	    if (localStorage[stname]!=undefined) {
		colarray=localStorage[stname];
		if (colarray!=""){
		    obj_for_load=JSON.parse(colarray);   // загружаем JSON в массив     
		    for (i in obj_for_load) {
			//console.log("name:",obj_for_load[i].name);
			//console.log("width:",obj_for_load[i].width);			
			if  (obj_for_load[i].hidden==true){
			   $(this).hideCol(obj_for_load[i].name);
			} else {
			   $(this).showCol(obj_for_load[i].name);
			   if (obj_for_load[i].fixed==true){
				$(this).setColWidth(obj_for_load[i].name, obj_for_load[i].width);
			   };
			}			
		    };    
		}
	    } else {
		console.log("в локальном хранилище не найден ключ "+stname);
	    };
	}
    });
});

jqGrid — изменение ширины столбца после построения таблицы

Штатно существующий в jqGrid метод setColProp,

$("#list2").jqGrid('setColProp','mobile',{width:1111});

не работает после построения таблицы. Одним из выходов может быть написание расширения:

$.jgrid.extend({
    setColWidth: function (iCol, newWidth, adjustGridWidth) {
        return this.each(function () {
            var $self = $(this), grid = this.grid, p = this.p, colName, colModel = p.colModel, i, nCol;
            if (typeof iCol === "string") {
                colName = iCol;
                for (i = 0, nCol = colModel.length; i < nCol; i++) {
                    if (colModel[i].name === colName) {
                        iCol = i;
                        break;
                    }
                }
                if (i >= nCol) {
                    return; 
                }
            } else if (typeof iCol !== "number") {
                return;
            }
            grid.resizing = { idx: iCol };
            grid.headers[iCol].newWidth = newWidth;
            grid.newWidth = p.tblwidth + newWidth - grid.headers[iCol].width;
            grid.dragEnd(); 
            if (adjustGridWidth !== false) {
                $self.jqGrid("setGridWidth", grid.newWidth, false); 
            }
        });
    }
});

Тогда изменение ширины столбца сведется к виду:

$("#list2").setColWidth("mobile", 100);