Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    exo
    exo is offline
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Putting reference to instance in onclick

    Okay, sorry the title might be a bit vague but the deal is this.

    I'm making a TABLE through the DOM. I have a class called DataGrid with a couple of properties
    Code:
    function DataGrid(table)
    {			
    	this.Table = table;
    	this.Columns = new Array();
    	this.Rows = new Array();
    And some methods:
    Code:
    	this.AddColumn = AddColumn;
    	this.AddRow = AddRow;
    	this.Build = Build;
    AddColumn takes an object, with a number of properties to create the headers. These values are stored in the property Columns on the object instance.
    Code:
     
    	var column1 = new Object();
    	column1["value"] = "Name";
    	column1["width"] = "200px";
    		
    	var column2 = new Object();
    	column2["value"] = "Profession";
    	column2["width"] = "200px";
    	column2["classname"] = "end";
    AddRow just uses an array with values, which will be stored in the property Rows on the object isntance. The method Build paints it on the screen with the DOM. So in order to create my table it goes a little bit like this:
    Code:
        DataGrid1 = new DataGrid(document.getElementById("tabelletje"));
    	DataGrid1.AddColumn(column1);
    	DataGrid1.AddColumn(column2);
    	DataGrid1.AddRow("Joe", "Student");
    	DataGrid1.AddRow("John", "Manager");
    	DataGrid1.Build();

    So far it works well, but now I want my tables to be resorted on another column, when the user click a column title. This part of the Build method paints the header cells:
    Code:
    	function Build()
    	{			
    	var objBody = document.createElement('TBODY');
    	var objHeaderRow = document.createElement("TR");// Adding header cells
    	for (var i = 0; i < this.Columns.length; i++)
    	{
    	var objCell = document.createElement("TH");
    	if (this.Columns[i].value)									
    		objCell.innerHTML = this.Columns[i].value;		// Value
    	if (this.Columns[i].classname)
    		objCell.className = this.Columns[i].classname;	    // Classname
    	if (this.Columns[i].width)
    		objCell.style.width = this.Columns[i].width;		// Width	
    	objCell.onclick = new Function("", "sortColumn(??, " +  i + ")");
    	objHeaderRow.appendChild(objCell);	
    	} 			
    	objBody.appendChild(objHeaderRow);
    	this.Table.appendChild(objBody);
    So what I want now, is a function sortColumn that goes a little bit like this:
    Code:
    function sortColumn(instance, columnNumber)
    {
       instance.Rows.sortRows(columnNumber);
       instance.Build();
    }
    But I can't seem to be able to pass the instance to the DataGrid object through the onclick handler. Any suggestions are welcome. If I made any huge errors please correct me, I'm not entirely new to Javascript but this OO approach is posing some problems still.

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Code:
    function createSortHandler(p_instance, p_index)
    {
      return function() { sortColumn(p_instance, p_index); };
    }
    
    function Build()
    {			
      var objBody = document.createElement('TBODY');
      var objHeaderRow = document.createElement("TR");// Adding header cells
      for (var i = 0; i < this.Columns.length; i++)
      {
        var objCell = document.createElement("TH");
        if (this.Columns[i].value)									
          objCell.innerHTML = this.Columns[i].value;		// Value
        if (this.Columns[i].classname)
          objCell.className = this.Columns[i].classname;	    // Classname
        if (this.Columns[i].width)
          objCell.style.width = this.Columns[i].width;		// Width	
        objCell.onclick = createSortHandler(this, i);
        objHeaderRow.appendChild(objCell);	
      }
    
      objBody.appendChild(objHeaderRow);
      this.Table.appendChild(objBody);
    }

  • #3
    exo
    exo is offline
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is so cool! Thank you very much Beagle it works like a charm

    I have one more question tho, hope I'm not asking too much. Besides sorting users must also be able to click on the rows itself, and a function must fire when they do.

    That function should receive not only the reference to the instance of the DataGrid, but also a reference to the row the user was clicking on. That way I can set a property of the DataGrid reference, and change the className of the row the user clicked on. So the row changes apperance but the entire table doesnt have to be Build() again.

    I haven't gotten this to work yet, I used to do
    Code:
    objRow.onclick = new Function("", "rowClick(arguments[0], this)");
    But I can't get this to work when I try Beagle's approach. I hope I'm making some sense. The idea is to get this sort of function:
    Code:
     function rowClick(e, instance)
     {
       e.srcElement.className = "selectedRow";
       instance.selectedRow = e.srcElement.rowNr;
     }

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I guess that this is the correct approach

    objCell.onclick = function(){somefunction(parameter)}
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    and if you wanna use the index somehow, better attach it as a variable to the object

    objCell.foo=i;
    objCell.onclick = function(){somefunction(this,this.foo)}
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •