jqxGrid自定义行编辑器

$("#jqxgrid").jqxGrid(
{
    columns: [
        { text: 'First Name', datafield: 'firstname',columntype:"custom",
        	//初始化编辑器的方法，只在首次开始编辑的时候调用
        	createeditor:function(row, cellvalue, editor, celltext, cellwidth, cellheight){
        		//需要自己创建一个编辑器DOM对象，editor是cell的jquery DOM文档对象
        		var $input=$("<input type='text' class='custom-input'>");
        		editor.html($input);
        		$input.jqxInput({height:"100%",width:"100%"});
        	},
        	//编辑器赋初值方法，每次开始编辑前都会调用
        	initeditor:function(row, cellvalue, editor, celltext, pressedChar){
        		editor.find(".custom-input").jqxInput("val",cellvalue);
        	},
        	//把编辑器的值返回到cell中，每次结束编辑都会调用
        	geteditorvalue:function(row, cellvalue, editor){
        		return editor.find("input").val();
        	}
        }
    ]
    editable:true //也可以不设置这个属性，定义jqxgrid点击事件自定义开始编辑
});

关键就是要自己创建一个DOM。

如果有子表(详情表rowdetails)，你会发现用jqxGrid给的编辑模型会有意想不到的问题(点击子表会触发父级表编辑)。

当使用自定义编辑器后，详情表的行编辑行为就会变得简单明了。