EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Juan Antonio Martínez on September 07, 2016, 10:29:48 AM



Title: Run time change datagrid column position.
Post by: Juan Antonio Martínez on September 07, 2016, 10:29:48 AM
Hi all.

I have a (multirow header) datagrid whoose column ordering is context dependend.

Based on question about columns dnd:
http://www.jeasyui.com/forum/index.php?topic=279.0

I've extended datagrid in this way:
Code:
$.extend($.fn.datagrid.methods, {
    // move Field 'from' at header index 'head' before field 'to'
    moveField: function(jq,data){
        return jq.each(function(){
            var columns = $(this).datagrid('options').columns;
            var cc = columns[data.head];
            var c = _remove(data.from);
            if (c){
                _insert(data.to,c);
            }
            function _remove(field){
                for(var i=0; i<cc.length; i++){
                    if (cc[i].field == field){
                        var c = cc[i];
                        cc.splice(i,1);
                        return c;
                    }
                }
                return null;
            }
            function _insert(field,c){
                var newcc = [];
                for(var i=0; i<cc.length; i++){
                    if (cc[i].field == field){
                        newcc.push(c);
                    }
                    newcc.push(cc[i]);
                }
                columns[data.head] = newcc;
            }
        });
    }
}

Works fine... but header columns don't move, just datagrid content
Here comes a sample image capture:
after
Code:
dg.datagrid('moveField',{'head':1,'from':'Club',to:'Dorsal'});
you can see contents moved, but header remains unchanged
(https://dl.dropboxusercontent.com/u/72813204/column_move_failed.png)
What am i missing? Any way to re-render datagrid header?

Thanks in advance
Juan Antonio


Title: Re: Run time change datagrid column position.
Post by: Juan Antonio Martínez on September 07, 2016, 02:55:40 PM
As aside note: this works for me:

Code:
dg.datagrid('moveField',{'head':1,'from':'Club',to:'Dorsal'});
var opts=dg.datagrid('options');
dg.datagrid(opts);

By redeclareing datagrid, header gets rendered as desired... but seems to me too heavy to redeclare and render datagrid every time that a column is changed, and not sure on collateral efects in dom tree

Juan Antonio