easyui datatrid如何给编辑过的数据行标记下

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

6个回答

示例居于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这些需求很简单的,查看api datagrid 那集,你就会了

结束编辑不是需要相应的index行号吗?

$('#datagrid').datagrid('endEdit',endIndex);

然后使用这个行号改变一下该行的色调

$('#datagrid').datagrid({
rowStyler:function(index,row){
if (index = endIndex){
return 'background-color:pink;color:blue;font-weight:bold;';
}
}
});

 var row = $('#dg').datagrid('getSelected');
if (row){
alert("ID : "+row.itemid);
}

When configured, Gradle will run in incubating parallel mode.

This option should only be used with decoupled projects. More details, visit

http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects

org.gradle.parallel=true

var row = $('#dg').datagrid('getSelected');
if (row){
alert("ID : "+row.itemid);
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问