jqGrid的基本用法与代码实例

jqgrid的基本用法与代码实例

jquery("#list").jqgrid({  
    // 请求后台json数据的url 
    url:'list.json',  
    // 后台返回的数据格式  
    datatype: "json",  
    // 列表标题  
    colnames:['inv no','date', 'client', 'amount','tax','total','notes'],  
    // 列表模型  
    colmodel:[   
        {name:'id',index:'id', width:55},   
        {name:'invdate',index:'invdate', width:90},   
        {name:'name',index:'name asc, invdate', width:100},   
        {name:'amount',index:'amount', width:80, align:"right"},   
        {name:'tax',index:'tax', width:80, align:"right"},   
        {name:'total',index:'total', width:80,align:"right"},   
        {name:'note',index:'note', width:150, sortable:false}   
    ],  
    // 一页显示的行记录数  
    rownum:10,   
    // 表格宽度  
    width:700,  
    // 表格高度  
    height:200,  
    // 翻页控制条中 每页显示记录数可选集合  
    rowlist:[10,20,30],   
    // 翻页dom  
    pager: '#pager',  
    // 默认排序字段  
    sortname: 'invdate',  
    // 是否显示行号，默认值是false，不显示  
    viewrecords: true,  
    // 默认字段排序顺序，默认asc，正序  
    sortorder: "desc",   
    // 列表总标题  
    caption:"测试",  
    // 数据加载完成并且dom创建完毕之后的回调函数  
    gridcomplete: function(){  
        //todo  
    },  
    // 单元格被点击选择回调函数， rowid为改行数据id值，icol为改行索引，cellcontent为该行html代码，e为click事件  
    oncellselect: function(rowid, icol, cellcontent,e){  
        //todo  
    }  
});  

https://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders

{
    "page":"1",
    "total":2,
    "records":"13",
    "rows":[
        {
            "id":"13",
            "cell":["13","2007-10-06","client 3","1000.00","0.00","1000.00",null]
        },{
            "id":"12",
            "cell":["12","2007-10-06","client 2","700.00","140.00","840.00",null]
        },{
            "id":"11",
            "cell":["11","2007-10-06","client 1","600.00","120.00","720.00",null]
        },{
            "id":"10",
            "cell":["10","2007-10-06","client 2","100.00","20.00","120.00",null]
        },{
            "id":"9",
            "cell":["9","2007-10-06","client 1","200.00","40.00","240.00",null]
        },{
            "id":"8",
            "cell":["8","2007-10-06","client 3","200.00","0.00","200.00",null]
        },{
            "id":"7",
            "cell":["7","2007-10-05","client 2","120.00","12.00","134.00",null]
        },{
            "id":"6",
            "cell":["6","2007-10-05","client 1","50.00","10.00","60.00",""]
        },{
            "id":"5",
            "cell":["5","2007-10-05","client 3","100.00","0.00","100.00","no tax at all"]
        },{
            "id":"4",
            "cell":["4","2007-10-04","client 3","150.00","0.00","150.00","no tax"]
        }
    ]
}

后台返回数据的说明
total	查询的总页数
page	查询的当前页码
records	查询的总记录数
rows	当前查询页的数据集合
id	行数据主键，默认值0
cell	行数据的数组格式封装，默认值“”