EasyUI Forum
April 29, 2024, 01:08:04 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Change background colour of a table cell in a treegrid with onClickCell
Pages: [1]
« previous next »
  Print  
Author Topic: Change background colour of a table cell in a treegrid with onClickCell  (Read 1764 times)
larryclyons
Newbie
*
Posts: 9


View Profile Email
« on: June 29, 2023, 08:36:13 AM »
Greetings,

I'm relatively new to jEasyUI so I'm kind of stuck trying to figure out out to change the background colour to change on the onClickCell event or something similar.

I've tried a couple of different approaches using onClickCell and the jQuery .css()  or the removeClass() and addClass() methods, but nothing seems to work. For instance, this approach, while it correctly displays an alert, the background colour doesn't change.

Code:
onClickCell: 
     function(index, row){
          alert(index);
          $(this).css("background-color", "red");
},

Any suggestions etc., would be very appreciated.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: June 30, 2023, 06:46:49 PM »
Please define a 'styler' function for the columns to display the background color.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script>
		var data = {
			"total": 7, "rows": [
				{ "id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok" },
				{ "id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed" },
				{ "id": 21, "name": "Database", "persons": 2, "begin": "3/4/2010", "end": "3/6/2010", "progress": 100, "_parentId": 2 },
				{ "id": 22, "name": "UML", "persons": 1, "begin": "3/7/2010", "end": "3/8/2010", "progress": 100, "_parentId": 2 },
				{ "id": 23, "name": "Export Document", "persons": 1, "begin": "3/9/2010", "end": "3/10/2010", "progress": 100, "_parentId": 2 },
				{ "id": 3, "name": "Coding", "persons": 2, "begin": "3/11/2010", "end": "3/18/2010", "progress": 80 },
				{ "id": 4, "name": "Testing", "persons": 1, "begin": "3/19/2010", "end": "3/20/2010", "progress": 20 }
			], "footer": [
				{ "name": "Total Persons:", "persons": 7, "iconCls": "icon-sum" }
			]
		}

		function styler(value,row){
			const field = this.field;
			return (row['style']||{})[field];
		}
		$(function(){
			$('#tg').treegrid({
				onClickCell: function(field,row,index){
					row['style'] = row['style']||{}
					row['style'][field] = 'background:red;color:#fff';
					$(this).treegrid('refreshRow',row['id'])
				}
			})
		})
	</script>
</head>

<body>
	<table id="tg" title="TreeGrid" style="width:700px;height:250px" data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				data: data,
				idField: 'id',
				treeField: 'name'
			">
		<thead>
			<tr>
				<th data-options="field:'name',width:180,styler:styler">Task Name</th>
				<th data-options="field:'persons',width:60,align:'right',styler:styler">Persons</th>
				<th data-options="field:'begin',width:80,styler:styler">Begin Date</th>
				<th data-options="field:'end',width:80,styler:styler">End Date</th>
			</tr>
		</thead>
	</table>
</body>

</html>
Logged
larryclyons
Newbie
*
Posts: 9


View Profile Email
« Reply #2 on: July 17, 2023, 12:50:43 PM »
Thanks Jarry. I'll give that a shot and let you know how it goes.
Logged
fmdano
Newbie
*
Posts: 22


View Profile Email
« Reply #3 on: July 19, 2023, 04:43:39 AM »
Hey guys,
working with Larry on this and in our Grid we put in the code above, but the refreshRow code does not seem to work.


$('#ourGridName').treegrid({
         url:'com/Administration.cfc?method=getWhatWeNeed',
         method:'get',
         width:'97%',
         idField:'id',
         treeField:'col0',
         emptyMsg: "No Records Found",
         border: true,
         fit: true,
         singleSelect:true,
         checkOnSelect: true,
         fitColumns: true,
         striped: true,
         rownumbers: false,
         collapsible: true,
         lines: true,

         onClickCell: function(field,row,index){

            row['style'] = row['style']||{};
               console.log(row);
               console.log('row id: ' + row['id']);
               console.log('row style field: ' + row['style'][field]);
               alert(row['id']);
               alert(row['style'][field]);
               if (row['style'][field] == 'background:red;color:#fff'){
                        row['style'][field] = 'background:green;color:#fff';
               } else if (row['style'][field] == 'background:green;color:#fff'){
                  row['style'][field] = 'background:red;color:#fff';
               } else {
                  row['style'][field] = 'background:red;color:#fff';
               }
               alert(row['style'][field]);
         
               $(this).treegrid('refreshRow',row['id'])      

         },

         columns:[[  --- all our colum names and attributes below

The JSON that comes back from our external function is the same as what you have in the post, like:
var data =  [
   {  "id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok", "idField": 10 },
   { "idField": 11, "id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed" },  and more..

MY QUESTION:
   in the refreshRow line above, when we use row['id'] which is in the idField attribute, what is that ID Field and how does it work with the refreshRow code? we have an id field in our json code that returns.
That is my guess as to why our code is not working but your example code works....ANY THOUGHTS that could help us more forward would be awesome.
thanks
Dan
Logged
larryclyons
Newbie
*
Posts: 9


View Profile Email
« Reply #4 on: July 25, 2023, 10:24:00 AM »
Just bumping this up. Hey Jarry any answer to this?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #5 on: July 26, 2023, 07:53:20 PM »
The 'idField' property in the treegrid component is required to identify a row node. While calling the 'refreshRow' or 'refresh' methods, the parameter should be passed with the identity field value.

Code:
$(this).treegrid('refreshRow',row['id']);
// or
$(this).treegrid('refresh',row['id']);
Logged
larryclyons
Newbie
*
Posts: 9


View Profile Email
« Reply #6 on: July 31, 2023, 08:56:29 AM »
Thanks Jarry, we'll give that a try.
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

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