Easyui 去掉datagrid 行的样式,并点击checked 改边行颜色!
--最近客户提出的需求 全选高亮样式太丑,每行选中不需要背景图片颜色,字体变黑色,未选中变灰色。 先把代码和改变后的图片 贴出来。
/* 初始化DataFrid数据 */
initDataGrid: function () {
var pNumber = 0;
var pSize = 10;
$('#listBuyer').datagrid({
method: 'post',
url: 'PR012_TradeRelationService.ashx?Method=GetPR012_TradeRelation_New&type=1&tradeID=' + $("#PC010_TradeIDDetail").val(),
nowrap: true,
fitColumns: false, ////为了冻结列!这里一定要设置为false
loadMsg: '正在加载数据...', showFooter: true,
pagination: true,
pageSize: 20, //每页显示的记录条数,默认为10
pageNumber: 1, //默认的页码
pageList: [30, 20, 10], //可以设置每页记录条数的列表
frozenColumns: [[{ title: '唯一ID', field: 'PC012_RelationID', width: 100, checkbox: true },
{ title: '受让方名称', field: 'EC101_WRYMC', width: 300,
formatter: function (value, row, index) { //判断 1选中 0未选中
if (row.relation == 1) {
initTool.indexs += index + ",";
} else if (row.relation == 0) {
initTool.indexs0 += index + ",";
}
return value;
}
},
{ title: '项目名称', field: 'PC004_ProjectName', width: 300 }
// { title: 'zd', field: 'zd', width: 300 }
// ,
// { title: '录入人', field: 'UserName', width: 80 }
]],
columns: [[
{ title: '化学需氧量', align: 'center' },
{ title: '氨氮', align: 'center' },
{ title: '二氧化硫', align: 'center' },
{ title: '氮氧化物', align: 'center' }
],
[
{ title: '需求量</br>(吨)', field: 'cod_count', width: 170, align: 'center',
formatter: function (value, row, index) {
var str = "0";
if (value) {
str = value;
}
if (str == "0")
return "/";
else
return parseFloat(str).toFixed(4);
}
},
{ title: '需求量</br>(吨)', field: 'nh3_count', width: 170, align: 'center',
formatter: function (value, row, index) {
var str = "0";
if (value) {
str = value;
}
if (str == "0")
return "/";
else
return parseFloat(str).toFixed(4);
}
},
{ title: '需求量</br>(吨)', field: 'so2_count', width: 170, align: 'center',
formatter: function (value, row, index) {
var str = "0";
if (value) {
str = value;
}
if (str == "0")
return "/";
else
return parseFloat(str).toFixed(4);
}
},
{ title: '需求量</br>(吨)', field: 'nox_count', width: 170, align: 'center',
formatter: function (value, row, index) {
var str = "0";
if (value) {
str = value;
}
if (str == "0")
return "/";
else
return parseFloat(str).toFixed(4);
}
}
]],
toolbar: '#tbBuyer', // id 为tb的Div 详细 查看前台页面HTML代码
rowStyler: function (index, row) {
var rows = $("#listBuyer").datagrid("selectRow"); //
if (rows) {
return 'color:#000000;';
} else {
return 'color:#C0C0C0;';
}
},
onBeforeLoad: function () {
$(this).datagrid('rejectChanges');
}, //选中变黑色
onSelect: function (index, row) {
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "selected", 1);
var rows2 = opt.finder.getTr(this, "", "selected", 2);
if (rows1.length > 0) {
$(rows1).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', '#000000');
}
});
}
if (rows2.length > 0) {
$(rows2).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', '#000000');
}
});
} }, //取消选中变灰色
onUnselect: function (index, row) {
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "allbody", 1);
var rows2 = opt.finder.getTr(this, "", "allbody", 2);
if (rows1.length > 0) {
$(rows1).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', '#C0C0C0');
}
});
}
if (rows2.length > 0) {
$(rows2).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', '#C0C0C0');
}
});
}
},
onUncheck: function (index, row) {
initTool.AddUpdate(1, 4);
},
onCheck: function (index, row) {
initTool.AddUpdate(1, 4);
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "selected", 1);
var rows2 = opt.finder.getTr(this, "", "selected", 2);
if (rows1.length > 0) {
$(rows1).each(function () {
$(this).removeClass("datagrid-row-selected");
});
}
if (rows2.length > 0) {
$(rows2).each(function () {
$(this).removeClass("datagrid-row-selected");
});
} },
// onClickRow: function (rowIndex, rowData) {
// // alert(rowData["PC012_RELATIONID"]);
// // alert(rowData["EC101_WRYMC"]);
// var row = $("#listBuyer").datagrid("getSelected"); // 获取选中项
// if (row) {
// $('#A1').linkbutton('enable');
// initTool.AddUpdate(1, 4);
// } else {
// $('#A1').linkbutton('disable');
// }
// },
onDblClickRow: function (rowIndex, rowData) {
//$("#list").datagrid("unselectAll"); //取消所有
//$("#list").datagrid("selectRow", rowIndex); //选中当前行
//修改操作
//initTool.edit();
},
onLoadSuccess: function (data) {
// var pr1 = eval(data).total;
// initTool.pr = pr1;
//alert(eval(data).total);
if ($("#ck").val() == "loadck") {
var rows = $('#listBuyer').datagrid('getRows');
if (initTool.indexs != null && initTool.indexs != "") {
//循环出 选中的下标,选中
var cd = initTool.indexs;
// var cd = initTool.indexs.substring(0, c.length - 1);
// alert(cd.split(","));
var a = cd.split(",");
for (var i = 0; i < a.length; i++) {
$("#listBuyer").datagrid("selectRow", a[i]);
}
//循环出 未选中的,以便改变颜色
var cd0 = initTool.indexs0;
var a0 = cd0.split(","); for (var j = 0; j < a0.length; j++) {
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "allbody", 1);
var rows2 = opt.finder.getTr(this, "", "allbody", 2);
// if (rows1.length >= 0) {
if (a0[j] != null && a0[j] != "") {
$(rows1).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == a0[j]) {
$(this).css('color', '#C0C0C0');
}
});
// }
// if (rows2.length >= 0) {
$(rows2).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == a0[j]) {
$(this).css('color', '#C0C0C0');
}
});
}
}
}
} else {
// $('#listBuyer').datagrid('selectAll');
$('#listBuyer').datagrid('checkAll');
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "selected", 1);
var rows2 = opt.finder.getTr(this, "", "selected", 2);
if (rows1.length > 0) {
$(rows1).each(function () {
$(this).removeClass("datagrid-row-selected");
});
}
if (rows2.length > 0) {
$(rows2).each(function () {
$(this).removeClass("datagrid-row-selected");
});
}
initTool.AddUpdate(1, 5);
}
}
}); }



