Question

我正在尝试学习jqGrid。我在此链接http://www.guriddo.net/demo/guriddojs/

上使用了演示版

但是我无法在标题部分显示排序箭头。这是代码： -

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script type="text/javascript"> 
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
            mtype: "GET",
            datatype: "jsonp",
            colModel: [
                { label: 'OrderID', name: 'OrderID', key: true, width: 75, sortable: true},
                { label: 'Customer ID', name: 'CustomerID', width: 150, sortable:true },
                { label: 'Order Date', name: 'OrderDate', width: 150, sortable: true},
                { label: 'Freight', name: 'Freight', width: 150,sortable: true },
                { label:'Ship Name', name: 'ShipName', width: 150,sortable: true }
            ],
            viewrecords: true,
            width: 780,
            height: 250,
            rowNum: 20,
            pager: "#jqGridPager"
        });
    });

Answer 1

尝试添加

sortable = true

$(document).ready(function () {
    $("#jqGrid").jqGrid({
        url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
        mtype: "GET",
        datatype: "jsonp",
        colModel: [
            { label: 'OrderID', name: 'OrderID', key: true, width: 75, sortable: true},
            { label: 'Customer ID', name: 'CustomerID', width: 150, sortable:true },
            { label: 'Order Date', name: 'OrderDate', width: 150, sortable: true},
            { label: 'Freight', name: 'Freight', width: 150,sortable: true },
            { label:'Ship Name', name: 'ShipName', width: 150,sortable: true }
        ],
        viewrecords: true,
        width: 780,
        height: 250,
        rowNum: 20,

        //Add the code here 
        sortable: true,

        pager: "#jqGridPager"
    });

});

您还可以通过

设置默认排序顺序

sortname：“OrderID”

sortorder：“asc”//这是默认的

代码将是

$(document).ready(function () {
$("#jqGrid").jqGrid({
    url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
    mtype: "GET",
    datatype: "jsonp",
    colModel: [
        { label: 'OrderID', name: 'OrderID', key: true, width: 75, sortable: true},
        { label: 'Customer ID', name: 'CustomerID', width: 150, sortable:true },
        { label: 'Order Date', name: 'OrderDate', width: 150, sortable: true},
        { label: 'Freight', name: 'Freight', width: 150,sortable: true },
        { label:'Ship Name', name: 'ShipName', width: 150,sortable: true }
    ],
    viewrecords: true,
    width: 780,
    height: 250,
    rowNum: 20,

    //Add the code here 
    sortable: true,
    sortname: "OrderID",
    sortorder: "asc",

    pager: "#jqGridPager"
});

});

jqGrid中不显示排序箭头

1 个答案: