jqTree icon indicating copy to clipboard operation
jqTree copied to clipboard

Is Pagination Possible...

Open Bhumit-t opened this issue 3 years ago • 8 comments

Hello

Thanks for producing this Tree view code.

Can you provide some guidance for paginating the data for each node and showing each page on sliding the range.

Bhumit-t avatar May 10 '22 18:05 Bhumit-t

Unfortunately there is no support for pagination.

mbraak avatar May 11 '22 06:05 mbraak

Hello Marco,

Apologies for writing in Issues tab...

I am trying to do pagination using jquery pagination plugin.

For that I need to add an html input element to the DOM and then change events on this element will be picked up by the jquery code as it comes live.

Tried adding this html element using "onCreateLi" method. But it is not adding it at the desired location

for eg: using "after" method of jquery is adding is inside the div element which is child of the li element of the given node not able to add this new html element after the div...

tried different ways like getting ul element under the li and adding the input element before it, but not able to get the ul element and adding input element to the object by doing something like: ''' thisNode.element.children[0].htmlToAdd("input>search") '''

can see the element in object printed in console but not visible in the DOM structure (i mean: on screen or HTML source)

I am not aware how the objects shown in console are getting created and can be changed or not. Moreover the functions are written in ts so trying to find how elements can be adding in ts but most examples are based on fetching element by "id" where as in this case the id is there in object but not in html tag rendered.

Please guide in this regards, Thanks a lot !

  • Bhumit

P.S : If there is any alternate channel to reach you please share the same...

Bhumit-t avatar May 16 '22 12:05 Bhumit-t

Hello,

Could you give an example of the html you want as end result (for a single tree node)?

One thing I should add: it's important to add html elements inside the jqtree-element div. It's also important to keep the jqtree-title span.

Greetings

mbraak avatar May 16 '22 12:05 mbraak

Hello Marco,

Please find the image below:

image

I have added an input filed as 1st li element under the ul element which is under the main li element of the Node (i.e Networks).

When I am trying to add this using the example give for onCreateLi method in which "edit" link gets created beside the node it is getting created after the

element in side the main "li" of "Networks" node (hence remains open even when the node is not clicked) as show in image below: image

Thanks Again ...

Bhumit-t avatar May 16 '22 18:05 Bhumit-t

It's only possible to add html elements inside the li (and jqtree-element div). If you add elements outside (like the first example above), then jqTree will not work correctly.

mbraak avatar May 17 '22 05:05 mbraak

is there any way for DOM manipulation like we do in Jquery, where you can pick an element (for eg using id) and then change that element or append other elements?

Apart, "id" is passed to the node but not visible in the html element created it might be the way typescript works, but is there any way for showing "id" in the html elements ?

Bhumit-t avatar May 17 '22 07:05 Bhumit-t

It's possible to get the html element for a node id:

// Start with a node; e.g. using getNodeById
var node = $tree.tree('getNodeById', 10);

// A Node has en `element` attribute, which is of type `HtmlElement`
var htmlElement = node.element;

// Convert the html element to a jQuery element
var $htmlElement = $(htmlElement);

Another approach is to use getNodeById to add an id to the html elements.

onCreateLi: function(node, $li) {
        $li.attr('id', 'node-' + node.id);
    }

Then you can later find the elements using jQuery:

var $node = $('#node-9');

mbraak avatar May 17 '22 16:05 mbraak

Hello Marco,

hope you having a Good day...

Thanks for the explanation. with the suggestion provide above I am trying to make it work with combine inbuilt methods of jqtree and jQuery`s...

I`ll be progressing and may be running in to newer stops.

Thanks a lot for the prompt and helping response!!

-- Bhumit

Bhumit-t avatar May 18 '22 13:05 Bhumit-t