EasyUI Forum
December 21, 2025, 05:49:33 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1]
1  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 23, 2016, 07:55:31 AM
Thanks Smiley

Had to change it to:
Code:
	function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
	} else if (value.indexOf("(P)") >= 0){
		return 'background-color:orange;color:#fff';
	} else if (value.indexOf(row.WINNER) >= 0){
    	return 'background:limegreen;color:white';
	}
}

Then it worked...

You are the best Smiley

Quote from: stworthy on June 23, 2016, 07:37:08 AM
Please try this code.
Code:
function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
	} else if (value.indexOf('P') >= 0){
		return 'background-color:yellow;color:#fff';
	} else if (value.indexOf(row.WINNER) >= 0){
    	return 'background:limegreen;color:white';
	}
}
2  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 23, 2016, 02:18:50 AM
Can someone please tell me how I can achieve the cell styling I tried to achieve in line 97 of the attached code

      } else if (row.CP1A.indexOf(value)contains"(P)" || row.CP2A.indexOf(value)contains"(P)" || row.CP3A.indexOf(value)contains"(P)") {

I simply want to change background colour to yellow if the cell contains the three characters "(P)"

Here is link to a working web page before my attempt
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsworks.php
and here is non-working version:
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcps.php

Thanks,

Paul

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cherry Picks Ratings Performance</title>
    <link rel="stylesheet" type="text/css" href="../../themes/material/ui-pepper-grinder/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

<table style="text-align: left; width: 1412px;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 267px;"><a
		href="http://www.cherrypickssoftware.com/cps" target="_blank"><img
		title="Cherry Picks Software UK and IRE Horse Racing Analysis - At Its Best..."
		style="border: 0px solid ; width: 573px; height: 81px;"
		alt="Cherry Picks Software Horse Racing UK and IRE"
		src="cropped-cpsjshlogo-1.png"></a></td>
    </tr>
  </tbody>
</table>
	<h2>&nbsp&nbspCherry Picks Ratings Historical Performance Analysis</h2>
&nbsp;
&nbspAnalysis Archive Date: 
&nbsp;
  <?php
  $dirname = '.';
  $files = array();  
  $dir = opendir($dirname);
  
  while(($file = readdir($dir)) !== false) {
	  $extension = pathinfo($file, PATHINFO_EXTENSION);
      if($extension == 'cpra' && $file !== '.' && $file !== '..' && !is_dir($file)) {  
          $files[] = $file;  
      }  
  }  
  closedir($dir);  
  sort($files); 
  
  echo '<select>';
  for($i=0; $i<count($files); $i++) {  
      echo '<option>' . $files[$i] . '</option>';  
  }
  echo '</select>';  
  ?>


<p>&nbsp&nbsp In and below the column titles you can sort and filter the day's results analysis as you wish</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Cherry Picks Ratings Performance" style="width:1755px;height:1175px"
            data-options="singleSelect:true,collapsible:true,url:'fred.json',method:'get', remoteSort:false, multiSort:true
			">
			
        <thead>
            <tr>
                <th data-options="field:'TIME',width:46,sortable:true">Time</th>
                <th data-options="field:'MEETING',width:65,sortable:true">Meeting</th>
                <th data-options="field:'WINNER',width:150,sortable:true,styler:cellStyler1">Winner</th>
                <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
                <th data-options="field:'CP1A',width:190,sortable:true,styler:cellStyler2">Cherry Pick Rated 1</th>
				<th data-options="field:'CP2A',width:190,sortable:true,styler:cellStyler2">Cherry Pick Rated 2</th>
                <th data-options="field:'CP3A',width:190,sortable:true,styler:cellStyler2">Cherry Pick Rated 3</th>
				<th data-options="field:'PL1',width:55,align:'center',sortable:true,hidden:false">CP1PL</th>
				<th data-options="field:'PL2',width:55,align:'center',sortable:true,hidden:false">CP2PL</th>
                <th data-options="field:'PL3',width:55,align:'center',sortable:true,hidden:false">CP3PL</th>
                <th data-options="field:'GOING',width:110,sortable:true">Going</th>
                <th data-options="field:'CATEGORY',width:100,sortable:true">Category</th>
                <th data-options="field:'CLASS',width:60,sortable:true">Class</th>
                <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
				<th data-options="field:'PURSE',width:65,align:'right',sortable:true">Purse</th>
                <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
				<th data-options="field:'ACTUAL',width:60,align:'center',sortable:true">Actual</th>

            </tr>
        </thead>
    </table>
	<script type="text/javascript" src="datagrid-filter.js"></script>
	<script type="text/javascript">
    function cellStyler1(value,row){
    if (row.CP1A.indexOf(value)>=0 || row.CP2A.indexOf(value)>=0 || row.CP3A.indexOf(value)>=0){
            return 'background:green;color:white';
        }
    }
	function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
		} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:limegreen;color:white';
		} else if (row.CP1A.indexOf(value)contains"(P)" || row.CP2A.indexOf(value)contains"(P)" || row.CP3A.indexOf(value)contains"(P)") {
        return 'background:yellow;color:white';
		}
	}
	
	$(function(){
            var dg = $('#dg').datagrid();
            dg.datagrid('enableFilter', [{
                field:'PURSE',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
                field:'SCHEDULED',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
                field:'ACTUAL',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
                field:'FAVPOS',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
				field:'CP1A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All Horses'},{value:'not-rated',text:'Rated Horses Only'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'CP1A');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'CP1A',
                                op: 'notequal',
                                value: 'not-rated'
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },
			{
				field:'CP2A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All Horses'},{value:'not-rated',text:'Rated Horses Only'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'CP2A');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'CP2A',
                                op: 'notequal',
                                value: 'not-rated'
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },{
				field:'CP3A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All Horses'},{value:'not-rated',text:'Rated Horses Only'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'CP3A');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'CP3A',
                                op: 'notequal',
                                value: 'not-rated'
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            }]);
        });
	</script>
