easyui中的datagrid中一些常用函数

最新推荐文章于 2024-09-20 21:32:51 发布

零点起航

最新推荐文章于 2024-09-20 21:32:51 发布

阅读量2.5k

点赞数

文章标签： datagrid function table date list null

本文链接：https://blog.csdn.net/csyuyaoxiadn/article/details/7953471

版权

1、 styler：function（value，row，Index）表格样式函数,像改变某一列或者某一列的某几行的颜色
value: 字段值.
rowData: 行数据.
rowIndex: 行下标.
示例代码:（dg为表名）

$('#dg').datagrid({
columns:[[
{field:'listprice',title:'List Price', width:80, align:'right',
styler: function(value,row,index){
if (value < 20){
return 'background-color:#ffee00;color:red;';
}
}
}
]]

});

2、rowStyler：function（index,row）可以改变某一行的背景颜色
rowIndex: 行的下标, 起始值 0
rowData: 这个记录代表这一行
示例代码:
$('#test').datagrid({
rowStyler:function(index,row){
if (row.week=="周六"||row.week=="周日"){
return 'background-color:pink;color:blue;font-weight:bold;';
}else if(row.week=="周合计"){
return 'background-color:rgb(243, 228, 87);font-weight:bold;';
}
}
});

3、加载前清除表格内内容：

$('#test').datagrid({
onBeforeLoad:function(row,param){
var fields = $('#test').datagrid('getRows');
if(fields!=null){
while(fields.length>0){
var index = $('#test').datagrid('getRowIndex', fields[0]);
if(parseInt(index) !=-1){
$('#test').datagrid('deleteRow', index);
}
}
}
}
});

4、//标题行变色

onLoadSuccess:function(date){
        //datagrid头部 table 的第一个tr 的td们，即columns的集合
          var headerTds = $(".datagrid-header-inner table tr:first-child").children();
          $(headerTds).each(function(i,domEle){
            $(domEle).css({ "background": "#8EE5EE"});

          })
     }