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给编辑过的数据行高亮描红