当前位置: 首页 > 工具软件 > jqxGrid > 使用案例 >

jqxGrid自定义行编辑器

寿翰飞
2023-12-01
$("#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给的编辑模型会有意想不到的问题(点击子表会触发父级表编辑)。

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

 类似资料: