0

我刚刚发现了 jsGrid 并开始使用“ http://js-grid.com/demos/ ”上的“基本场景”示例。这是在我遵循“ http://js-grid.com/getting-started/ ”的入门之后。

为了进行测试，我最终得到了下面的 html 和 js 文件。问题，没有任何工作。

我无法像在演示中那样显示“基本场景”表。

谁能展示我缺少的东西？

这是我的理解： 1. 下载 jsgris js 和 css 文件 - 我做了这个 2. 你必须有 html 和 div "" - 我做了这个 3. 需要 js 代码来创建 jsgrid 对象 - 我做了这个,（见我的js代码）

我的理解是，在演示示例中，使用的数据源是代码中的“客户端”数组。

我错过了什么？

    var clients = [
        { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
        { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
        { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
        { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
        { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
    ];
 
    var countries = [
        { Name: "", Id: 0 },
        { Name: "United States", Id: 1 },
        { Name: "Canada", Id: 2 },
        { Name: "United Kingdom", Id: 3 }
    ];
 
    $("#jsGrid").jsGrid({
        debugger;
        width: "100%",
        height: "400px",
 
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
 
        data: clients,
 
        fields: [
            { name: "Name", type: "text", width: 150, validate: "required" },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="/public/css/style.css" rel="stylesheet" />
    <link href="http://js-grid.com/css/jsgrid.min.css" rel="stylesheet" />
    <link href="http://js-grid.com/css/jsgrid-theme.min.css" rel="stylesheet" />
    <title>JSGrid and PHP Sample</title>
</head>
<body>
<header>
    <h1>JSGrid and PHP Sample</h1>
</header>

<div id="jsGrid"></div>

<script>

</script>


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="/public/js/sample.js"></script>
</body>
</html>

4

0 回答 0