Архивы jqgrid - Страница 2 из 3

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

30.04.2019 Павел Грибов PHP, WEB

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

php:

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

1 2	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;
}

$("#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;

}

Оставить комментарий custom error, free-jqgrid, jqgrid, обработчик ошибок

Как узнать версии скриптов используемых на сайте.

21.09.2018 Павел Грибов WEB

А именно Jquery, Bootstrap, JqGrid и т.п. Ну например так:

console.log(jQuery.fn.jquery);
console.log($.ui.version);
console.log($.jgrid.version);
console.log(jQuery.mmenu.version);
console.log($.fn.tooltip.Constructor.VERSION);

console.log(jQuery.fn.jquery);

console.log($.ui.version);

console.log($.jgrid.version);

console.log(jQuery.mmenu.version);

console.log($.fn.tooltip.Constructor.VERSION);

Оставить комментарий bootstrap, jqgrid, jQuerUI, Jquery, mmenu, version, версия

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

05.12.2016 Павел Грибов WEB

Данный плагин разработан для сохранения состояния колонок таблиц 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");
	},	
...
...

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("уникальный идентификатор");  //сохраняем данные по колонкам

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

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

1	$("селектор").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);
	    };
	}
    });
});

$(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, loadCommonParam, saveCommonParam, сохранение состояния

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

01.12.2016 Павел Грибов WEB

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

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

1	$("#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); 
            }
        });
    }
});

$.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);

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

Оставить комментарий col, jqgrid, setColWidth, width

Jqgrid окрашивание фона ячеек

21.04.2016 Павел Грибов WEB

Задача: при определенном условии, необходимо окрасить строку

Подводные камни:

событие afterInsertRow, в последних версиях jqgrid не работает
Навешивание события по окраске на чтото типа : {name:’price’, index:’price’, width:60, align:»center», editable: true, formatter:currencyFmatter}, результата не дает, т.к. в этот момент DOM еще не сформирован.

Решение:

По завершении отрисовки, проходимся по нужным ячейкам, и окрашиваем строку случае соответствия:

	        gridComplete:function(){
		console.log("--вставил!");
		    var mya=new Array();
		    mya=$("#list2").getDataIDs(); 
		    var data=$("#list2").getRowData(mya[0]);  
		    var colNames=new Array(); 
		    var ii=0;
		    for (var i in data){colNames[ii++]=i;}		
		    for(i=0;i<mya.length;i++){
			   data=$("#list2").getRowData(mya[i]); 			
			    console.log(data[colNames[3]]);			
			    if (data[colNames[3]]=="Access-Reject"){
				$('#'+mya[i]).css({'background-color':'#FF7700'});
			        console.log(mya[i]);
			  } else {
			      $('#'+mya[i]).css({'background-color':'#229922'});
			
			    }
			}

gridComplete:function(){

console.log("--вставил!");

var mya=new Array();

mya=$("#list2").getDataIDs();

var data=$("#list2").getRowData(mya[0]);

var colNames=new Array();

var ii=0;

for (var i in data){colNames[ii++]=i;}

for(i=0;i<mya.length;i++){

data=$("#list2").getRowData(mya[i]);

console.log(data[colNames[3]]);

if (data[colNames[3]]=="Access-Reject"){

$('#'+mya[i]).css({'background-color':'#FF7700'});

console.log(mya[i]);

} else {

$('#'+mya[i]).css({'background-color':'#229922'});

}

Оставить комментарий jqgrid, окрашивание строки, окрашивание ячейки, смена цвета фона

« 1 2 3 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31