排序箭头不显示在jqGrid中

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

尝试增加

排序=真正

$(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： “订单ID”

排序顺序： “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" 
}); 

});