django中使用jqgrid,无法获得json数据

浮生 发布于 2017/03/22 10:25
阅读 278
收藏 0

django中使用jqgrid表格插件展示从数据库中取出来的数据,数据转换成json格式,返回到页面后,jqgrid无显示数据,请教问题出在哪里?

model:

class CustomersInfo(models.Model):
    name = models.CharField(max_length=20)
    sexuality = models.CharField(max_length=4)
    age = models.IntegerField(default=0)
    telphone = models.CharField(max_length=20)
    webchat = models.CharField(max_length=20)
    birthday = models.DateTimeField('date birth')
    method = models.CharField(max_length=20, default='朋友圈')
    note = models.CharField(max_length=50)

    def __str__(self):
        return self.name

urls:

    url(r'^customer/$', views.customer, name='customer'),

view:

def customer(request):
    model = CustomersInfo
    data = []
    custominfo = model.objects.all()

    for i in custominfo:
        cst = {'id': i.id, 'name': i.name, 'sexuality': i.sexuality, 'age': i.age, 'telphone': i.telphone,
               'webchat': i.webchat, 'birthday': i.birthday.date(), 'method': i.method, 'note': i.note}
        data.append(cst)

    if request.method == 'GET':
content_type='application/json')
        loadtemplate = loader.get_template("skincrm/customer.html")
        # 第二个参数使中文字符不会被转成ascii码,第三个参数使日期可以正常转换
        contextjson = Context({"json": json.dumps(data, ensure_ascii=False, cls=DjangoJSONEncoder)})
        return HttpResponse(loadtemplate.render(contextjson))
    else:
        return render()

html:

			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				
				
				var parent_column = $(grid_selector).closest('[class*="col-"]');
				//resize to fit page size
				$(window).on('resize.jqGrid', function () {
					$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
			    })
				
				//resize on sidebar collapse/expand
				$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
					if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
						//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
						setTimeout(function() {
							$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
						}, 20);
					}
			    })
				
				//if your grid is inside another element, for example a tab pane, you should use its parent's width:
				/**
				$(window).on('resize.jqGrid', function () {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				})
				//and also set width when tab pane becomes visible
				$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				  if($(e.target).attr('href') == '#mygrid') {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				  }
				})
				*/

			
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
			
					//subgrid options
					subGrid : true,
					//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
					//datatype: "xml",
					subGridOptions : {
						plusicon : "ace-icon fa fa-plus center bigger-110 blue",
						minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
						openicon : "ace-icon fa fa-chevron-right center orange"
					},
					//for this example we are using local data
					subGridRowExpanded: function (subgridDivId, rowId) {
						var subgridTableId = subgridDivId + "_t";
						$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
						$("#" + subgridTableId).jqGrid({
							datatype: 'local',
							data: subgrid_data,
							colNames: ['No','Item Name','Qty'],
							colModel: [
								{ name: 'id', width: 50 },
								{ name: 'name', width: 150 },
								{ name: 'qty', width: 50 }
							]
						});
					},
					


{#					data: {},#}
                    url:"{% url 'skincrm:customer' %}",
                    mytype:"GET",
					datatype: "json",
					height: 400,
					colNames:[' ', '序号','姓名', '性别', '年龄', '电话','微信','生日', '方式','备注'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								//delbutton: false,//disable delete button
								
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						{name:'id',index:'id', width:60, sorttype:"int", editable: false},
						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"10",maxlength:"15"}},
						{name:'sexuality',index:'sexuality', width:70, editable: true,edittype:"checkbox",editoptions: {value:"男:女"},unformat: aceSwitch},
                        {name:'age',index:'age', width:60, sorttype:"int", editable: true},
                        {name:'telphone',index:'telphone', width:150,editable: true,editoptions:{size:"10",maxlength:"15"}},
                        {name:'webchat',index:'webchat', width:150,editable: true,editoptions:{size:"10",maxlength:"15"}},
                        {name:'birthday',index:'birthday',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'method',index:'method', width:90, editable: true,edittype:"select",editoptions:{value:"AD:广告;FD:朋友;WB:朋友圈;GB:团购"}},
						{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} 
					],

                    jsonReader: {
                        repeatitems: false
                    },
					viewrecords: true,
                    //loadonce: true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,

					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
{#					editurl: "{% url '' %}",//nothing is saved#}
					caption: "客户资料信息"
			
					//,autowidth: true,
			
			
					/**
					,
					grouping:true, 
					groupingView : { 
						 groupField : ['name'],
						 groupDataSorted : true,
						 plusicon : 'fa fa-chevron-down bigger-110',
						 minusicon : 'fa fa-chevron-up bigger-110'
					},
					caption: "Grouping"
					*/
			
				});
				$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

 

加载中
返回顶部
顶部