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= [
			{"Integer":200000,"Number":60000000.73,"Currency":34.2,"Email":"john.smith@yahoo.com","Link":"http://www.yahoo.com","Checkbox":"Yes"},
			{"Integer":1600000,"Number":75200000.23,"Currency":245.2,"Email":"joe.woe@google.com","Link":"http://www.google.com","Checkbox":"Yes"},
			{"Integer":652693,"Number":34534000.33,"Currency":18545.2,"Email":"julia.bergman@bing.com","Link":"http://www.bing.com","Checkbox":"No"},
			{"Integer":1237,"Number":3450.3,"Currency":55597545.2,"Email":"roy.corner@msn.com","Link":"http://www.msn.com","Checkbox":"No"}
		];
		jQuery('#grid').jqGrid({
			"width":"650",
			"hoverrows":false,
			"viewrecords":true,
			"gridview":true,
			"datatype":"local",
			"data": data,
			"autowidth":true,
			"colModel":[
				{"name":"Integer","width":80,"formatter":"integer","formatoptions":{"thousandsSeparator":","},"sorttype":"integer","editable":true, "key": true},
				{"name":"Number","width":80,"formatter":"number","formatoptions":{"decimalPlaces":1},"sorttype":"number","editable":true},
				{"name":"Currency","width":80,"formatter":"currency","formatoptions":{"decimalPlaces":1,"thousandsSeparator":",","prefix":"$","suffix":" USD"},"sorttype":"currency","editable":true},
				{"name":"Email","width":120,"formatter":"email","editable":true},
				{"name":"Link","width":120,"formatter":"link","editable":true},
				{"name":"Checkbox","width":50,"formatter":"checkbox","editable":true}
			],
			"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"});
		...
		</script>
	</div>