jquery easyui datagrid 使用 method 'loadData' 显示不了json数据-问答-阿里云开发者社区-阿里云

开发者社区> 小旋风柴进> 正文

jquery easyui datagrid 使用 method 'loadData' 显示不了json数据

2016-03-26 09:41:23 3055 1

更新,我用下面的代码重新运行了一下,现在能加载上json数据了,但是查看网页源代码能看到元素,网页中却显示空白。这是最新的问题。
我自己定义了一个loaddata函数,里面GET方法得到json数据(能成功),但是在回调函数里面使用datagrid的'loadData'方法无法将数据显示出来,查看网页元素显示相应的表是空的。请问这是怎么回事?下面是相应的代码。

这个是datagrid的定义函数

@(category:String)
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title id="category">@category</title>
        <link rel="stylesheet" type="text/css" href="@routes.Assets.at("themes/default/easyui.css")">
        <link rel="stylesheet" type="text/css" href="@routes.Assets.at("themes/icon.css")">
        <style type="text/css">
        body {
        margin: 0px;
        }

        a {
        color: #21759b;
        text-decoration: none;
        }

        a:hover {
        color: #0f3647;
        text-decoration: underline;
        }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="@routes.Assets.at("js/jquery.easyui.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.at("js/datagrid-scrollview.js")"></script>
        @*<script type="text/javascript" src="@routes.Assets.at(js/jquery.flot.min.js)"></script>*@
        @*<script type="text/javascript" src="@routes.Assets.at(js/jquery.flot.time.min.js)"></script>*@
        <script type="text/javascript" src="@routes.Assets.at("js/jquery.mousewheel.min.js")"></script>
        <script type="text/javascript">
        var field; //当前排序字段
        var rows; //数据
        var scrollLeft = 0; //横向滚动条位置,可恢复
        var scrollEvent = function(e) { //滚动条事件
        scrollLeft = $(this).scrollLeft();
        };

        //阻止连带滚动外部窗口
        var preventScrollParent = function(e, d) {
        var t = $(this);
        if (d > 0 && t.scrollTop() <= 0) {
        e.preventDefault();
        } else {
        if (d < 0 && (t.scrollTop() >= t.get(0).scrollHeight - t.innerHeight())) {
        e.preventDefault();
        }
        }
        };

        $(function () {
        field = "commentnum" ;
        $("#dg").width($(self).width())
        .height($(self).height())
        .datagrid({
//        url: "http://localhost:9000/json/"+ $("#category" ).text() + "/" + field,
//        method:"GET",
        loadMsg : 'Loading',
        view : scrollview,
        idField: 'id',
        pageSize : 50,
        autoRowHeight : false,
        rownumbers : true,
        singleSelect : true,
        border : false,
        striped : true,
        onLoadSuccess : loadFinish
//        columns:[[
//        {field:'id',title:'id',width:100},
//        {field:'name',title:'名字',width:400},
//        {field:'url',title:'访问购买',width:220,align:'right'},
//        //        {field:'imgsrc',title:'图片',width:100,align:'right'},
//        {field:'price',title:'价格',width:60,align:'right'},
//        {field:'commentnum',title:'评论数',width:60,align:'right'},
//        {field:'likerate',title:'好评率',width:60,align:'right'},
//        {field:'category',title:'品类',width:60,align:'right'}
//        ]]
        });
        setTimeout(loaddata, 50);
        });

        //加载某列排序的数据
        function loaddata() {
        $("#dg").datagrid("loading");

        $.getJSON("http://localhost:9000/json/"+ $("#category" ).text() + "/" + field, {}, function(result) {
        rows = result.rows;
        $("#dg").datagrid('loadData', rows);
        });
        }

        //加载完成后处理
        function loadFinish() {
        $("#dg").datagrid("loaded");
        $(".datagrid-view2 .datagrid-body").scrollLeft(scrollLeft);
        $(".datagrid-header-row>td").css("font-weight", "normal");
        $(".datagrid-header-row>td[field='" + field + "'").css("font-weight", "bold");
        $(".datagrid-header-row>td").click(function() {
        clickTitle($(this));
        });
        $(".datagrid-row a").click(function(e) {
        e.stopPropagation();
        })
        $(".datagrid-view2 .datagrid-body").scroll(scrollEvent);
        $(".datagrid-view2 .datagrid-body").bind('mousewheel', preventScrollParent);
        }


        //标题点击排序事件
        function clickTitle(title) {
        if (title.attr("field") && title.attr("field") != field && (title.attr("field") == "price"||title.attr("field")=="likerate"||title.attr("field")=="commentnum")) {
        scrollLeft = $(".datagrid-view2 .datagrid-body").scrollLeft();
        field = title.attr("field");
        $(".datagrid-view2 .datagrid-body").unbind("scroll", scrollEvent);
        $(".datagrid-view2 .datagrid-body").unbind('mousewheel', preventScrollParent);
        loaddata();
        }
        }

        //当前排序列加粗
        function cellStyle(colname) {
        return function(value, row, index) {
        if (colname == field) return 'font-weight:bold;';
        else return '';
        }
        }
        </script>
    </head>
    <body>

        <table id="dg">
            <thead>
                <tr>
                    <th data-options="field:'id'" width="100">ID</th>
                    <th data-options="field:'name'" width="100">名字</th>
                    <th data-options="field:'url'" width="100">访问网页</th>
                    <th data-options="field:'price'" width="100">价格</th>
                    <th data-options="field:'commentnum'" width="100">评价数</th>
                    <th data-options="field:'likerate'" width="100">好评率</th>
                    <th data-options="field:'category'" width="100">品类</th>
                </tr>
            </thead>
        </table>
    </body>
</html>
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:22
    {
      "total": 1,
      "rows": [
        {
          "id": "13019921",
          "insidepage": "2015-05-15"
        }
      ]
    }

    这是要返回的json格式,是否和你的一致

    0 0
相关问答

4

回答

Spark 【问答合集】

社区小助手 2019-05-29 14:13:40 123644浏览量 回答数 4

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157037浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92810浏览量 回答数 28

3

回答

Logstash采集文件名称以及自定义格式的日志文件采集

Snorlax 2019-06-18 11:51:28 114622浏览量 回答数 3

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146740浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145580浏览量 回答数 31

1

回答

出现这个问题求解决This XML file does not appear to have any

淘合肥 2017-04-08 21:07:00 88841浏览量 回答数 1

41

回答

【精品问答集锦】Python热门问题

小六码奴 2019-05-30 15:27:34 135453浏览量 回答数 41

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302556浏览量 回答数 249

24

回答

【精品问答】python技术1000问(1)

问问小秘 2019-11-15 13:25:00 471183浏览量 回答数 24
2728
文章
6591
问答
问答排行榜
最热
最新
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载