Highlighting cells in a crud application

EasyUI Forum

November 04, 2025, 01:28:23 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 10393 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">
		<!--<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]

« previous next »