Flexigrid - Lightweight but rich data grid

[eluser]TheJayL[/eluser]
The context menu I am using is from http://www.dynarch.com/products/dhtml-menu/.
Its another script that generates a popup menu for a list based on an Ordered List. I believe there are other popup menu generators out there to actually make a context menu. They key for me though was that the JS to create the menu was being fired on page load, and so it was not binding to rows function on as the list is created by ajax. I had to add an 'onSuccess: "MenuGenerator(Parameters)"', and then at the end of the addData function, after the full XML has been parsed and the list is made i added "eval(p.onSuccess)". I know I am probably not using onSuccess as was intended, but I needed this to fire to onSuccess per se but onComplete, I may change the var name to be more politically correct.

As far as widths and columns I have to use sessions, max security reasons. In fact, I'm not using conventional sessions at all, something a lil more complex for security again, but they can function just like good ol' $_SESSION[]'s. So no to cookies in this case. I am getting what I need by using simple jquery, please keep in mind I am new to jquery so if there is a more eloquent way of coding what I have please let me know, I am no expert:

Code:

//store column order
            var headString = '';
            var headElements = $('thead tr',this.hDiv).children('th');

            for(i=0; i<headElements.length;i++)
            {
              headString += $(headElements[i]).attr('abbr');
              if(i != headElements.length-1) headString +=',';
            }
            setSession('columnorder',headString,0);

This code is at the end of dragEnd() function. So the state is captured everytime user changes something on the page.

setSession is a custom function I have living on every page that fires ajax to set the sessions in the background with a name, the value, and a boolean if the page should reload or not given the new data.

Multi sort-The big thing is sortorder and sortname are now 2 arrays and referenced as such. I changed a lot of little stuff to reflect this.

The new setup js has:

sortname = new Array("col1","col4","col3"),
sortorder = new Array("asc","desc","desc"),

I am having trouble on multi sort getting it to display the arrows for asc, desc on a page reload still so not 100% yet. And like I said, I'm just starting into jquery world so if there is a better way to do the code I have please correct it.

I'll try and get some kinda demo thing once I have got it doing exactly what I need, it will take a while to do, and I'd like to clean my code first.

Also, I can't upload my js file to this forum, too many changes for allowing multi sort to just post code snippets. Everytime sortorder or sortname are referenced I had to make a change for the arrays, but most notibly added:

Code:

changeSortMulti: function(th) { //change sortorder for multi columns

        if (this.loading) return true;

        $(g.nDiv).hide();$(g.nBtn).hide();

        $('div',th).removeClass('sasc');
        $('div',th).removeClass('sdesc');
        if (p.sortname.indexOf($(th).attr('abbr')) == -1)
        {
            p.sortname.push($(th).attr('abbr'));
            p.sortorder.push('desc');
            $('div',th).addClass('sdesc');
        }
        else
        {
          var place = p.sortname.indexOf($(th).attr('abbr'));
          if (p.sortorder[place]=='asc') p.sortorder[place] = 'desc';
          else p.sortorder[place] = 'asc';
          $('div',th).addClass('s'+p.sortorder[place]);
        }

        $(th).addClass('sorted');
        if (p.onChangeSort)
          p.onChangeSort(p.sortname,p.sortorder);
        else
          this.populate();

      },

and changed:

Code:

changeSort: function(th) { //change sortorder for only 1 column

                if (this.loading) return true;

                $(g.nDiv).hide();$(g.nBtn).hide();

                if (p.sortname[0] == $(th).attr('abbr'))
                    {
                        if (p.sortorder[0]=='asc') p.sortorder[0] = 'desc';
                        else p.sortorder[0] = 'asc';
                    }

                $(th).addClass('sorted').siblings().removeClass('sorted');
                $('.sdesc',this.hDiv).removeClass('sdesc');
                $('.sasc',this.hDiv).removeClass('sasc');
                $('div',th).addClass('s'+p.sortorder[0]);
        var temp = p.sortorder[0];
        p.sortorder = new Array();
        p.sortorder[0] = temp;
        p.sortname = new Array();
                p.sortname[0]= $(th).attr('abbr');

                if (p.onChangeSort)
                    p.onChangeSort(p.sortname[0],p.sortorder[0]);
                else
                    this.populate();
            },

as if they arent holding the shift key the array always only has one element at [0]. I havent done anything to onChangeSort as my code always just fires the else populate.

and changed the click of the thead to have:

Code:

$(this).click(
                                function (e)
                                    {
                    if (!$(this).hasClass('thOver')) return false;
                    var obj = (e.target || e.srcElement);
                    if (obj.href || obj.type) return true;

                    //user not using shift, only change one column
                    if(!e[p.sortMultiSortKey]) {
                      g.changeSort(this);
                    }
                    else //user using shift, multi column sort
                    {
                      g.changeSortMulti(this);
                    }
                  }
                            )

So I think I've confused myself, sorry for the long post and feel free to correct.