Print Page - Datagrid Dynamic Column Order [solved]

Title: Datagrid Dynamic Column Order [solved]
Post by: devnull on November 24, 2016, 10:33:49 PM

How can I change the order that the columns are displayed in after the datagrid has been rendered and loaded ?

What I would like to do is to provide an array of field names and have the table columns change to be in the same order as the array:

Code:

var order = ['five','three','one','two','four']
dg.datagrid('order',order);

I will save this order into a cookie and use it when the page is reloaded to present the columns in the user's desired order.

Ultimately it would be good if this order could be used before the datagrid is rendered instead of loading the hard-coded columns array and then re-sorting again after.

But it also needs to be changed on the fly so that when the user selects a different order, the loaded datagrid column order changes automatically.

Is there an event that could be called before the columns are loaded i.e. a columnLoadFilter() that performs the same way that the row load Filter does.

This would be a nice enhancement !

Title: Re: Datagrid Dynamic Column Order
Post by: Pierre on November 25, 2016, 12:02:14 AM

I like that idea ;D

Title: Re: Datagrid Dynamic Column Order
Post by: devnull on November 25, 2016, 05:27:31 PM

I have looped through the columns and added an index to each record to indicate the order I want them to be displayed in, then I have an existing keysort() function that re-orders the array, this works fine.

I have also found that you can re-order the columns by re-initialising the datagrid:

Code:

function keysort(array, key) {if(!array) return; return array.sort(function(a, b) {var x = a[key]; var y = b[key];return ((x < y) ? -1 : ((x > y) ? 1 : 0));});}
dg.datagrid({columns:[keysort(dg.datagrid('options').columns[0],'index')]});

dg.datagrid('reload');
dg.datagrid('fitColumns');
dg.datagrid('getPanel').panel('doLayout');

However how can I get the datagrid to refresh it's columns, I have tried various methods such as reload, fitColumns and also tried to get the panel to refresh, but not will meke the datagrid display the new column order:

Title: Re: Datagrid Dynamic Column Order
Post by: stworthy on November 25, 2016, 05:34:50 PM

Please download the columns extension from http://www.jeasyui.com/extension/columns_ext.php. Call 'reorderColumns' method to reset the column order.

Code:

var order = ['five','three','one','two','four']
dg.datagrid('reorderColumns',order);

Title: Re: Datagrid Dynamic Column Order
Post by: devnull on November 25, 2016, 05:39:35 PM

Thanks very much, but that is 400 lines of code that includes drag and drop and lots of other stuff I don't need.

Can you let me know how to get the datagrid to reload with a new column definition as I have a solution that uses much less code and my code is already way too big with all of my extensions :-)

Many Thanks

Title: Re: Datagrid Dynamic Column Order
Post by: stworthy on November 25, 2016, 10:13:28 PM

Please call this code instead.

Code:

var dg = $('#dg');
var columns = dg.datagrid('options').columns[0];
keysort(columns, 'index');
dg.datagrid({columns:[columns]});

Title: Re: Datagrid Dynamic Column Order
Post by: devnull on November 25, 2016, 11:05:16 PM

Thanks, it's all working now

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on November 24, 2016, 10:33:49 PM