EasyUI Forum
March 28, 2024, 09:35:22 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Highlighting cells in a crud application  (Read 6217 times)
swells808
Newbie
*
Posts: 15


View Profile
« 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


View Profile
« 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">
<!--<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>-->
</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]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!