jqgrid树不显示像列表而不是树

时间:2017-07-07 14:57:00

标签: jqgrid

我有下面的jqgrid配置应该显示树状结构。相反,我得到一个展示的平面列表结构。有人可以告诉我我错过了什么吗? 以下是我按照html页面中列出的顺序使用的版本:

jquery/3.2.1/jquery.min.js,
jqgrid/4.6.0/js/i18n/grid.locale-en.js,
jqueryui/1.12.1/jquery-ui.min.js

来自triand.com网站:

jqgrid/js/i18n/grid.locale-en.js
jqgrid/js/jquery.jqGrid.min.js

我也在使用这些CSS:

jqueryui/1.8.14/themes/redmond/jquery-ui.css,
jqgrid/themes/ui.jqgrid.css (from triand.com), 
jqueryui/1.12.1/themes/smoothness/jquery-ui.css

按此顺序。我的网格看起来是灰色而不是漂亮的蓝色。我无法理解为什么。

$(document).ready(function(){
    $("#list").jqGrid({
        url : "/reconcile",
        datatype : "json",
        mtype : 'GET',
        colModel : [
            {name: "id",width:1,hidden:true, key:true},
            {name : 'data.key.busnDate', label : 'Business Date', hidden:false, sorttype:"date", width : 80 },
            {name : 'data.product', label : 'Product', sorttype:"string", width : 50, editable : false},
            {name : 'data.quantityBought', label : 'Quantity Bought', sorttype:"int", width : 100, editable : false},
            {"name":"level","hidden":true},
            {"name":"parent","hidden":true},
            {"name":"isLeaf","hidden":true},
            {"name":"expanded","hidden":true},
            {"name":"uiicon","hidden":true}
        ],
        treeGrid: true,
        pager : '#pager',
        loadonce:false,
        rowNum : 25,
        height: 'auto',
        rowList : [ 25,50,100,200 ],
        sortname : 'key.positionId',
        sortorder : 'asc',
        viewrecords : true,
        gridview : true,
        multiselect: false,
        multiboxonly: false,
        autoencode: true,
        caption : 'ARC Reconciliation',
        emptyrecords: "No records to found for given date!",
        jsonReader : {
                repeatitems : true,
        },
        treeIcons : {
            "plus": "ui-icon-circlesmall-plus",
            "minus": "ui-icon-circlesmall-minus",
            "leaf" : "ui-icon-document"
        },
        ExpandColumn: 'key.positionId'
    });
    jQuery("#list").jqGrid('navGrid', '#pager', {
        edit : false,
        add : false,
        del : false,
        view : true,
        search : true
    });
    $('#datePick').datepicker({
        onSelect: function (dateText, inst) {
            var e = $("#list").data("events");
            if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
                $("#list").trigger("reloadGrid");
            }
        }
    });
});

由于

1 个答案:

答案 0 :(得分:0)

您可以查看我们的新Guriddo jqGrid documentation here以获得问题的答案。

除此之外,您可能还想访问或tree grid demo here并提供许多新功能