jqGrid学习笔记

jqGrid学习笔记

jqGrid即jquery-grid，提供了丰富的表格功能。

html

<table id='jqGrid'></table>

$("#jqGrid").jqGrid({
    url: '/data.json',
    datatype: "json",
    colModel: [
        {
            label: "操作",
            name: "actions1",
            width: 30,
            formatter: gridOperat, // 列格式化方法名
            align: 'center'
        },
        {
            label: "标准",
            name: 'standard',
            width: 50,
            align: 'center',
            editable: true  // 允许编辑
        },
        {
            label: "备注",
            name: 'comment',
            width: 50,
            align: 'center',
            editable: true
        }
    ],
    jsonReader: {
        root: "rows",
        repeatitems: false
    },
    multiselect: true, // 是否支持复选框，默认false
    loadonce: true,
    rownumbers: true,
    cellEdit: true,
    width: 800,
    height: 325,
    cellsubmit: 'clientArray' // 客户端保存，不需要每次都提交
});

/**
 * @param rowid
 * @param object iRow 行对象，iRow.rowId等
 * @param object iCol 数据对象，['id', 'name']等
 */
function gridOperat(rowid,iRow,iCol,e)
{
    var html='<div class="ie-inline-block margin-r10 jq-opt add-add" title="插入"><span class="ui-icon ui-icon-plus inline-block"></span></div>'
        +'<div class="ie-inline-block margin-r10 jq-opt add-del" title="删除"><span class="ui-icon ui-icon-trash inline-block"></span></div>';
    return html;
}

添加行

var newid = parseInt(rowid) + 1;
var rowid = parseInt(rowid);
var rowData = {
 actions: "",
 items: '',
 brand: '',
 specification: '',
 amount: '',
 price: '',
 standard: '',
 product_type: '',
 comment: ''
};
$('#jqGrid').jqGrid('addRowData', newid, rowData, 'after', rowid);// 插入行到当前行之后

// target为当前行jquery对象，将后续行的rowid全部加一调整
target.closest('tr').nextAll().each(function(index, e) {
    if (index == 0) {
        return true;
    }

    var rowId = $(this).attr('id');
    $(this).attr('id', parseInt(rowId) + 1);
})

删除行

target.closest('tr').nextAll().each(function(index, e) {
    var newid = $(this).attr('id');
    $(this).attr('id', parseInt(newid) - 1);
});

$('#jqGrid').jqGrid('delRowData', rowid);

data.json格式示例

{
    "page":"1",
    "total":1,
    "records":"10",
    "rows":[
        {"id":1, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":2, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":3, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":4, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":5, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":6, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":7, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":8, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":9, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]},
        {"id":10, "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00", "aaa", ""]}
    ]
}

另外，在使用multiselect:true的过程中遇见了一个坑，在使用addRowData方法添加新行后，新行checkbox的id会复用事件发生行的id，到checkbox的选中状态会联动。

// 假设当前行rowid = 1，checkbox的id=jqg_jqGrid_1，执行插入新行操作如下：
$('#jqGrid').jqGrid('addRowData', newid, rowData, 'after', rowid);

新插入的行rowid=newid，行中checkbox的id=jqg_jqGrid_1，这样id就重复了，当checkbox选中rowid=1行时，newid行的checkbox也会被选中。

解决方案：
1、全选操作解决方案
在事件onSelectAll中，手动执行全选和取消操作，如：

// aRowids为选中行的数组，全选即全部行，status为选中状态
onSelectAll: function(aRowids, status) {
    var ids = $("#jqGrid").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i ++) {
        var rowid = ids[i];
        var curRowData = jQuery("#jqGrid").jqGrid('getRowData', rowid);
        $("#jqGrid").find("input[id='jqg_jqGrid_" + rowid + "']").prop('checked', status);
    }
}

2、插入行解决方案
在事件afterInsertRow方法中，重置checkbox的id，保证id唯一，如：

// 小技巧：将checkbox的id与rowid同步，可以避免重复
afterInsertRow: function(rowid, rowdata, rowelem) {
    $('#jqGrid').find('tr[id=' + rowid + ']').nextAll().each(function() {
        var id = $(this).attr('id');
        id = parseInt(id) + 1;
        $(this).find('input[type=checkbox]').attr('id', 'jqg_jqGrid_' + id);
    });
}