背景
最近项目中使用了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转化为
,这样需要的效果就完成了。