</body>
</html>
3  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 18, 2016, 11:54:45 PM
Thank you stworthy, with your help I am now getting close to what I am trying to achieve. Is there a column hint (tooltip) option?

Paul
4  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 17, 2016, 06:02:16 AM
Cannot find a way to show a hint or tooltip when hovering over a column title - Can this be done?

Found a way to hide a cell - really easy Smiley


OK  -  To try and get around row filtering requirement I tried the below:
Also, want to exclude rows with selected filter value not include them, only example is for numeric field entry...


Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cherry Picks Ratings Performance</title>
    <link rel="stylesheet" type="text/css" href="../../themes/material/ui-pepper-grinder/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<table style="text-align: left; width: 1412px;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 267px;"><a
		href="http://www.cherrypickssoftware.com/cps" target="_blank"><img
		title="Cherry Picks Software Horse Racing UK and IRE"
		style="border: 0px solid ; width: 573px; height: 81px;"
		alt="Cherry Picks Software Horse Racing UK and IRE"
		src="cropped-cpsjshlogo-1.png"></a></td>
    </tr>
  </tbody>
</table>

    <h2>  Cherry Picks Ratings Performance</h2>
    <p>  You can sort and filter the day's results analysis as you wish</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Cherry Picks Ratings Performance" style="width:1700px;height:1175px"
            data-options="singleSelect:true,collapsible:true,url:'YestCpsPL.JSON',method:'get', remoteSort:false, multiSort:true
			">
        <thead>
            <tr>
                <th data-options="field:'TIME',width:60,sortable:true">Time</th>
                <th data-options="field:'MEETING',width:80,sortable:true">Meeting</th>
                <th data-options="field:'GOING',width:110,sortable:true">Going</th>
                <th data-options="field:'CATEGORY',width:80,sortable:true">Category</th>
                <th data-options="field:'CLASS',width:80,sortable:true">Class</th>
                <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
				<th data-options="field:'PURSE',width:80,align:'right',sortable:true">Purse</th>
                <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
				<th data-options="field:'ACTUAL',width:80,align:'center',sortable:true">Actual</th>
                <th data-options="field:'WINNER',width:150,sortable:true,styler:cellStyler1">Winner</th>
                <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
                <th data-options="field:'CP1A',width:200,sortable:true,styler:cellStyler3">Cherry Pick Rated 1</th>
				<th data-options="field:'CP2A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 2</th>
                <th data-options="field:'CP3A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 3</th>
				<th data-options="field:'PL1',width:45,align:'center',hidden:true,styler:cellStyler3">CP1PL</th>
				<th data-options="field:'PL2',width:45,align:'center',hidden:true,styler:cellStyler2">CP2PL</th>
                <th data-options="field:'PL3',width:45,align:'center',hidden:true,styler:cellStyler2">CP3PL</th>
            </tr>
        </thead>
    </table>
	<script type="text/javascript" src="datagrid-filter.js"></script>
	<script type="text/javascript">
    function cellStyler1(value,row){
    if (row.CP1A.indexOf(value)>=0 || row.CP2A.indexOf(value)>=0 || row.CP3A.indexOf(value)>=0){
            return 'background:green;color:white';
        }
    }
	function cellStyler2(value,row){
	if (value == 'notrated'){
		return 'background-color:#eceadf;color:#eceadf;';
		} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:limegreen;color:white';
		}
	}
	function cellStyler3(value,row){
    if (value == 'notrated'){
		return 'background-color:#eceadf;color:#eceadf;';
		} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:limegreen;color:white';
        }
	}
	$(function(){
            var dg = $('#dg').datagrid();
            dg.datagrid('enableFilter', [{
				field:'CP1A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All'},{value:'notrated',text:'notrated'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'status');
                        }
                        dg.datagrid('doFilter');
                    }
                }
            }]);
        });
	</script>
</body>
</html>


Result is same as usual, no filtering offered...

http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html

Can you explain why please?

Thanks,

Paul
5  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 17, 2016, 03:15:13 AM
Thank You stworthy

Works perfectly.

