Highlighting cells in a crud application

EasyUI Forum

October 13, 2024, 06:15:34 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Highlighting cells in a crud application

Pages: [1]

« previous next »

Author

Topic: Highlighting cells in a crud application (Read 6723 times)

swells808

Newbie

Posts: 15

Highlighting cells in a crud application

« on: August 07, 2014, 12:01:39 PM »

Hello I am building a data grid using the CRUD application tutorial and I have hit a point of confusion. I want to set a conditional argument that cells with a specific value (i.e. if the value =y then make the cell green) for one column and for another column I need it do a math formula with another column to return a color (i.e. Column A - Column B = >20 then make the cell yellow).

When I tried this by adding the following code into my get.php file:
$('#dg').datagrid({
   columns:[[
      {field:'listprice',title:'List Price', width:80, align:'right',
         styler: function(value,row,index){
            if (value = y){
               return 'background-color:#ffee00;color:red;';
               // the function can return predefined css class and inline style
               // return {class:'c1',style:'color:red'}
            }
         }
      }
   ]]
});

But it blanked out all the data shown. Where am I going wrong?


	Logged

varonica

Full Member

Posts: 106

Re: Highlighting cells in a crud application

« Reply #1 on: August 07, 2014, 07:18:24 PM »

Try the following code and please describe in detail if it doesn't meet your requirement:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>

<body>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">

</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</div>

<script>
$('#dg').datagrid({
data: [
{listprice1:40, listprice2:20},
{listprice1:31, listprice2:1},
{listprice1:10, listprice2:5},
{listprice1:21, listprice2:2}
],
columns:[[
{field:'listprice1',title:'List Price1', width:80, align:'right',
styler: function(value,row,index){
var y = 10;
if (value == y){
return 'background-color:green;color:red;';
// the function can return predefined css class and inline style
// return {class:'c1',style:'color:red'}
}
}
},
{field:'listprice2',title:'List Price2', width:80, align:'right'},
{field:'total',title:'Total', width:80, align:'right',
formatter: function(value,row,index){
return row.listprice1 - row.listprice2;
},
styler: function(value,row,index){
if (row.listprice1 - row.listprice2 >= 20 ){
return 'background-color:yellow;color:red;';
}
}
}
]]
});
</script>
</body>
</html>


	Logged

Pages: [1]

« previous next »