EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: swells808 on August 07, 2014, 12:01:39 PM

Title: Highlighting cells in a crud application
Post by: swells808 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:
      {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?

Title: Re: Highlighting cells in a crud application
Post by: varonica on August 07, 2014, 07:18:24 PM
Try the following code and please describe in detail if it doesn't meet your requirement:
<!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">
<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">
padding:10px 30px;
padding:5px 0;
border-bottom:1px solid #ccc;
.fitem label{
<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>


    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<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>
<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>

   data: [
      {listprice1:40, listprice2:20},
      {listprice1:31, listprice2:1},
  {listprice1:10, listprice2:5},
  {listprice1:21, listprice2:2}
  {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;';