jqGrid使用

jqGrid 介绍

jqGrid 基于jquery 的最好的表格组件
jqGrid-github

jqueryUI

异步数据

代码示例

var colNames = [];//列名
    function dotable() { //渲染表格数据
        //执行表格刷新
        var tmp = [];
        $("#gridTable").jqGrid({
            url : "xxx.do?ajax",//ajax请求
            datatype : "json",//请求类型，这里采用json
            mtype : "POST",
            autowidth : true,
            height : 400,
            colNames : colNames,
            postData : {
                begin : $('#begin').val(),
                end : $('#end').val()

            },
            colModel : eval("(" + '${col}' + ")"),
            viewrecords : true,
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            prmNames : {
                search : "search"
            },
            jsonReader : {
                root : "gridModel",
                records : "record",
                repeatitems : false
            },
            pager : "#gridPager",//对应分页区域
            caption : "数据",
            hidegrid : false

        });

        $("#gridTable").jqGrid('setGridParam', { //表格参数
            postData : {
                begin : $('#begin').val(),
                end : $('#end').val()

            }
        }).trigger("reloadGrid");//在页面刷新时提交数据
    }

    $(document).ready(function() {
        $.ajax({
            type : "post",//
            dataType : "json",//返回json格式的数据
            url : "xxx.do?jsontest",//要访问的后台地址
            success : function(msg) {//msg为返回的数据，在这里做数据绑定
                $.each(msg, function(key, val) {
                    colNames.push(val.name);
                })
            }
        });

        dotable();

    });