Sortable table header & mouseover popup: is this possibl

[pservedio]

I have a page containing a table with 7 columns, and currently each on of those columns is sortable, using milonic's class=sortable css strategy. Works great.

But I would also like to have the page display a milonic menu when the mouse is placed over any the 7 column text strings.

The menu displays all unique values in the column, and upon selecting one of those values, the table gets filters for only those values.

My question is this, can this be done, and would a mouseover function be at odds with the sortable functionality? (it doesn't appear so, since sortable uses onClick, but maybe there is something that I'm not aware of).

I'm planning on using mm_createNewMenus() and mm_insertItem() to create menus and items on the fly, as the table data is very dynamic.

[Andy]

Hi,

If the item has been added to the menu, the item should be considered for sorting.

Also, if a sub menu (showmenu) command was added it should have no effect on the ordering process.

The best thing to di is try it and see what happens

Hope this helps,
Andy

[pservedio]

Well, I've been trying to get this to work. First hurdle was the sorttable.js function ts_makeSortable. It hijacks the HREF for the column header, so I had to modify it in order to add in a mouseover function:

Code: Select all

function ts_makeSortable(table) {
   ...
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        if (txt == "Phase") {
            cell.innerHTML = '<a href="#" class="sortheader" '+ 
            'onclick="ts_resortTable(this, '+i+');return false;"' + 
 ------> 'onmouseover="popupMenu(1);return false;">' +
            txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
        
    }

So that works, but when I try to add in menu items on the fly via the mm_insertItem method:

mm_insertItem(getMenuByName("Phase"), i + 2, "text="+uniquePhases+";url=xxx.html");

I get this error from milonic:

_m[_mn] has no properties.

What does this mean? This is what I have in menu_data.js, dunno, maybe it's wrong:

Code: Select all

with(milonic = new menuname("Phase")){
alwaysvisible=0;
position="relative";
style = subStyle; 
aI("Phases...;url=");
}

[kevin3442]

Hi,

The error indicates that the menu you're targeting with mm_insertItem() does not exist in the menu array, _m[]. I'm thinking that you're specifying the target menu incorrectly. In mm_menueditapi.js, the meuRef required as the first parameter to mm_insertItem() looks like it should be a menu name, rather than a menu number (which is what getMenuByName() returns... an index into _m[]). So, try this instead:

Code: Select all

mm_insertItem("Phase", i + 2, "text="+uniquePhases[i]+";url=xxx.html");

Hope that helps,

Kevin

[pservedio]

Smokin! It works! Thanks...

For anyone else out there, this what I had to do, nothing too tricky:

1. Define a menu in menu_data.js for your column header, put in one fake item:

Code: Select all

with(milonic = new menuname("Phase")){
alwaysvisible=0;
style = subStyle; 
aI("Phases...;url=");
}

2. Carefully modify the ts_makeSortable() function in sorttable.js to allow popups and sorting on the same column header:

Code: Select all

    // We have a first row: assume it's the header, and make its contents clickable links
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        if (txt == "Phase") {
            cell.innerHTML = '<a href="#" class="sortheader" '+ 
            'onclick="ts_resortTable(this, '+i+');return false;"' + 
            'onmouseover="popupMenu(1);return false;"' +
            'onMouseOut="popdown()">' +
            txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
        } else {       
            cell.innerHTML = '<a href="#" class="sortheader" '+ 
            'onclick="ts_resortTable(this, '+i+');return false;">' + 
            txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
        }
    }

3. Build your dynamic menu in your code

Code: Select all

  for (i = 0; i < uniquePhases.length; i ++ ) {
             mm_insertItem("Phase", i + 2, "text="+uniquePhases[i]+";url=xxx.html");
      }

4. Build your popup function (perhaps this could be called directly from the onmouseover specification in sorttable.js above, not sure). I'm using menu numbers simply because I couldn't quickly figure a way to escape double quotes in the above sorttable.js function.

Code: Select all

function popupMenu(menuNum) {
    if (menuNum == 1) {
        popup("Phase", 1);
    }

}