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>

我的个人博客

欢迎大家访问我搭建的个人博客哦，通过github Page搭建的，基于hexo，用了next主题。有什么问题都可以互相交流。博客地址：我的个人博客：CodeSausage的博客