easyui datatrid给编辑过的数据行高亮描红

  easyui DataGrid,如果数据行编辑过或者进入过编辑模式,当切换到显示模式,非编辑模式下,如何高亮之前的数据行?效果如下

easyui datatrid给编辑过的数据行高亮描红

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

评论(0)Web开发网
阅读(607)喜欢(0)easyui开发技巧