开发者社区> 问答> 正文

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

小旋风柴进 2016-03-26 09:41:23 1185

更新,我用下面的代码重新运行了一下,现在能加载上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>
JSON JavaScript 前端开发 数据格式
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:22
    {
      "total": 1,
      "rows": [
        {
          "id": "13019921",
          "insidepage": "2015-05-15"
        }
      ]
    }

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

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程