Functionality

View Code

	

	<div id="page" data-role="page" data-theme="b">
    ...
		<table id='grid'></table>
		<div id='pager'></div>

		
		<script type='text/javascript'>
		var data= [];
		for(var i=0; i<9;i++)
		{
			data.push({
				"ID":i+1,
				"PhotoFileName":(i+1)+".jpg",
				"Photo":(i+1)+".jpg",
				"Rating": Math.floor(Math.random()*30) 
			});
		}
		jQuery('#grid').jqGrid({
			"width":700,
			"hoverrows":false,
			"viewrecords":true,
			"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
			"gridview":true,
			"rowNum":5,
			"rowList":[5,7,10],
			"colModel":[
				{"name":"ID","width":50,"key":true,"editable":true},
				{"name":"PhotoFileName","width":100,"editable":true},
				{"name":"Photo","width":100,"formatter":formatImage,"unformat":unformatImage,"editable":true},
				{"name":"Rating","sorttype":"integer","formatter":formatRating,"unformat":unformatRating,"editable":true}
			],
			"data": data,
			"datatype":"local",
			"height":350,
			"loadError":function(xhr,status, err){ 
				try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,
					'
'+ xhr.responseText +'
', 
					jQuery.jgrid.edit.bClose,
					{buttonalign:'right'}
				);} catch(e) { alert(xhr.responseText);} 
			},
			"pager":"#pager"
		});

		function formatImage(cellValue, options, rowObject) {
			var imageHtml = "";
			return imageHtml;
		}
		function unformatImage(cellValue, options, cellObject) {
			return $(cellObject.html()).attr("originalValue");
		}
		function formatRating(cellValue, options, rowObject) {
			var color = (parseInt(cellValue) > 0) ? "green" : "red";
			var cellHtml = "" + cellValue + "";
			return cellHtml;
		}
		function unformatRating(cellValue, options, cellObject) {
			return $(cellObject.html()).attr("originalValue");
		}
		...
		</script>
	</div>