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: $('#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? 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:
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> |