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

WEB

Плагин для 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);
	    };
	}
    });
});
WEB

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);
WEB

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

Комментариев нет

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

 

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

  • событие 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'});
			
			    }
			}