А именно 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);
Архив метки: jqgrid
Плагин для 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);
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'});
}
}
jqgrid — no such method gridunload
Ларчик открывается просто. Разработчики зачем-то заменили вызов вида:
$('#tbl_equpment').jqGrid('GridUnload');
на
$.jgrid.gridUnload("#tbl_equpment");