Two final things, if I have additional JSON fields that I want to reference for conditional formatting but do not wish to display them in the grid how would I do this?
and
If I want to conditionally exclude rows from being displayed, e.g. all cherry pick rated cells are notrated, how would I do this?

Paul
6  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 17, 2016, 12:10:59 AM
Thank you Stworthy

http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html

But I do not have "notrated" style now - I tried using original (below) as well as your solution but it was just ignored

 
Code:
<script type="text/javascript">
        function cellStyler(value,row,index){
            if (value == "notrated"){
                return 'background-color:#ffee22;color:#ffee22;';
            }
        }
    </script>

Can you help me understand how to have multiple style outcomes.

Many thanks,

Paul
7  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 16, 2016, 10:43:25 AM
Quote from: stworthy on June 16, 2016, 08:52:14 AM
Please try this code.
Code:
$('#dg').datagrid({
    columns:[[
        {field:'f1',title:'column1',width:100,
            styler:function(value,row){
                if (row.f3.indexOf(value) >= 0){
                    return 'background:blue;color:yellow';
                }
            }
        },
        {field:'f2',title:'column2',width:100},
        {field:'f3',title:'column3',width:100,
            styler:function(value,row){
                if (value.indexOf(row.f1) >= 0){
                    return 'background:blue;color:yellow';
                }
            }
        },
        {field:'f4',title:'column4',width:100}
    ]]
})

Sorry, new to this - could you show me how your solution works with this please?

Code:
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/material/ui-pepper-grinder/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic DataGrid</h2>
    <p>The DataGrid is created from markup, no JavaScript code needed.</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Basic DataGrid" style="width:1560px;height:1175px"
            data-options="singleSelect:true,collapsible:true,url:'YestCps.JSON',method:'get', remoteSort:false, multiSort:true">
        <thead>
            <tr>
                <th data-options="field:'TIME',width:60,sortable:true">Time</th>
                <th data-options="field:'MEETING',width:80,sortable:true">Meeting</th>
                <th data-options="field:'GOING',width:110,sortable:true">Going</th>
                <th data-options="field:'CATEGORY',width:80,sortable:true">Category</th>
                <th data-options="field:'CLASS',width:80,sortable:true">Class</th>
                <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
				<th data-options="field:'PURSE',width:80,align:'right',sortable:true">Purse</th>
                <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
				<th data-options="field:'ACTUAL',width:80,align:'center',sortable:true">Actual</th>
                <th data-options="field:'WINNER',width:150,sortable:true">Winner</th>
                <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
                <th data-options="field:'CP1A',width:200,sortable:true,styler:cellStyler">Cherry Pick Rated 1</th>
				<th data-options="field:'CP2A',width:200,sortable:true,styler:cellStyler">Cherry Pick Rated 2</th>
                <th data-options="field:'CP3A',width:200,sortable:true,styler:cellStyler">Cherry Pick Rated 3</th>
            </tr>
        </thead>
    </table>
     <script type="text/javascript">
        function cellStyler(value,row,index){
            if (value == "notrated"){
                return 'background-color:#ffee22;color:#ffee22;';
            }
        }
    </script>
</body>
</html>

As before, here is the actual EasyUI datagrid page that is rendered with above HTML and JS code
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html
The cell fields that are relevant are 'Winner' and any of the three 'Cherry Pick Rated' columns
The first row affected is the 1505 line and the next row affected is the 1550 row, ETC.

Thanks,

Paul
8  General Category / EasyUI for jQuery / Re: How do I change format in a cell if it contains the value of another cell in row on: June 16, 2016, 09:01:25 AM
Thank you for your prompt reply - Will look at your code and see how I can use it to solve my need Smiley
 
9  General Category / EasyUI for jQuery / How do I change format in a cell if it contains the value of another cell in row on: June 16, 2016, 12:10:24 AM
I have a basic table and need to change the background colour and font colour of a cell if it contains the same value in another cell in the same row.

Code:
<table>
    <tr class="veh-row">
        <td class="vehicle_colour">RED</td>
        <td>4000 miles</td>
        <td class="veh-manual">GREEN Manual</td>
        <td>Petrol</td>
    </tr>
    <tr class="veh-row">
        <td class="vehicle_colour">BLUE</td>
        <td>4000 miles</td>
        <td class="veh-manual">BLUE Manual</td>
        <td>Petrol</td>
    </tr>
    <tr class="veh-row">
        <td class="vehicle_colour">RED</td>
        <td>4000 miles</td>
        <td class="veh-manual">GREEN Manual</td>
        <td>Petrol</td>
    </tr>
</table>

So I need
 
if td.veh_manual contains the contents of the cell td.vehicle_colour, in the example above td.vehicle_colour BLUE would qualify - then I want to change to cell colour for both cells to blue (example colour only) and font colour of both cells to yellow (example colour only).

Here is the actual EasyUI datagrid page
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html
The cell fields that are relevant are 'Winner' and any of the three 'Cherry Pick Rated' columns

How can I do this and only affect that type of row and not all other rows?

Thanks,

Paul
Pages: [1]
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!