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属性,一般为数据的主键
随机推荐
- Django进阶(一)
Url进阶 mysit/mysit/urls.py from django.conf.urls import url from django.contrib import admin urlpatte ...
- POJ 3204 Ikki's Story I - Road Reconstruction
Ikki's Story I - Road Reconstruction Time Limit: 2000MS Memory Limit: 131072K Total Submissions: 7 ...
- asp.net配置web.config支持jQuery.Uploadify插件上传大文件
配置web.config有两处地方需要配置,分别是集成模式和经典模式. 集成模式: <!--文件上传大小设置--> <httpRuntime requestValidationMod ...
- Django models Form model_form 关系及区别
Django models Form model_form
- Genymotion模拟器连接Eclipse的总结[转]
Genymotion模拟器连接Eclipse的总结 按官网上说明安装并配置好Genymotion ,再安装好对应的Eclipse Plugin(http://plugins.genymotion.co ...
- CSS3 border-image 属性
border-image 属性是一个简写属性,用于设置以下属性: border-image-source 用在边框的图片的路径,默认值none. 如:border-image-source:url(b ...
- Python Day12
MySQL 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们 ...
- TeXstudio 编写Latex论文的若干问题
TeXstudio 编写Latex论文的若干问题解决方案总结 问题1: 如何安装TeXstudio 以及 Texstudio当中的中文字体使用问题. 一.如何安装TeXstudio 很 ...
- [实战]MVC5+EF6+MySql企业网盘实战(29)——更新日志
摘要 NetDisk更新日志,及项目使用说明. 开发工具 Vs2013+mysql+ef6+mvc5 bug 1.在加载列表的时候,默认加载的所有,修改为,过滤逻辑删除的文件. 2.加载音乐,文档等分 ...
- SQL Server 2008在Windows 10上不支持
https://support.microsoft.com/en-us/kb/2681562 For SQL Server 2008 R2 SQL Server 2008 R2 is not supp ...