Jqgrid Column Display image

<SCRIPT> var IMG; // custom image format. You can customize function alarmformatter (cellvalue, options, rowdata) based on rowdata) {return '';} $ (function () {$ ('# imgdialog '). hide (); // var DATA = {"appid": appid, "appgroupid": currentnode, "pagenumber": 1, "pagesize": 20 }; $ ("# gridtable "). jqgrid ({datatype: "JSON", // postdata: data, URL: "home/list", mtype: 'post', colnames: ['name', 'Gender ', 'account', 'location', 'Membership level', 'image'], colmodel: [{Name: 'username', width: 60, sortable: false}, {Name: 'usersex ', width: 60, sortable: false, align: "center" },{ name: 'loginaccount', width: 60, sortable: false },{ Name: 'address', width: 100, sortable: false}, {Name: 'rank ', width: 100, hidden: false, sortable: false },
// The following code is the key to adding images. {Name: 'dsource _ alarm ', index: 'dsource _ alarm', width: 100, align: "center ", sortable: false, Editable: false, formatter: alarmformatter}], height: '000000', gridcomplete: function () {$ ('# gridtable IMG '). hover (function (e) {$ ("body "). append ("<Div id = 'preview'>  </div>"); $ ("# preview "). CSS ("TOP", (E. pagey) + "PX "). CSS ("Left", (E. pagex) + "PX "). fadein ("fast") ;}, function () {$ ("# preview "). remove ();}). click (function () {$ ('# imgdialog IMG '). ATTR ('src', this. SRC); $ ('# imgdialog '). dialog ({autoopen: True, buttons: {"OK": function () {$ (this ). dialog ("close") ;}, "close": function () {$ (this ). dialog ("close") ;}}, draggable: True, resizable: false, bgiframe: true}); IMG = This ;});}});}); </SCRIPT>

 

Jqgrid Column Display image