JQGrid Tengo una aplicación en la que estamos utilizando JQuery. Tenemos una tabla para la cual estamos usando el JQGrid. Los datos los estoy llenando con json. Mi problema es que tengo una columna con imagenes y me gustaría que al posicionar el mouse sobre una de ellas apareciera el title de la imagen. JQGrid, hasta donde tengo entendido, ya maneja esa funcionalidad y cuando te posicionas sobre una celda te muestra como title el contenido de la celda. Estuve buscando en la documentación de JQGrid y encontré que tal vez podría usar el método setCell para solucionar el problema del tool tip, pero lamentablemente no funcionó...
El código que estoy usando es el siguiente:
Código:
El método setCell funciona parcialmente, porque cuando acaba de cargar la página las imagenes se quedan alineadas a la derecha. Olvide mencionar que estaba trabajando con Mozilla 3.0.7, y tengo instalado el firebug. Cuando abro la herramienta del firebug puedo ver los titles de cada imagen, pero cuando me posicono sobre ellas, el title se cambia a title="".jQuery("#setcols").jqGrid({
datatype: "local",
height: 300,
colNames:['Entity', 'Legal Entity', 'Country', 'File #', 'Date', 'Time', 'Currency', 'Role', 'Count', 'Total Amt', 'Select', 'Count', 'Total Amt', 'Select', 'Action'],
colModel:[ {name:'entity',index:'me', width:60, sortable:false, resizable: false},
{name:'legal',index:'goldLe', width:60, sortable:false, resizable:false},
{name:'ctry',index:'ctry', width:50, sortable:false, resizable: false},
{name:'num',index:'plNum', width:50, sortable:false, resizable: false},
{name:'date',index:'date', width:70, sortable:false, resizable: false},
{name:'time',index:'time', width:50, sortable:false, resizable: false},
{name:'currency',index:'currency', width:50, sortable:false, resizable: false},
{name:'role',index:'role', width:90, sortable:false, resizable: false},
{name:'count',index:'count', width:40, align:"right", sorttype:"int", sortable:false, resizable: false},
{name:'totalAmount',index:'totalamount', width:50, align:"right",sorttype:"float", sortable:false, resizable: false},
{name:'sel',index:'sel', width:50, sortable:false, resizable: false},
{name:'count2',index:'count', width:40, align:"right",sorttype:"int", sortable:false, resizable: false},
{name:'totalAmount2',index:'totalAmount2', width:50, align:"right", sorttype:"float", sortable:false, resizable: false},
{name:'sel2',index:'sel2', width:50, sortable:false, resizable: false},
{name:'print',index:'print', width:55, sortable:false, resizable: false},],
forceFit:true,
loadonce:true,
width: 888,
imgpath: '../js/themes/basic/images',
caption: '',
pager: $('#pager')
}).navGrid('#pager',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager',{title:'Filter',caption: '', buttonimg:"../images/filter.png",
position:"first",onClickButton: function(){$('#filterOutbound').jqmShow();}
});
$('#filterOutbound').jqm({zIndex: 950,overlay: 10,modal: true,trigger: false}).jqDrag('.jqDrag').jqResize('.jqResize');
$("#refresh").click(function(){
$('#filterOutbound').jqmHide();
});
$("div.GridHeader").attr("style","border: #ccc 1px solid;");
$("td.HeaderLeft").remove();
$("td.HeaderRight").remove();
Calendar.setup({inputField:"createdAfter",ifFormat:"%m-%d-%Y",button:"createdAfterimg" });
Calendar.setup({inputField:"extractedAfter",ifFormat:"%m-%d-%Y",button:"extractedAfterimg" });
$('#clear').click(function() {
$('#createdAfter').text("").val("");
$('#extractedAfter').text("").val("");
});
var mydata = [
{id:"2", entity:"GBSAAA<br> ",legal:"A01098<br>GEII UK",ctry:"GB<br> ",num:"01<br>ABCDEF",date:"19-Nov-2009<br> ",time:"10:25:11<br> ",currency:"GBP<br> ",role:"Seller<br>Buyer/Customer",count:"37<br>0",totalAmount:"256,444.33<br>0.00",sel:"<input type='radio'name='Sel1'/><br><input type='radio'name='Sel1'/>",count2:"39<br>56",totalAmount2:"200,555.88<br>87,654.22",sel2:"<input type='radio'name='Sel1'/><br><input type='radio' name='Sel1'/>",print:"<img title='View' src='../images/view.png' style='display: inline; cursor: pointer;' onclick='redirect()'/> <img title='PDF' src='../images/adobe2.png' style='display: inline; cursor: pointer;'/> <img src='../images/download.png' style='display: inline; cursor: pointer;' title='Download'/>"},
{id:"1", entity:"GBSAAA<br> ",legal:"A01098<br>GEII UK",ctry:"GB<br> ",num:"01<br>ABCDEF",date:"26-Nov-2009<br> ",time:"13:45:22<br> ",currency:"GBP<br> ",role:"Seller<br>Buyer/Customer",count:"25<br>1",totalAmount:"125,663.54<br>568.20",sel:"<input type='radio'name='Sel0'/><br><input type='radio'name='Sel0'/>",count2:"54<br> ",totalAmount2:"785,231.45<br> ",sel2:"<input type='radio' name='Sel0'/><br><input type='radio' name='Sel0'/>",print:"<img title='View' src='../images/view.png' style='display: inline; cursor: pointer;' onclick='redirect()'/> <img title='PDF' src='../images/adobe2.png' style='display: inline; cursor: pointer;'/> <img src='../images/download.png' style='display: inline; cursor: pointer;' title='Download'/>"},
{id:"3", entity:"GBSAAA<br> ",legal:"A01098<br>GEII UK",ctry:"GB<br> ",num:"01<br>ABCDEF",date:"30-Oct-2009<br> ",time:"16:38:22<br> ",currency:"GBP<br> ",role:"Seller<br>Buyer/Customer",count:"47<br>0",totalAmount:"289,775.66<br>0.00",sel:"<input type='radio'name='Sel2'/><br><input type='radio'name='Sel2'/>",count2:"12<br>6",totalAmount2:"34,568.99<br>5,600.12",sel2:"<input type='radio'name='Sel2'/><br><input type='radio' name='Sel2'/>",print:"<img title='View' src='../images/view.png' style='display: inline; cursor: pointer;' onclick='redirect()'/> <img title='PDF' src='../images/adobe2.png' style='display: inline; cursor: pointer;'/> <img src='../images/download.png' style='display: inline; cursor: pointer;' title='Download'/>"},
{id:"4", entity:"GBSAAA<br> ",legal:"A01098<br>GEII UK",ctry:"GB<br> ",num:"01<br>ABCDEF",date:"26-Oct-2009<br> ",time:"07:15:56<br> ",currency:"GBP<br> ",role:"Seller<br>Buyer/Customer",count:"22<br>1",totalAmount:"89,652.11<br>758.99",sel:"<input type='radio'name='Sel3'/><br><input type='radio'name='Sel3'/>",count2:"16<br>13",totalAmount2:"41,226.33<br>55,667.88",sel2:"<input type='radio'name='Sel3'/><br><input type='radio' name='Sel3'/>",print:"<img title='View' src='../images/view.png' style='display: inline; cursor: pointer;' onclick='redirect()'/> <img title='PDF' src='../images/adobe2.png' style='display: inline; cursor: pointer;'/> <img src='../images/download.png' style='display: inline; cursor: pointer;' title='Download'/>"},
{id:"5", entity:"GBSAAA<br> ",legal:"A01098<br>GEII UK",ctry:"GB<br> ",num:"01<br>ABCDEF",date:"20-Oct-2009<br> ",time:"12:17:30<br> ",currency:"GBP<br> ",role:"Seller<br>Buyer/Customer",count:"35<br>29",totalAmount:"189,542.33<br>658,988.22",sel:"<input type='radio'name='Sel4'/><br><input type='radio'name='Sel4'/>",count2:"21<br>62",totalAmount2:"88,789.65<br>98,756.47",sel2:"<input type='radio'name='Sel4'/><br><input type='radio' name='Sel4'/>",print:"<img title='View' src='../images/view.png' style='display: inline; cursor: pointer;' onclick='redirect()'/> <img title='PDF' src='../images/adobe2.png' style='display: inline; cursor: pointer;'/> <img src='../images/download.png' style='display: inline; cursor: pointer;' title='Download'/>"},
];
for(var i=0;i<=mydata.length;i++)
jQuery("#setcols").addRowData(i+1,mydata[i]);
var ids = $("#setcols").getDataIDs();
for (var i = 0; i < ids.length; i++) {
var row_id = ids[i];
/*img1= "<img title='View' src='../images/view.png' style='display: inline; cursor: pointer;' id='" + row_id + "' onclick='redirect()'/>";
img2= "<img title='PDF' src='../images/adobe2.png' id='" + row_id + "' style='display: inline; cursor: pointer;'/>";
img3= "<img src='../images/download.png' id='" + row_id + "' style='display: inline; cursor: pointer;' title='Download'/>"
$("#setcols").setRowData(ids[i], {print:img1+img2+img3})*/
$("#setcols").setCell(row_id, "print", {'text-align':'center'},{title:'Undefined', alt:'Undefined'});
}
});
Espero que alguno de ustedes pueda ayudarme con este problema. Un saludo y muchas gracias.
