JqGrid, how to put image on in a row
Hi there,
I try to put one or several photo in a row of a jqgrid (http://www.trirand.com/blog/).
Here is my source
I try to put one or several photo in a row of a jqgrid (http://www.trirand.com/blog/).
Here is my source
<--- THE CFC --->
<cfcomponent displayname="InvoiceMgr" output="false">
<cffunction name="getInvoices" access="remote" output="false" returnformat="json">
<cfargument name="page" required="no" default="1">
<cfargument name="rows" required="no" default="10">
<cfargument name="sidx" required="no" default="">
<cfargument name="sord" required="no" default="ASC">
<cfset var q = "">
<cfquery datasource="andersen" name="q">
SELECT *
FROM invheader
<cfif len(arguments.sidx)>
ORDER BY #arguments.sidx# #arguments.sord#
</cfif>
</cfquery>
<cfreturn queryConvertForJQGRID(q, arguments.page, arguments.rows) />
</cffunction>
<cffunction name="queryConvertForJQGRID" access="package" returntype="struct" output="no">
<cfargument name="q" type="query" required="yes">
<cfargument name="page" type="numeric" required="no" default="1">
<cfargument name="rows" type="numeric" required="no" default="10">
<cfset var result = structnew()>
<cfset var rowStruct = structnew()>
<cfset var col = "">
<cfset result.CURPAGE = arguments.page>
<cfset result.TOTALPAGES = ceiling(arguments.q.recordcount/arguments.rows)>
<cfset result.TOTALROWS = arguments.q.recordcount>
<cfset result.DATA = arraynew(1)>
<cfoutput query="arguments.q" startrow="#(arguments.page-1)*arguments.rows+1#" maxrows="#arguments.rows#">
<cfset rowStruct = structnew()>
<cfset rowStruct.rowid = currentrow>
<cfloop list="#lcase(arguments.q.columnlist)#" index="col">
<cfset rowStruct[col] = arguments.q[col][currentrow]>
</cfloop>
<cfset arrayappend(result.DATA, rowStruct)>
</cfoutput>
<cfreturn result />
</cffunction>
</cfcomponent>
<--- THE GRID --->
<html>
<head>
<title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list").jqGrid({
jsonReader: {
root: "DATA",
page: "CURPAGE",
total: "TOTALPAGES",
records: "TOTALROWS",
repeatitems: false,
id: "rowid"
},
url:'InvoiceMgr.cfc?method=getInvoices',
datatype: 'json',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: $('#pager'),
rowNum:10,
rowList:[10,20,30],
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'Invoices'
});
});
</script>
</head>
<body>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
ASKER
Everything work like that but i need to insert a picture in the grid ....
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
My server sends the link e.g.:
<img src=../images/sep1.jpg>
URL encoded in the JSON. Is there a way to de-code this html before the grid binds - using javascript?
C
My server sends the link e.g.:
<img src=../images/sep1.jpg>
URL encoded in the JSON. Is there a way to de-code this html before the grid binds - using javascript?
C
<cfoutput query="arguments.q"
be
<cfoutput query="#arguments.q#"