easyui表格行编辑事件

最新推荐文章于 2021-07-22 15:41:33 发布

原创最新推荐文章于 2021-07-22 15:41:33 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui 行编辑

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍使用EasyUI实现表格行编辑功能的方法，包括双击行事件(onDblClickRow)与编辑完成事件(onAfterEdit)的设置。通过具体HTML与JS代码示例，展示如何在表格中设置输入类型为数字框(numberbox)，并实现行编辑开始、结束及验证的完整流程。

easyui表格行编辑事件

- HTML页面代码
- js代码

HTML页面代码

1.onDblClickRow 双击行事件；
2. onAfterEdit：编辑完成事件这两个是必须添加的；
3. editor:{type:‘numberbox’} 编辑时的输入类型

<table id="tt" class="easyui-datagrid"  data-options="onDblClickRow: onDblClickRow,
onAfterEdit:onAfterEdit" >
	<tr>
		<th data-options="editor:{type:'numberbox'}"></th>
	</tr>
</table>

js代码

var editIndex = undefined;
function endEditing(){
	if (editIndex == undefined){return true}
	if ($('#tt').datagrid('validateRow', editIndex)){
		$('#tt').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
//双击行事件
function onClickRow(index){
	if (editIndex != index){
		if (endEditing()){
			$('#tt').datagrid('selectRow', index).datagrid('beginEdit', index);
			editIndex = index;
		} 
	}
}

//编辑完成事件
function onAfterEdit(index){
	alret(111);
	editIndex = undefined;
}