maxazan / jquery-treegrid

TreeGrid plugin for jQuery
http://maxazan.github.io/jquery-treegrid
MIT License
553 stars 222 forks source link

Big data example #28

Open pinguin999 opened 9 years ago

pinguin999 commented 9 years ago

The Big data example takes to long to. Chrome and Firefox showing "to long working javascript" errors.

Any ideas how to speed this up? I need 1000+ rows in the android chrome.

YMA-MDL commented 9 years ago

Also with around 800 rows, it would be nice to not block the whole interface while creating the treegrid.

maxazan commented 9 years ago

I will think what can I do

YMA-MDL commented 9 years ago

I've got a view with a bit more than 800 rows, and with this change, it reduces from 40s to 5s. Maybe it needs more test but is seems to work fine for me. And maybe it works only with bootstrap as I'm using the "hidden" class. If not using bootstrap, it would need something to handle the visibility but you shouldn't use hide and show in a loop. Let Jquery handle the loop by applying hide and show to a collection.

sharathtrt commented 9 years ago

it is not working for me...i have around 400 to 500 rows it is taking around 40sec..please help me out..

YMA-MDL commented 9 years ago

you've tried my change?

throrin19 commented 9 years ago

I have the same problem, i have ~1500 rows to show and the treegrid and treeGrid collapse parts are too long and they freeze my browser :

treeGrid: 15861.654ms
collapse: 10863.867ms
YMA-MDL commented 9 years ago

have you tried my code change suggestion ? https://github.com/YMA-MDL/jquery-treegrid/commit/633cf33392f691c3c8046f4b08324fd2bae503d2

throrin19 commented 9 years ago

For your change @YMA-MDL I think we should set that like this :

if ($this.treegrid('isOneOfParentsCollapsed')) {
     $this.addClass('hide');
} else {
     $this.removeClass('hide');
}

Because the show class in Bootstrap show elements as block. And the gain is very small (1s)

YMA-MDL commented 9 years ago

Strange, it made a very significant change for me. This issue was that the code was iterating on important DOM manipulation where now it's just a class update and Jquery does the rest.

throrin19 commented 9 years ago

but that part does not solve the tree-grid initialization. Only the collapse part. I think the modificzation to optimize the code is to rewrittent all of this without jQuery but with pure javascript and frasgments. In my code, if i try to manipulate a large amount of data, i increase the loadTime and reduce this by 10 only with fragment and javascript native DOM elements. jQuery is heavy and too resource hungry to manipulate large amount of data

mitchc32 commented 8 years ago

@YMA-MDL - for what it's worth, integration with this script http://nexts.github.io/Clusterize.js/ would likely solve the big data pains and increase your scripts outer limits by hundreds of thousands of records. I might investigate this myself once I have some time.

YMA-MDL commented 8 years ago

Good Luck, not sure if it will allow to save nested state. Like you browse a structure, and getting back to it later, the same branches are deployd.

krosoftware commented 7 years ago

@YMA-MDL, did you implemented Clusterize? If yes, can you share some sample code, please?

YMA-MDL commented 7 years ago

No I did not, but I may come across the same need soon.

krosoftware commented 7 years ago

Thank you. I try but it does not worked :(

Parama91 commented 7 years ago

Also tried to combine the Clusterize, but initializing still stays slow with about 1500 rows. Commit from @YMA-MDL (thanks by the way ;-) ) was applied to the code.

Attached the performance record i did with Chrome Version 61.0.3163.100 (64-bit) for future analyses:

Recorded by Chrome