jsgrid使用control的loadData动态加载数据

近日因为要做一个管理后台，使用了AdminLte,做了权限控制后就要做数据显示了，我选择了jsgrid。jsgrid可以静态加载数据，也可以动态加载数据，静态加载数据在官方文档有直接可运行的例子，这里只要说一下动态的加载数据如何使用loadData来测试。

                <div class="card-body">
                    <div id="jsGrid1"></div>
                </div>

页面主要代码如上图。然后引用jsgrid的js

<script src="/static/plugins/jsgrid/jsgrid.min.js"></script>

关键来了，模拟json数据

我们在自己项目里/static/demo_db/jsgridData.js文件里写了要返回的json格式的数据，这样只要小伙伴们只要将自己的服务器的数据返回同样的格式类型就可以正常运行，而不必纠结于如何返回，返回什么样的数据，也不管你用的什么语言都可以测试。下面是jjsgridData.js里的数据：

[
    {
        "Name": "Otto Clay",
        "Age": 61,
        "Country": 6,
        "Address": "Ap #897-1459 Quam Avenue",
        "Married": false
    },
    {
        "Name": "Valentine Brady",
        "Age": 72,
        "Country": 7,
        "Address": "8014 Enim. Road",
        "Married": true
    },
    {
        "Name": "Rebecca Gardner",
        "Age": 57,
        "Country": 4,
        "Address": "8655 Arcu. Road",
        "Married": true
    },
    {
        "Name": "Vladimir Tate",
        "Age": 26,
        "Country": 1,
        "Address": "130-1291 Non, Rd.",
        "Married": true
    },
    {
        "Name": "Vernon Hays",
        "Age": 56,
        "Country": 4,
        "Address": "964-5552 In Rd.",
        "Married": true
    },
    {
        "Name": "Allegra Hull",
        "Age": 22,
        "Country": 4,
        "Address": "245-8891 Donec St.",
        "Married": true
    },
    {
        "Name": "Hu Hendrix",
        "Age": 65,
        "Country": 7,
        "Address": "428-5404 Tempus Ave",
        "Married": true
    },
    {
        "Name": "Kenyon Battle",
        "Age": 32,
        "Country": 2,
        "Address": "921-6804 Lectus St.",
        "Married": false
    }
]

 然后在html页面加上脚本就可以运行了。

<script>
                $(function () {
                    $("#jsGrid1").jsGrid({
                        width: "100%",
                        height: "auto",
                        autoload:   true,
                        paging:     true,
                        pageSize:   3,
                        pageButtonCount: 5,
                        pageIndex:  1,

                        fields: [
                            { name: "Name", type: "text", width: 150 },
                            { name: "Age", type: "number", width: 50 },
                            { name: "Address", type: "text", width: 200 },
                            { name: "Country", type: "text" , width: 100  },
                            { name: "Married", type: "checkbox", title: "Is Married" }
                        ],
                        controller:{
                            loadData: function(filter) {
                                return $.ajax({
                                    url: "/static/demo_db/jsgridData.js",
                                    dataType: "json"
                                });
                            }
                        },
                    });
                });
            </script>

运行效果如下图：

相当可以，我给自己打9分，没有直接上传可下载的文件，哈哈。