jQuery Grid - 实现单元格编辑功能

背景

  最近项目中使用了jQuery Grid(pqGrid)插件来绘制表格，其中遇到了一个难点，就是点击单元格可以直接进行编辑，同时在编辑时可以输入回车换行。由于pqGrid默认的编辑界面中按回车会直接保存并退出编辑当前单元格，所以需要进行一些配置。

  官方API文档paramquery.com/api

代码

var textRender = function (cell) {
    if (cell.cellData){
        cell.cellData = cell.cellData.replace(/\r\n|\n/g,"<br>");
        return "<span title='" + cell.cellData + "'>" + cell.cellData + "</span>";
    }
    else
        return "";
}

$('#grid1').pqGrid({
    showTop: false,
    columnBorders: true,
    hoverMode: "row",
    wrap: true,
    hwrap: true,
    scrollModel: {
        autoFit: true
    },
    numberCell: {
        title: "id",
        minWidth: 40,
        align: "left"
    },
    roundCorners: false,
    selectionModel: {
        type: 'row',
        mode: 'single'
    },
    sortable: false,
    width: '100%-2px',
    height: '100%-3px',
    showBottom: false,
    dataModel: {
        data: []
    },
    colModel: [{
            title: "col1",
            dataType: "string",
            dataIndx: "col1",
            align: "left",
            render: textRender,
            editor: {
                type: 'textarea'
            },
            editModel: {
                saveKey: ''
            }
        },
        {
            title: "col2",
            dataType: "string",
            dataIndx: "col2",
            align: "left",
            render: textRender,
            editor: {
                type: 'textarea'
            },
            editModel: {
                saveKey: ''
            }
        },
        {
            title: "col3",
            dataType: "string",
            dataIndx: "col3",
            align: "left",
            render: textRender,
            editor: {
                type: 'textarea'
            },
            editModel: {
                saveKey: ''
            }
        }
    ],
});

  其中实现功能的部分为colModel中的render, editor, editModel，

  editor用来配置编辑器的属性，使用type: 'textarea'就可以将编辑器变为文本域。

  editModel用来自定义编辑的行为，可以用来修改默认行为。注意：在colModel中使用此属性会覆盖全局的editModel属性。由于需要改变编辑时按回车保存的默认行为，我们需要使用saveKey: ''将保存键设为空。此时按回车键就不会退出编辑了。

  render用来定义内容的渲染规则，该属性决定了数据在页面中的显示方式。render函数默认会传递一个参数，该参数为当前单元格的各项属性。由于在编辑器中按回车实际输入的是\n，而pqGrid是以html文本的形式渲染在页面中的，所以需要我们手动将\n转化为<br>，我使用了cell.cellData.replace(/\r\n|\n/g,"<br>");来将\r\n和\n转化为<br>，这样需要的效果就完成了。