我正在使用jqGrid添加工具栏搜索，就像工具栏搜索示例中的示例一样 已经实现了基础和高级示例，如网站教程，我的页面就像this 但我不知道如何在Django中使用此功能！我的网格顶部的那些输入类型的名称是什么！?? 这个例子不清楚！你能帮助我吗 ？？ [这是我在github上的源代码] [4]
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Page</title>
<!-- external scripts -->
<!-- jQuery & Bootstrap -->
<script type="text/javascript" src="{% static "js/jquery.js" %}"/></script>
<script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/></script>
<link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/>
<script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/></script>
<!-- jQuery & Bootstrap -->
<!-- jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" />
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" />
<script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/></script>
<!-- jqGrid -->
<!-- own implemented scripts -->
<!-- <script type="text/javascript" src="{% static "js/script.js" %}"/></script> -->
<!-- own implemented scripts -->
<!-- external scripts-->
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "http://localhost:8000/getdata",
datatype: "json",
mtype: "GET",
colNames: ["id", "name", "english_title", "capacity"],
colModel: [
{ name: "id", index:"id", width: 55 },
{ name: "name", width: 80 },
{ name: "english_title", width: 130, align: "right" },
{ name: "capacity", width: 80, align: "right" },
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
loadonce:true,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
rownumbers: true,
rownumWidth: 40,
gridview: true,
multiselect: false,
caption: "Rooms",
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list_d").jqGrid('getGridParam','records') >0 )
{
console.log(ids);
jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
}
} else {
console.log(ids);
jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
jQuery("#list_d").jqGrid('setCaption',"Price Detail of room : "+ids)
}
}
});
jQuery("#list").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});
jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#list_d").jqGrid({
height: 100,
width:345,
url:'getpricelist?q=1&id=2',
datatype: "json",
colNames:['from','to', 'price'],
colModel:[
{name:'from',index:'from', width:100},
{name:'to',index:'to', width:100},
{name:'price',index:'price', width:80, align:"right"},
],
rowNum:5,
rowList:[5,10,20],
pager: '#pager_d',
sortname: 'item',
viewrecords: true,
sortorder: "asc",
multiselect: false,
caption:"Price Detail"
}).navGrid('#pager_d',{add:false,edit:false,del:false});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<table id="list_d"></table>
<div id="pager_d"></div>
</body>
</html>
models.py:
from django.db import models
from datetime import datetime
class room_type(models.Model):
id = models.IntegerField(primary_key = True)
code = models.CharField(max_length = 40)
name = models.CharField(max_length= 40 )
title = models.CharField(max_length = 40)
english_title = models.CharField(max_length=40)
capacity = models.IntegerField()
extra_capacity = models.IntegerField()
description = models.CharField(max_length=255)
class Meta:
db_table = 'room_types'
def __unicode__(self):
return u'%d' % (self.id)
class room_icon(models.Model):
id = models.IntegerField(primary_key = True)
status = models.IntegerField()
color_of_icon = models.CharField(max_length=40)
path_of_icon = models.CharField(max_length=255)
#foreign_key : a room has only one icon
rt_id = models.ForeignKey(room_type)
class Meta:
db_table = 'room_icons'
def __unicode__(self):
return u'%d' % (self.id)
class attachment(models.Model):
id = models.IntegerField(primary_key = True)
path_of_pic = models.CharField(max_length=255)
#foreign key : a room has many images
rt_id = models.ForeignKey(room_type)
class Meta:
db_table = 'attachments'
def __unicode__(self):
return u'%d' % (self.id)
views.py：
from django.shortcuts import render
from django.utils import simplejson
from django.http import HttpResponse
from rooms.models import *
from django.db.models import Q
from django.core import serializers
def index(request):
return render(request, 'index.html')
def getdata(request):
data=room_type.objects.all()
json=[]
for o in data:
json.append({'id':o.id, 'name':o.name, 'english_title':o.english_title, 'capacity':o.capacity})
return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
def getpricelist(request):
requested_room_id = request.GET.get('id', '')
room = room_type.objects.get(id = requested_room_id)
price_list_set = room.price_list_set.all()
json=[]
for price_list in price_list_set:
json.append({'from':price_list.from_date, 'to':price_list.to_date, 'price':price_list.price})
return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
class price_list(models.Model):
id = models.IntegerField(primary_key = True)
from_date = models.CharField(max_length=10)
to_date = models.CharField(max_length=10)
price = models.IntegerField()
#foreign key : a room has a pricee list
rt_id = models.ForeignKey(room_type)
class Meta:
db_table = 'price_lists'
def __unicode__(self):
return u'%d' % (self.id)
最终编辑：
如果我已经编辑了html文件，现在所有文件都是正确的，如果你需要jjGo示例的django源代码（工具栏搜索，高级主细节和加载json数据）你可以使用我的，只是工作正常;）！ ！
Tnx再次@Oleg寻求帮助;）
答案 0 :(得分：1)
我不是Django开发人员，但服务器端代码看起来像是返回所有未排序项的数组。在这种情况下，您应该使用jqGrid的loadonce: true选项。如果jqGrid在第一次加载后将所有数据保存在内部参数data和_index中，并将datatype选项更改为"local"。之后，搜索在客户端上运行，您无需在服务器代码中进行任何更改。
如果您使用loadonce: true选项，并且需要从服务器重新加载数据（例如在更改url后），则必须将datatype重置为其原始值datatype: "json"：
$("#list_d").jqGrid("setGridParam", {
url: "getpricelist?q=1&id=" + encodeURIComponent(ids),
page: 1,
datatype: "json"
}).trigger("reloadGrid");
我建议考虑在第二个（详细信息网格）中另外使用datatype: "local"。当前代码使用url:'getpricelist?q=1&id=2', datatype: "json"。因此，第二个网格将在选定的第一个网格中的一行之前填充。使用datatype: "local"可以阻止加载。
我建议您在两个网格中使用gridview: true和autoencode: true选项，并将key: true属性添加到第一个网格中"id"列的定义中。如果您执行此操作，则id个<tr>元素（网格行）将分配给id列中的值。它可以简化编辑操作。
最后一句话：jqGrid将始终 id属性（称为rowid）分配给网格的每一行。 id必须在整个页面上都是唯一的。如果你有更多的网格，你可能会在网格中出现id冲突。为确保您没有遇到此问题，可以考虑对不同的网格（网格中的一个网格）使用不同的idPrefix参数（例如idPrefix: "g1_"和idPrefix: "g2_"）。在这种情况下，rowid值将根据idPrefix和从您的数据分配的ID（例如第一个网格中的id列）构建。如果您需要剪切前缀（例如，将其用作URL中的参数），则可以使用$.jgrid.stripPref方法。例如，在构建详细网格的$.jgrid.stripPref($(this).jqGrid("getGridParam", "idPrefix"), ids)期间，您可以使用id代替url。