easyui datatrid给编辑过的数据行高亮描红
easyui DataGrid，如果数据行编辑过或者进入过编辑模式，当切换到显示模式，非编辑模式下，如何高亮之前的数据行？效果如下
easyui datatrid给编辑过的数据行高亮描红源代码如下，示例居于jquery-easyui-1.4.4/demo/datagrid/rowediting.html进行修改，思路就是编辑的时候获取任意一个编辑器对象，通过此dom对象获取所在数据行的tr，结束编辑的时候添加一个高亮样式即可。
<style>.edited{background:#f00;color:#fff}</style>
<script type="text/javascript">
var editIndex = undefined;
var curTr;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
//添加高亮样式
if (curTr) curTr.addClass('edited');
curTr = null;
return true;
} else {
return false;
}
}
function onClickCell(index, field) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
curTr = $(ed.target).closest('td[field]').parent();//记录住当前编辑器所在TR
}
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
</script>
原创文章，转载请注明出处：easyui datatrid给编辑过的数据行高亮描红