Question

我想使用datagrid来显示一些json数据。由于其他原因，我使用方法'loadData'来加载获取的json。似乎已成功获取json（浏览器警报正确），但以下代码无法工作，表（#dg）为空。

@(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://libs.baidu.com/jquery/1.10.2/jquery.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 () {
        //        if ( parent.location.hostname != self.location.hostname ) {
        //        self.location = "/nopermission.html" ;
        //        }

        field = "commentnum" ;
        $("#dg").width($(self).width())
        .height($(self).height())
        .datagrid({
                url: "http://localhost:9000/json/"+ $("#category" ).text() + "/" + field,
                method:"GET",
        loadMsg : 'Loading',
        view : scrollview,
        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"></table>
    </body>
</html>

jquery easyui datagrid无法使用方法'loadData'

0 个答案: