关闭

jqGrid使用

标签: jqgrid数据异步渲染代码
366人阅读 评论(0) 收藏 举报
分类:

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();

    });
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:145425次
    • 积分:3084
    • 等级:
    • 排名:第12746名
    • 原创:135篇
    • 转载:16篇
    • 译文:19篇
    • 评论:15条
    文章分类
    最新评论
    我的博客
    我的搜索