jqGird 学习记录

jqGrid使用记录

Jqgrid教程(简单上手)

jqGrid基本用法与示例

jqGrid中文教程(精品)

$(document).ready(function () {
        $("#gridList").jqGrid({
            //获取数据的地址
            url: '/sysUser/list',
            //请求的类型:(“POST” or “GET”)
            mtype: "POST",
            //从服务器端返回的数据类型,(表格期望接收的数据类型)。可选类型:xml,xmlstring,json,local,function
            datatype: "json",
            //列显示名称,是一个数组对象
            colNames: ['userID', '用户名称', '固定电话','电子邮件','手机号码','显示名称','创建时间'],
            //对显示列属性的设置,是一个数组对象。常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序
            colModel: [
                { name: 'userID', index: 'userID', hidden: true, key: true },
                { name: '用户名称', index: 'userName', width: 100 },
                { name: '固定电话', index: 'cellphone', width: 100 },
                { name: '电子邮件', index: 'email', width: 100 },
                { name: '手机号码', index: 'telephone', width: 100 },
                { name: '显示名称', index: 'showName', width: 100 },
                { name: '创建时间', index: 'createTime', width: 200, formatter: "date", formatoptions: { srcformat: 'Y-m-d ', newformat: 'Y-m-d' } }
            ],
            // 定义表格名称
            //caption: "我是jqgrid的标题",
            //在grid上显示记录条数,这个参数是要被传递到后台
            rowNum: 10,
            //一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
            rowList: [10, 20, 30],
            //指定分页栏对象,必须为一个有效的html元素。可以是'pager', '#pager', jQuery('#pager').推荐用'#pager'
            pager: '#pager',
            //默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台
            sortname: 'id',
            //定义了记录信息的位置: left, center, right
            recordpos: 'right',
            //表格高度,可以是数字,像素值或者百分比
            rownumbers: true,//添加左侧行号
            height: 'auto',
            autowidth: true,//自动宽
            //定义是否要显示总记录数
            viewrecords: true,
            //此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关
            gridComplete: function () {
                //TODO
            },
            //此事件在点击表格特定单元格时发生。rowid 为行ID;iCol 为列索引;cellcontent 为单元格中内容;e 点击事件对象。
            onCellSelect: function (rowid, iCol, cellcontent, e) {
                //TODO
            }
        });
    });
上一篇:在Eclipse中查看JDK类库的源代码


下一篇:YTU 3022: 完全二叉树(1)