chniter / bstreeview Goto Github PK

hello,

is it possible to add buttons to each node ??

Hi,
I am just using the plugin retrieven data in json format from a database.

As soon as a user inserts new records in database, I refresh page to see new nodes.

Is there a way to refresh the plugin without reloading the whole page?
Something like $('#treeview').bstreeview().reload();

I have read about unbinding events. But I can't figure out how to do it.

Any help would be appreciated.
Thank you.

Is your feature request related to a problem? Please describe.
I'm a bit new to web development, so I don't fully understand the various build tools yet (e.g. webpack, parcel, the loaders that webpack uses, posthtml, etc.). I'd like to read a good book that properly explains all these things, but I have not been able to find any such book, so I'm stuck making issues like these when documentation isn't sufficient until I learn enough from them to not have to do so anymore.

Right now, the issue that I'm having with is integrating this with Webpack. I have all of my CSS and JS bundled into a single Webpack bundle. For example, Bootstrap is included like this:

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

and then I just need to include Webpack's bundle in my HTML files (which are rendered via Posthtml) via a normal <script src=… tag. This works great for Bootstrap, but not so much for bstreeview. When I try to include it like this:

import 'bstreeview/dist/css/bstreeview.min.css'; //in my bootstrap CSS include file
import 'bstreeview/dist/js/bstreeview.min.js'; //in the JS file that will build my treeviews (jquery is included separately)

I get breakage. Specifically, when I have the first line that includes the CSS, everything works out how it should, but when I have the second line all of my CSS breaks (I see unstyled pages). When I try to just do include 'bstreeview';, following what I did with Boostrap, I get Can't resolve 'bstreeview'.

Describe the solution you'd like
I would like to see a working example where this library is included via Webpack. I strongly suspect that I'm missing some small (and undocumented, from what I've seen) details for how Webpack and/or this library work, so seeing a complete example is I think, the best way to make this library accessible to me.

Describe alternatives you've considered
I have considered including the CSS and JS files from this in an ad-hoc manner,bypassing any build system and checking it into my own VCS directly instead of including it via NPM, but then I would be forced to include any code that eventually depends on this in a similar ad-hoc manner, which is a significant chunk of my code base. While I could probably make this work, the code quality would be down the drain so it's only technically an option.

I could also try to create my own library that does the same thing, but that's reinventing the wheel unnecessarily when a good library seems to already exist here.

Hi,
in your example you give us a var containing

var tree = [
  {
    text: "Node 1",
    icon: "fa fa-folder",
    nodes: [
      {
        text: "Sub Node 1",
        icon: "fa fa-folder",
        nodes: [
          {
            id:    "sub-node-1",
            text:  "Sub Child Node 1",
            icon:  "fa fa-folder",
            class: "nav-level-3",
            href:  "https://google.com"
          },
          {
            text: "Sub Child Node 2",
            icon: "fa fa-folder"
          }
        ]
      },
      {
        text: "Sub Node 2",
         icon: "fa fa-folder"
      }
    ]
  },

What if my array is named children and my text is named title ?

I thought I could try

// Example: initializing the bstreeview
$('#tree').bstreeview({
  data: data,
  expandIcon: 'fa fa-angle-down fa-fw',
  collapseIcon: 'fa fa-angle-right fa-fw',
  indent: 1.25,
  parentsMarginLeft: '1.25rem',
  openNodeLinkOnNewTab: true
  nodes: 'children',
  text: 'title',
});

but that does not do the trick.

Is it possible ?

regards

Sweet project! I noticed a slight icon misalignment.

Describe the bug

The top drawer icon is slightly more to the left than the two drawer icons below.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://chniter.github.io/bstreeview/
2. Click on "Inbox"
3. Click on "Office"

Expected behavior
Icons are aligned.

Screenshots

Desktop (please complete the following information):

• OS: macOS Catalina
• Browser: Firefox
• Version: 73.0.1 (64-bit)

Additional context

Perhaps https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons could be helpful.

Good Day

Add Bootstrap Badges:

Something similer to this:

Thank You

Albertus Geyser

I've tried the this library and it looks great. I'm able to get the example in github to show the demo three. And when I change the json variable it updates correspondingly. E.g. this code shows up fine:

        let myJsonVar = [{ text: "Inbox", icon: "fa fa-inbox fa-fw" }]
        $('#myTree').bstreeview({
            data: myJsonVar,
            expandIcon: 'fa fa-angle-down fa-fw',
            collapseIcon: 'fa fa-angle-right fa-fw',
            indent: 1.25,
            parentsMarginLeft: '1.25rem',
            openNodeLinkOnNewTab: true
        });

However, in my program, the three comes in string form, so I thought I could just invoke 'parseJSON() to convert it. But for some reason it does not work:

        let sTxt = '[{ text: "Inbox", icon: "fa fa-inbox fa-fw" }]';
        let myJsonVar = parseJSON(sTxt);
        $('#myTree').bstreeview({
            data: myJsonVar,
            expandIcon: 'fa fa-angle-down fa-fw',
            collapseIcon: 'fa fa-angle-right fa-fw',
            indent: 1.25,
            parentsMarginLeft: '1.25rem',
            openNodeLinkOnNewTab: true
        });

It should be such a dead easy thing, and I feel really bad posting for it, but I've really spent much time looking for the hidden trick (stringify, with following parseJSON or even two times parseJSON as I've seen some suggesting in other posts, the jQuery version, $.parseJSON, adding quotes to the key, etc.) Has anybody else encountered this problem or is it only me having two left hands?

