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