jqgrid获取数据库数据

本文主要是介绍jqgrid获取数据库数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jqgrid获取数据库数据

jqgrid获取数据有两种方法，一种是获取本地（即html中写入的固定的数据），另一种是获取后台数据库中的数据。
不过，不论是哪种方法，我这里采用的，都是基于local的数据获取方式，后台数据库的数据，也是通过Django与JavaScript之间的数据传递，将后台数据传给html中的js内的变量，然后以local 的方式显示在网页jqgrid中。

1.写入固定的数据

首先，先放上代码：

<script type="text/javascript">$(".grid").jqGrid({datatype: "local",height: 250,colNames: ['title', 'key_word', 'url_address', 'text_content'],colModel: [{name: 'title', index: 'title', width: 60},{name: 'key_word', index: 'key_word', width: 90},{name: 'url_address', index: 'url_address', width: 100},{name: 'text_content', index: 'text_content', width: 100},],caption: "討厭鬼grid"});var gameDate = [{"title":"2","key_word":"333","url_address":"還可以", "text_content":"sfdsfdsf"},{"title":"3","key_word":"Lineage","url_address":"死外掛", "text_content":"sfdsfdsf"},{"title":"4","key_word":"RO","url_address":"不想玩", "text_content":"sfdsfdsf"}];for(var i=0;i<=gameDate.length;i++){$(".grid").jqGrid('addRowData',i+1,gameDate[i]);}
</script>

这种方法是写入固定的数据，后期无法更改，也不能动态显示。可以作为前期对jqgrid的一种实现，先把表格展现出来再说。我这里引用的jqgrid版本，如下所示：（包括对应的css样式文件）

<link href="/static/css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
<link href="/static/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/static/js/grid.locale-cn.js"></script>

2.获取数据库中的数据

获取数据库中的数据，便涉及到Django与JavaScript的数据传递机制，这里直接搬运一下“Django自强学堂” 关于这一块儿的教学（又是基础知识！应该打牢才是！！）

更详细的Django知识，可以戳传送门，去Django自强学堂学习了解：Django自强学堂网站。
到这里，我们解决了通过Django传送数据给js的问题，那么还有两个问题：

1. 在Django后台，如何获取数据库的数据，并改为jqgrid要求的格式？

2. 在js前端，如何将数据显示在jqgrid中？

先来看第一个问题，在Django中，获取数据库中的数据，我们可以编写如下的辅助函数：

def read_data_from_database():# 读数据到表格datas= Board.objects.values_list('title', 'key_word', 'url_address', 'text_content')orders = list(datas)data = []datain = []# 对数据进行预处理for tr in orders:for zr in tr:datain.append(zr)data.append(datain)datain = []Dict = []# 将数据变为jqgrid要求的格式，即对应的键值对for i in data:dict_in = {"title": i[0], "key_word": i[1], "url_address": i[2], "text_content": i[3]}Dict.append(dict_in)data = json.dumps(Dict)return data

接着，在views.py中，调用上面的函数，然后渲染到html中，代码如下：

def show_form(request):data = readorderfromdatabase()return render(request, 'form.html', {'Dict':data})

至此，我们就解决了第一个问题，把数据按照要求，顺利地传到了前端，在html中可以获取到数据，那么，接下来如何在js中处理数据，并调用jqgrid相关接口，将数据显示到表格中去呢？
首先，我们先来看代码，如下所示：

<script type="text/javascript">var Dict = {{ Dict|safe }};$(".grid").jqGrid({datatype: "local",height: 250,colNames: ['title', 'key_word', 'url_address', 'text_content'],colModel: [{name: 'title', index: 'title', width: 60},{name: 'key_word', index: 'key_word', width: 90},{name: 'url_address', index: 'url_address', width: 100},{name: 'text_content', index: 'text_content', width: 100},],caption: "这里是表格的总标题"});var gameDate = Dict;for(var i=0;i<=gameDate.length;i++){$(".grid").jqGrid('addRowData',i+1,gameDate[i]);}
</script>

正如前面强调的，这里，要加上safe过滤器，否则无法正常接收数据。数据格式也很重要。其实就相当于第一种方法里的固定数据传送，只不过这里的数据不是写在html中的固定数据，而是来自于后台Django传递来的数据，数据格式和固定数据的格式应该保持一致，否则jqgrid无法显示的。

至此，基本上就解决了后台Django数据传送到js端并通过jqgrid显示的问题。这个问题困扰了我将近两天的时间，百度Google了大量资料，看得我都快自闭了，最后在Django基础知识里找到了答案……这更加说明了基础知识的重要性！另一方面，自己查资料的方向也出错了，之前一直在查jQuery、jqgrid等纯前端方面的知识，所以查到了各种自己不懂得东西，什么ajax、php、jqgrid里的url、json服务器传值等等……最后就查了一次Django，就找到问题所在了。

不过，目前实现的jqgrid虽然可以显示数据库中的值了，但是依然存在一些问题需要处理，比如通过表单提交新的值后，需要重新刷新页面才能更新，这是因为自己写的jQuery代码没有包含刷新的函数，所以只是在页面加载的第一次进行了显示。
还有一些功能没有完善，比如增、删、改、查以及排序、筛选等等，需要后面继续深入了解。
————————更新分割线————————————
已经解决，当页面重载时，数据更新问题。
解决方法，见该链接：https://blog.csdn.net/u012746051/article/details/52949353
其中的核心代码复制粘贴如下：

<script>
$("#jqGrid_ds").jqGrid('clearGridData');  //清空表格
$("#jqGrid_ds").jqGrid('setGridParam',{  // 重新加载数据datatype:'local',data : newdata,   //  newdata 是符合格式要求的需要重新加载的数据 page:1
}).trigger("reloadGrid");
</script>