LyricLee_ 2019-10-20 15:44 采纳率: 0%
浏览 473

使用jqGrid时，前端获取到了数据，但是不显示，求大佬指点

ajax请求代码：
$(function() {
$("#jqGrid").jqGrid({
url: 'http://localhost:8085/ssmdemo_war/user/userInfoShow',
datatype: "json",
colModel: [{
label: 'id',
name: 'id',
index: 'id',
width: 50,
hidden: false,
key: true
},
{
label: '登录名',
name: 'username',
index: 'username',
sortable: false,
width: 80
},
{
label: '密码',
name: 'password',
index: 'password',
sortable: false,
width: 80
}
],
height: 485,
rowNum: 10,
rowList: [10, 30, 50],
styleUI: 'Bootstrap',
loadtext: '信息读取中...',
rownumbers: true,
rownumWidth: 35,
autowidth: true,
multiselect: true,
pager: "#jqGridPager",
jsonReader: {
root: "list",
page: "currPage",
total: "totalPage",
records: "totalCount",
repeatitems: false
},
prmNames: {
page: "page",
rows: "limit",
order: "order"
},
gridComplete: function() {
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({
"overflow-x": "hidden"
});
}
});
});

json数据：
图片说明

  • 写回答

1条回答 默认 最新

  • 来一颗砂糖橘 2023-05-12 13:02
    关注

    1.下面代码是我复制过来你的代码写的，下面是源码,效果是可以出来的
    我这里没有后台服务所以只用vscode挂了个端口请求本地json文件
    2.可以定位下问题：

    • 保证引入的插件是可用的，可以搞成静态的数据看看效果能不能出来
    • 保证dom的id是对上的，调用$("#jqGrid").jqGrid()时，保证此时$("#jqGrid")可以通过console.log打印出来
    • jqGrid需要的数据结构是这样的{list: []}, 要保证你的数据结构不是`{data: {list: []}}这样的

    img

    ./testdata.json

    {
    "totalCount": 18,
    "totalPage": 2,
    "currPage": 1,
    "list": [
        {"id": "1", "username": "user1", "password": "123456"},
        {"id": "2", "username": "user2", "password": "123456"},
        {"id": "3", "username": "user3", "password": "123456"},
        {"id": "4", "username": "user4", "password": "123456"},
        {"id": "5", "username": "user5", "password": "123456"},
        {"id": "6", "username": "user6", "password": "123456"}
    ]
}

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/ui.jqgrid.css">
    <script src="./js/jquery-1.4.2.min.js"></script>
    <script src="./js/jquery.jqGrid.min.js"></script>
</head>
<body>
    <div>
        <table id="gridTable"></table>
    </div>
</body>
<script>
    $(function() {
        $("#gridTable").jqGrid({
            url: './testdata.json',
            datatype: "json",
            colModel: [{
                label: 'id',
                name: 'id',
                index: 'id',
                width: 50,
                hidden: false,
                key: true
            },
            {
                label: '登录名',
                name: 'username',
                index: 'username',
                sortable: false,
                width: 80
            },
            {
                label: '密码',
                name: 'password',
                index: 'password',
                sortable: false,
                width: 80
            }],
            height: 485,
            rowNum: 10,
            rowList: [10, 30, 50],
            styleUI: 'Bootstrap',
            loadtext: '信息读取中...',
            rownumbers: true,
            rownumWidth: 35,
            autowidth: true,
            multiselect: true,
            pager: "#jqGridPager",
            jsonReader: {
                root: "list",
                page: "currPage",
                total: "totalPage",
                records: "totalCount",
                repeatitems: false
            },
            prmNames: {
                page: "page",
                rows: "limit",
                order: "order"
            },
            gridComplete: function() {
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({
                    "overflow-x": "hidden"
                });
            }
        });
    });
</script>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试，帮帮忙吧
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建