jsGrid数据加载失败求助：SpringBoot环境下表头显示但无JSON数据

先梳理你代码里的几个关键问题，这些是导致数据加载失败和页面异常的核心原因：

1. 错误地用<script>标签引入CSS文件 #

你把jsGrid的CSS文件用<script>标签引入了，这会导致CSS完全无法生效，甚至可能引发JS解析错误：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.css"></script>

CSS文件必须用<link rel="stylesheet">标签引入，这是最基础的前端资源加载规范。

2. 重复引入jsGrid资源 #

你同时引入了jsGrid的开发版和压缩版JS，以及本地+CDN的重复CSS，这会导致资源冲突，干扰jsGrid正常初始化：

• 同时加载了jsgrid.js和jsgrid.min.js
• 本地/css/jsgrid.min.css和CDN版css重复引入

3. SpringBoot本地资源路径问题 #

你的代码里引用了/css/demos.css这类本地路径，如果这些文件没有放在SpringBoot的src/main/resources/static/css/目录下，会触发404错误，影响页面整体渲染。

修正后的完整代码 #

下面是修复后的代码，解决了上述所有问题，确保数据能正常加载显示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Basic Scenario - jsGrid Demo</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
    <!-- 移除本地未存在的CSS，改用CDN完整资源 -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid-theme.min.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
    
    <!-- 确保jQuery只引入一次，优先使用CDN -->
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    
    <!-- 正确引入jsGrid的JS文件（仅保留压缩版） -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.js"></script>
</head>
<body>
    <h1>Basic Scenario</h1>
    <div id="jsGrid"></div>

    <script>
        $("#jsGrid").jsGrid({
            height: "90%",
            width: "100%",
            filtering: true,
            editing: true,
            sorting: true,
            paging: true,
            autoload: true,
            pageSize: 15,
            pageButtonCount: 5,
            deleteConfirm: "Do you really want to delete the client?",
            controller: {
                loadData: function(filter) {
                    // 直接返回符合jsGrid预期的结构即可
                    return {
                        data: [
                            {"Name":"Edmund", "Age": 25},
                            {"Name":"Lucy", "Age": 22}
                        ],
                        itemsCount: 2
                    };
                }
            },
            fields: [
                { name: "Name", type: "text", width: 150 },
                { name: "Age", type: "number", width: 50 } // Age是数字类型，改用number更贴合数据属性
            ]
        });
    </script>
</body>
</html>

额外补充说明 #

1. SpringBoot静态资源配置：如果想使用本地CSS/JS文件，务必把文件放在src/main/resources/static/目录下，比如static/css/demos.css，这样访问/css/demos.css就能正常加载。
2. 异步数据加载适配：如果后续要对接后端接口，loadData需要返回Promise对象，示例如下：

loadData: function(filter) {
    return $.ajax({
        type: "GET",
        url: "/api/clients",
        data: filter,
        dataType: "json"
    });
}

确保后端返回的JSON结构为{ data: [...], itemsCount: X }（分页场景），或者直接返回数组（不分页场景）。

内容的提问来源于stack exchange，提问作者David Jones