这个网上有比较详细的 http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html 可以参考一下
Easyui 去掉datagrid 行的样式,并点击checked 改边行颜色!的更多相关文章
- 为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked
为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类 ...
- easyui的datagrid组件,如何设置点击某行不会高亮该行的方式
easyui的datagrid组件,有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式,有好几种方法可以实现,我举几个,可以根据你具体需求灵活应用: 1.修改easyui的css将高 ...
- 原生js去除行内样式
概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...
- easyUI的datagrid每行数据添加操作按钮的方法
今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一 ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...
- easyui的datagrid行的某一列添加链接
通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...
- EasyUI的datagrid获取所有正在编辑状态的行的行编号
今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...
- easyui,datagrid表格,行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
- 【技巧】easyUI的datagrid,如何在翻页以后仍能记录被选中的行
easyUI的datagrid在复选框多选时,如何在翻页以后仍能记录被选中的行: 注意datagrid中需要配置idField属性,一般为数据的主键
随机推荐
- 重复加载同一个jqgrid
重复加载同一个jqgrid时需要先清除原先的数据,再进行加载新的数据: 清除时使用方法:jQuery.jgrid.gridUnload('jqGridId'); 同时还有一个GridDestroy的方 ...
- BZOJ 1711: [Usaco2007 Open]Dining吃饭
1711: [Usaco2007 Open]Dining吃饭 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 902 Solved: 476[Submit ...
- Javascript数值转换(string,int,json)
数值: 在JavaScript中,数值转换一般有三种方式: 一.Number(param)函数:param可以用于任何数据类型 1.1 param是Boolean值,true和false分别转换为1和 ...
- Linux CentOS6.x ip设置(网卡设置)
修改IP永久生效按以下方法vi /etc/sysconfig/network-scripts/ifcfg-eth0(eth0,第一块网卡,如果是第二块则为eth1)按如下修改ip: DEVICE=et ...
- linux安装tomcat
一.下载tomcat 最新地址在:http://tomcat.apache.org 我下载的是:apache-tomcat-7.0.73.tar.gz,是已经编译好的包 解压文件后,移动到" ...
- SVN 错误 Access to SVN Repository Forbidden的原因及解决方法
原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/SVN_Access_to_SVN_Repository_Forbidden.html 当我们新 ...
- Html中的文本框和单选按钮
Html中的文本框和单选按钮用来制作页面的登录注册使用.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
- 《SQL必知必会》学习笔记(二)
咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语句,但是实际应用中的业务逻辑往往会非常复杂,所 ...
- 记录yii2-imagine几个常用方法
记录yii2-imagine几个常用方法: //压缩 Image::thumbnail('@webroot/img/test-image.jpg', 120, 120)->save(Yii::g ...
- windows命令
开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...