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

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

1个回答

示例居于jquery-easyui-1.4.4/demo/datagrid/rowediting.html进行修改,思路就是编辑的时候获取任意一个编辑器对象,通过此dom对象获取所在数据行的tr,结束编辑的时候添加一个高亮样式即可。
edited样式
.edited{background:#f00;color:#fff}

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);
}
}
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
easyui datatrid如何给编辑过的数据行标记下
  easyui DataGrid,如果数据行编辑过或者进入过编辑模式,当切换到显示模式,非编辑模式下,如何高亮之前的数据行?效果如下nn ![](http://www.w3dev.cn/imgblog/20170911/0934301269.png)
EasyUi 给datagrid编辑行绑定事件及行中级联下拉框
nowrap : true, rownumbers : true, checkOnSelect:true, singleSelect:true, loadMsg : restip("comm.loadMsg"), onLoadError : function() { alert(rest...
easyui datagrid 编辑行后如何保存
nnn1、怎么提交保存?n2、怎么在保存提交的时候判断combobox选中的不是“请选择”
easyui datagird编辑行删除行
function init(){ var editRow = undefined; var oldMoney = undefined; $("#dg").datagrid({ url:"../foreignexchange/fexLedgerManager.do?method=queryApplyData&parentId="+parentId, ...
easyui datagrid表格点击行高亮
$('#dg').datagrid({ rownumbers : true, singleSelect : true,//多选 autoRowHeight : false, //自动行高 pagination : false, //显示表格下面的分页插件 fitColumns : true, //字段自动分配 striped : false,//显示斑马线背景 collapsibl...
datagrid数据行高亮的问题?
怎么实现当鼠标放在一行上时,这一行数据高亮呢?rn还有,比如这个单元格的数据量比较大时,只显示前100个字,当我鼠标放上去时,再全部显示出来,怎么实现啊?
datatrid如何统计汇总
datatrid如何统计汇总
如何给文本框中指定的字符描红
,$name是从服务器发的信息,我想将这部分内容描红.
dataTables 编辑行数据
$('#locateManage').dataTable(rn "iDisplayStart" : Number($limit),rn "iDisplayLength" : Number($length),rn "bServerSide" : true, //是否启动服务器端数据导入rn "sAjaxSource" : "$root/service/locate/locateManage/locateManageList",rn // "aaSorting": $aaSorting,//倒序rn "fnServerData" : retrieveData, //自定义数据获取函数rn "aoColumns" : []rnrn能否根据id修改本行的数据,只修改页面上的数据,不修改数据库
easyui如何传递行数据到函数?
formatter: function (value, row, index) { //将row对象的数据转换为字符串,而且必须替换双引号为单引号,区分update事件里的双引号 var rowData=JSON.stringify(row).replace(/"/g,"\'"); var s= '保存'; }
tablesorter+行高亮+列高亮
项目中用到了tablesorter,但需要有行高亮的要求。根据网上搜到的资源,加入了对应的鼠标悬停行高亮、点击排序列列高亮的代码,希望对大家有用!由于本人js水平不高,如发现代码问题,请不吝指教
easyui datagrid获取正在编辑的行索引
function getRowIndex(target){    var tr =  $(target).closest(tr.datagrid-row);    return parseInt(tr.attr("datagrid-row-index"));               }然后直接在要编辑的行中加入getRowIndex(this)即可。如下field : 'shipType', ...
datagrid如何实现数据行的删除、编辑
datagrid有几列数据,其中前两列为数据,后两列分别显示删除和编辑的超链接,点击超链接就可以对数据进行相关的操作rn该如何实现,望指教rn谢谢
easyui datagrid编辑行设置某个字段不可编辑
function exeBatchPickInfo(wmbpId){ $('#receiptInfo').datagrid({ fit: true, //全屏 title:'入库单', striped: true, //显示斑马线 pagination:false, singleSelect:true, fitColumns:true,//自动缩进 columns: [[
儿童(幼儿)字母数字描红字贴及描红软件
儿童(幼儿)字母数字描红字贴及描红软件。
如何获得gridcontrol控件填写数据行(编辑行)的值
RT rnrn控件的第一行是一行编辑行rnrn我想实现当填写完数据后,能把我在编辑行填写的值显示出来rnrn这一行的值好像不是靠索引找的,有人懂没,求大虾
jQuery高亮选择行
jQuery高亮选择行,用jQuery做的高亮显示鼠标移动到的行,很简单的,希望对各位有帮助
如何给表里的行数据分配ID
假如SQL表里有1万条数据,但是没有ID列,现在想给这个表加个字段(ID),ID也从1-10000好了,如何加进去?update好像也不行,因为没有where条件字段匹配啊
gridview中动态给编辑行绑定数据
现在有3个条件查询rn查询出结果后点编辑gridview显示为textbox编辑模式rn但是在编辑事件中写rn有个数据绑定,在这里只能写一个条件查询的绑定啊,如何写多个,rn比如按照条件1查询,就在编辑事件中按照条件1进入编辑状态.rn如果按照条件查询,就在编辑事件中按照条件2进入编辑状态rn等
jqgrid编辑行数据及保存行数据的取值
jqgrid官方API中说了,编辑行模式下,不建议使用 “getRowData” 的方法,事实上用 getRowData 的方法取值为空,或者取值为 html 代码。以下方法退而求其次,取内存中的数据,即编辑的数据,在html代码中,只是没有展现,直接通过 $(‘#’+rowid+”_indexRule”).val() 可以取值。 暂时不知道能适用多少浏览器。注意:设置单元格为编辑模式 co
EasyUI 编辑功能数据回写
EasyUI 小例子
VIM 里面如何取消 行 高亮?
不知道按了哪个键弄成这个样子了,如何恢复啊?rn[img=https://img-bbs.csdn.net/upload/201408/21/1408625771_87577.jpg][/img]
easyui datagrid实现行内编辑一列数据
这篇文章主要想介绍一下easyui 的datagrid控件实现行内编辑的功能。 我着这里主要实现的大概功能就是:可以行内编辑人员类别的功能 一、实现的效果如下:             图1: 当我们点击【设置】的时候可以编辑人员类别,如图2 所示         图2: 从图2可以看出,我们可以人员类别下拉框中的选中我们希望设置的类别,然后保存到数据库 也可以点击取
easyui datagrid 获得编辑后的数据
方式一: $('#discountTable').datagrid('endEdit', indexId);//结束编辑 if ($('#discountTable').datagrid('getChanges').length) { //获得增加数据           var inserted = $('#discountTable').datagrid('getChanges'
easyui datagrid显示选择行数据问题
今天使用easyui datagrid发现无论怎么选择行,getSelections得到的数据都不为选择的所有数据。 发现是由于设置了idField属性,所以如果idField没有载入,它会认为是同一条数据,所以发生上面情况。 idField属性删除后就行了。 ...
【项目实战】---EasyUI数据表格的行风格
前言: 通过实践,对于easyui的了解在进一步的加深,不管是多么小的效果都能
EasyUI指定列-合并相同数据行
EasyUI指定列-合并相同数据行
easyui datagrid获取选择行的数据
一:datagrid列表 //绚染列表 $('#tt').datagrid({ title:"系统管理员列表", iconCls:"icon-save",//图标 url:'xxxxx.action', width:"100%", height:"auto", nowrap: false,
easyui中datagrid获取行数据
 EasyUI中DataGrid控件获取Row数据有几种方式。var row = $('#dg').datagrid('getSelected'); // 获取选中单行var rows = $('#dg').datagrid('getSelections'); // 获取所有选中行上面两个根据DataGrid的data-option配置不同具体使用。主要是是否允许多选。一般来说都是授权多选的。...
Easyui点击表格操作按钮--获取行数据
为表格行添加操作按钮: 注意所传的index(索引) 点击查看信息获取行数据: 下面两句话就是选中行 $('#tableId').datagrid('selectRow',index);// 获取点击当前行的索引 var row=$("#tableId").datagrid("getSelected");//获取当前行数据 ...
鼠标移到表格的行上,行高亮
[code="java"] 表格行高亮 /** 鼠标移到行上,此行背景变为粉红,鼠标移开,背景颜色消失 */ function changeBgcolor(tr,num){ if(num==1){ if(tr.bgColor != "yellow"){ ...
easyui笔记
easyui行编辑取消选中行
jQuery EasyUI的DataGrid 数据行上右键菜单,并Check行
"text/javascript"> $(function(){     $('#dg').datagrid({         title:'DataGrid',         iconCls:'icon-grid',         fit:true,         collapsible:true,         closable:true,
DBGRID中数据是否编辑过判断!
情况:DBGRID,datasource,adoquery关联了,adoquery的locktype为ltBatchOptimisticrn需求:dbgrid在增加数据、编辑数据、删除数据后,点击提交按钮进行提交,其他情况点击提交按钮无效,换一句话说就是如何根据dbgrid的数据是否变化来判定是否需要提交!!
jquery easyui gridview动态编辑行后如何获取每行数据进行保存?急...
列表页面点击添加弹出div层,层有中gridview列表,有一添加行按钮,点击后触发gridview中insertrow方法,在gridview中添加一行,第一列是可编辑的文本框,第二列为可编辑的下拉列表,在添加多行数据后,点击确定保存按钮,如何将gridview中每行数据循环保存到数据库?求大神,急!rn效果图:rn[img=https://img-bbs.csdn.net/upload/201503/16/1426472163_17083.jpg][/img]
easyui 文本框禁止编辑
1.禁用textbox //设置输入框禁止/允许手动输入 ,只是单纯禁止输入赋值,可以正常序列化获取值(输入框颜色不变) $('#id').textbox('textbox').attr('readonly',true);  //建议用这个 //设置输入框禁用启用,可能会出现无法获取序列化值, 且禁用后颜色会变成灰色(输入框颜色改变) $("#id").textbox({dis
EasyUI分页,编辑
EasyUI分页,编辑
easyui中的datagrid行数据如何实现上移和下移
在easyui的datagrid中,有时候需要将上下行进行上移动或者下移动的操作,那如何实现上移动和下移动呢?jsp代码:<div id="contentDiv" data-options="region:'center',title:'人员列表',split:false" style="width:40%"> <table id="人员列表"></tabl
easyUI datagrid 列编辑
datagrid行上多个字段都是可编辑的,都有editor 属性,但是现在想要单击或双击某一列,打开当前列的编辑状态,求助大神,谢谢rnrn答案找到了,谢谢rnrn
easyUI的行内编辑editor
editor:的类型 1:editor:{ type:'combobox', options:{ valueField:'userRole_id', textField:'userRole', method:'get', url:'data/GetRoleJson.aspx', required:true } 2:editor:'textbox' 3:editor:'numb
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法