如何从 SQL 服务器绑定 jsGrid

Question

我正在使用 jsGrid（网格 jQuery 插件）以表格格式显示数据，下面是我的代码

<script>
    $(function() {

        $("#jsGrid").jsGrid({
            height: "70%",
            width: "100%",
            filtering: true,
            editing: true,
            inserting: true,
            sorting: true,
            paging: true,
            autoload: true,
            pageSize: 15,
            pageButtonCount: 5,
            deleteConfirm: "Do you really want to delete the client?",
            controller: db,
            fields: [
                { name: "Name", type: "text", width: 150 },
                { name: "Age", type: "number", width: 50 },
                { name: "Address", type: "text", width: 200 },
                { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
                { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                { type: "control" }
            ]
        });

    });
</script>

它从服务或文件中获取数据 db.js 如下

db.countries = [
    { Name: "", Id: 0 },
    { Name: "United States", Id: 1 },
    { Name: "Canada", Id: 2 },
    { Name: "United Kingdom", Id: 3 },
    { Name: "France", Id: 4 },
    { Name: "Brazil", Id: 5 },
    { Name: "China", Id: 6 },
    { Name: "Russia", Id: 7 }
];

db.clients = [
    {
        "Name": "Otto Clay",
        "Age": 61,
        "Country": 6,
        "Address": "Ap #897-1459 Quam Avenue",
        "Married": false
    },
    {
        "Name": "Connor Johnston",
        "Age": 73,
        "Country": 7,
        "Address": "Ap #370-4647 Dis Av.",
        "Married": false
    },
    {
        "Name": "Lacey Hess",
        "Age": 29,
        "Country": 7,
        "Address": "Ap #365-8835 Integer St.",
        "Married": false
    }];

我想从像 MS SQL 服务器这样的数据源向它传递数据，我们该怎么做？

Answer 1

您的网格是否使用来自 db.js 的上述静态数据？如果是，那么它与 jsGrid 无关，而与 SQL 和 Web 服务有关。基本上，您需要创建一个 Web 服务来查询您的 SQL 数据库和 returns 一个用于您的 jsGrid 的数据数组。

Web服务的调用可以在loadData控制器中。 documentation 显示了一个简单的例子。下面是一个使用 promises 的类似示例，其中 /api/data 是对 Web 服务的 Ajax 调用，它必须 return 静态文件形式的数据 returning:

 ...
 controller: {
   loadData: function(filter) { 
               return $.getJSON("/api/data/"
                ).done(function(results) {
                    console.log(results);
               }).fail(function(err) {
                     alert(err));
                  }); 
     },
 },
 ...

您可能希望从简单开始并暂时避免分页以测试获取数据是否有效。分页需要更复杂的查询，还需要 return 结果中的记录总数。来自 documentation：

dataResult depends on pageLoading. When pageLoading is false (by default), then data result is a plain javascript array of objects. If pageLoading is true data result should have following structure:

{
   data          // array of items
   itemsCount    // total items amount in storage
}

如何从 SQL 服务器绑定 jsGrid

How to bind jsGrid from SQL Server

c#

jsgrid