First of all, thanks for the work!

I needed to expand possibilities and neede attributes, like data-something="....." data-somethingelse="...." but I can't easily do it.

My propositon is to filter, any that is not specific to your option on a node, you put it as data-KEY_OF_LINE="CONTENT OF LINE"

You might filter a little to avoid strange things, but I thing it should work. If you want to make it more strict, give a list of data-attributes, like attribute1, attribute2, and so on, just need to be attribute+integer.

Would be great ! thanks

• I think it would be nice to have methods to programmatically expand/collapse a list-group. You could of course do this by simply using Bootstraps collapse() method. But that would not change the state icons.
• Additionally a custom id attribute value for list-items where needed would help to identify the proper list-item to call the methods on.

I prepared a demo how this could work:
https://alpha.jspanel.de/lib/bstreeview/src/index.html
If you find some time to take a look at my example please let me know what you think ...

Currently, if a given tree node has no children (but the nodes array is defined as empty), the expand/collapse icons still render. I believe that if the length of the nodes array is zero, this should be treated the same as not supplying a nodes property.

My current workaround is for my TreeNode typescript class to provide a trimNodes() function:

      public trimNodes() {

            if (this.nodes.length == 0) {
                delete (this as any).nodes;
            } else {
                for (const node of this.nodes) {
                    node.trimNodes();
                }
            }

        }

While this works, and is easy enough, it would be nice if bstreeview handled this internally.

First of all thanks for this project 👍

Describe the bug
Running the unminified js file causes an error (I tried on desktop FF and Chrome)

In order to contribute it would be great if I could run the unminified js file.

Thanks,
Stefan

Describe the bug
The href property when set just sets an href to the div, but it does nothing if you click on it

To Reproduce
Steps to reproduce the behavior:

Use below for tree nodes:

var json = [
	{
		text: "Main",
		icon: "fa fa-inbox",
		nodes: [
					{
						text: "Google",
						href: "www.google.com"
					}
				]
	}
];

Then open the tree an click on "Google", see it has an 'href' but nothing happens

Expected behavior
When clicked, the google should open (or in a new tab if clicked with the middle mouse button)

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 74.0

For better accessibility the first parent elements should not have a margin on the left.

How to remove the margin of the first element to get this?

ex. https://zupimages.net/up/20/17/5mav.png

im building a dynamic tree for this i call a method which builds the tree, but when i call the same function so it can build the new tree when a get to the part of $('#tree').bstreeview({data: json});
it dosen't do nothing

// this is just an example

function buildsTreeDyanamic(){
// the values of this json changes every time the function is call
var mydynamictree = [
{
icon: "fa fa-globe fa-fw",
text: "Go to Google",
class: "text-info",
href: "https://google.com"
}
];
// it does print the tree ithe first time, but when a clean that div and call the function again the tree dosen´t appear
$('#tree').bstreeview({data: mydynamictree });
}

I reset the tree and reload a new updated tree but no success :
$('#tree').html(''); //
$('#tree').bstreeview({
data: json, // a New json
expandIcon: 'fa fa-angle-down fa-fw',
collapseIcon: 'fa fa-angle-right fa-fw',
indent: 1.25,
parentsMarginLeft: '1.25rem',
openNodeLinkOnNewTab: false
});
Does anyone have a solution for this please ?
Many thanks

event for get current selected node id and text when user click that node
is it possible for you?
thanks

hello,

is it possible to add tooltip to each node ??

Is your feature request related to a problem? Please describe.
Currently the bstreeview expects a string when passing data value. It wasn't clear for me from the README file that it expected a JSON string.

Describe the solution you'd like
Would it be better to pass an array filled with dictionaries instead?

Describe alternatives you've considered
Also it is possible to update the README file instead, that it would be clear that a JSON string should be passed.

How do you recommend automatically opening some of the nodes on page load? I don't see an option for that.

I'm trying to use it for documentation but not quite sure how to get the tree back to the state it was in when someone clicks on a link that opens in the same tab.

Is there a way to remove the "collapsed" css class to force a node open? I see an option to add a class but not to remove one.

Loading a large array with 300,000 nodes works well, but if I click on a parent node with 200 child nodes, it freezes.

Also, is it possible to load only the first parent nodes and load the child nodes when we click on the parent node? Like an ajax call

Here is an example: loading with AJAX => https://www.jstree.com/docs/html/

Thank you

Just a quick note on bootstrap 5 usage. All that needs to be done is change data-toggle to data-bs-toggle in the js and this plugin works for bs5. Great plugin, wish I would have found it sooner!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
i find your bstreeview is good,but i want use checkbox,can you add this function?thanks!
Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

To provide hints for assitive technologies, this should use ARIA attributes as described here: https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

Hello,
can someone please help me get the search function to work i can't seem to make it work or find any solutions
thanks