php表格的单元格可编辑器,jQuery Grid - 实现单元格编辑功能

背景

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

代码

var textRender = function (cell) {

if (cell.cellData){

cell.cellData = cell.cellData.replace(/\r\n|\n/g,"
");

return "" + cell.cellData + "";

}

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转化为
，我使用了cell.cellData.replace(/\r\n|\n/g,"
");来将\r\n和\n转化为
，这样需要的效果就完成了。