django与jqgrid进行数据库信息的展示

jqgrid是一款优秀的前端表格数据显示插件，用来显示数据库的数据很好的，同时支持本地（local）以及远端的数据展示，但是使用的时候，jqgrid不能正确的处理django返回的数据，同时查了资料，也没找到说jqgrid要求返回的数据的结构。于是退而求其次，先用ajax将数据拿到，然后再进行本地的加载。

具体如下：

ajax获得mysql数据，使用get方法即可：

$.get("/show/pdf/", { "test": "testvalue" }, function (ret) {
				rows = ret['data'];}
				#ret是返回数据，其格式，我定的是 ret = {'code': 200, 'data': data} 
				#data为包含每个记录的列表，同时每个列表用字典表示，也就是符合json的要求
		

本地数据渲染

//装载表格
		function loadGrid() {
			$("#grid").jqGrid(
				{
					height: '100%',
					width: '100%',
					autowidth: true,
					datatype: 'local',//本地的数据,
					rownumbers: true,
					align: 'center',
					colModel: [
						{
							label: 'PDF',
							name: 'pdfname',
							index: 'pdfname',
							sortable: false,
							width: 200
						},
						{
							label: 'upload Time',
							name: 'uploadtime',
							index: 'uploadtime',
							align: 'center',
							sortable: true,
							width: 80
						},
						{
							label: 'IsMarked',
							name: 'IsEdit',
							index: 'IsEdit',
							sortable: true,
							align: 'center',
							width: 40,

						},
						{
							label: '',
							width: 60,
							align: 'center',
							sortable: false,
							formatter: function (rowId, options, row) {
								console.log(options)
								var btn = "";
								a = options['rowId'];
								btn += '&nbsp;<a href="javascript:onDtl('
									+ a
									+ ')"class="mesq">MarkIt</a>&nbsp;'
								btn += '&nbsp;<a href="javascript:onDel('
									+ a
									+ ')"class="mesd">Detial</a>&nbsp;'
								return btn;
							}
						}],
					loadonce:true,
					rowNum: 20,
					rowList: [10, 20, 50],
					pager: '#pager',
					sortorder: "desc",
					sortname: 'uploadtime',//初始化的时候排序的字段
					sortable:true,
					
					
				});

以上代码中，定义了jqgrid必要的colModel，同时在最后一列，利用formatter进行了自定义，添加了两个超链接标签，完成一定的动作。

数据的更新，同理也是先用ajax获得数据，然后再本地更新，代码如下：

function onQ() {
			$("#grid").jqGrid('clearGridData');
			$.get("/show/search/", { 'pdfname': $("#PdfName").val() }, function (ret) {
				var new_data = ret['data'];
				console.log(ret['data'])
				$("#grid").jqGrid('setGridParam', {
					datatype: 'local',
					//这样本地的可以通过,要把它解析为字典
					data: eval(new_data),
					page: 1,
				}).trigger("reloadGrid");
			});