search

OdinaSpb / jstree

Automatically exported from code.google.com/p/jstree
0 stars 0 forks source link

Add support for columns #18

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
Column support would be realy nice:

see: http://www.bernardopadua.com/nestedSortables/test/widget/

Original issue reported on code.google.com by lauber.p...@gmail.com on 1 Dec 2008 at 9:36

GoogleCodeExporter commented 9 years ago 
I already have a private project called jsGrid, I am working on a combination 
of the
two components!
I'll keep you posted!

Original comment by ivan.bozhanov on 1 Dec 2008 at 11:19

GoogleCodeExporter commented 9 years ago 
how fast could you finish jsGrid? Could it be finished faster if we would make a
donation? Please get in contact at patrick.lauber (some special character) 
divio.ch

thanks

Original comment by lauber.p...@gmail.com on 1 Dec 2008 at 11:53

GoogleCodeExporter commented 9 years ago 
how is it comming along?

Original comment by lauber.p...@gmail.com on 5 Jan 2009 at 3:53

GoogleCodeExporter commented 9 years ago 
I did some preliminary testing on combining both components ... it is easily
achievable, but I am working on using a common data source, and also - user 
interface
is quite limited ... 
A working version may be out soon though ... Anyway, I am also researching other
possibilities for columns ... I am searching for a native approach - so that it
actually becomes a part of jstree, and not a separate component.
Will get back to you soon.

Original comment by ivan.bozhanov on 5 Jan 2009 at 8:18

GoogleCodeExporter commented 9 years ago

Original comment by ivan.bozhanov on 10 Mar 2009 at 3:02

GoogleCodeExporter commented 9 years ago

Original comment by ivan.bozhanov on 10 Mar 2009 at 3:03

GoogleCodeExporter commented 9 years ago 
just in case you don´t know there is a nice component called jqGrid that you 
might
take a look either

Original comment by bruno.p.reis@gmail.com on 15 Apr 2009 at 7:33

GoogleCodeExporter commented 9 years ago 
Thank you for pointing it out!
I believe I looked at jqGrid a few months ago - I'll check the new versions out!
Any reference will do me good, and maybe I will abandon jsGrid and integrate 
jsTree
with some other grid view plugin (if I find one that has an API good enough to
integrate flawlessly with jsTree).

Original comment by ivan.bozhanov on 15 Apr 2009 at 8:13

GoogleCodeExporter commented 9 years ago 
This would be very useful feature. This is actually what I need in my current 
issue
with jsTree. I need two columnds of data ... without this feature I have to use 
ugly
way of displaying data <column1> (<column2>)

Original comment by osh...@gmail.com on 29 May 2009 at 10:52

GoogleCodeExporter commented 9 years ago 
I agree, this would make jstree absolutely awesome. I would consider making a 
very 
significant donation for work on this one feature.

Original comment by mlave...@gmail.com on 24 Jun 2009 at 10:07

GoogleCodeExporter commented 9 years ago 
Hi ivan, 

I need this component either. If you need help to develop it, let´s talk. 
Since there
are lots of "partially" done works on the web, it does not make sense starting 
a new
one. I am using jsTree and like it a lot because its keyboard friendly.

Original comment by bruno.p.reis@gmail.com on 20 Jul 2009 at 6:11

GoogleCodeExporter commented 9 years ago 
Column support via CSS - a practical work-around.

The nice thing about jsTree is that it accepts any additional HTML syntax 
within 
it's a-tags. This allows for pseudo-column support with a bit of CSS magic and 
some 
additional font-tags. So the following works for me:

1) Ad CSS declarations to your theme file:

Lets assume your tree is 500 pixels wide, the following CSS should do the trick 
(this part makes sure the columns are aligned properly according to the nested 
levels):

ul li a {width:500px}
ul li ul li a {width:480px}
ul li ul li ul li a {width:460px}

As you can see, I have added a new declaration for each sub-level of the tree. 
You 
may continue this to the theoretical amount of nested levels you wish to allow 
for, 
simply add another ul li pair and decrease the width by 20px each time.

Then, define the CSS for the columns, as for example:

.col 1 {float:right; align:right; width:80px; border-left:1px dotted #CCCCCC; 
padding-left:4px;}

You may add more than 1 column, it's up to you

2) Extend nodes to contain column information:

Next, modify the nodes as follows to include column information:

<li id="phtml_2">< a href="#"><ins></ins>Some Node<font class="col1">Column 
1</font></a></li>

As you can see, columns are simply attached as font-tags after the main node 
name in 
the a-tag. Columns are even dragged along this way.

Conclusion: Even it's a bit messy you might say, it works quite well for me in 
my 
CMS. Hope my commnents help.

Original comment by marcandr...@gmail.com on 6 Jan 2010 at 5:31

GoogleCodeExporter commented 9 years ago 
Sorry - one small change to my above post (otherwise it does not work in 
Firefox). 
Put the column info (in the font-tag) before the a-tag, so it is as follows:

<li id="phtml_2"><font class="col1">Column 1</font><a href="#"><ins></ins>Some 
Node</a></li>

It also looks better as only the first column is highlighted when hovering the 
mouse 
over an item.

Original comment by marcandr...@gmail.com on 6 Jan 2010 at 6:42

GoogleCodeExporter commented 9 years ago 
The problem with this approach is that i can only display text. But i probably 
also
want to display button, input elements etc.

Original comment by lauber.p...@gmail.com on 6 Jan 2010 at 8:24

GoogleCodeExporter commented 9 years ago 
Ivan - thanks for the wonderful work on jsTree.

Patrick,

I am developing for a controlled environment that uses IE6, so not sure if my
approach can be tweaked for cross/other-browser compatibility. I know it has 
issues
with Firefox in it's current form but I haven't looked into cleaning them up 
yet,
only because I don't have to for my project.

Basically, I am inserting a table with cells of fixed-width <div>s in place of 
text
in between the <a></a> like so:

<style type="text/css" rel="stylesheet">
.treeCell {
  white-space: nowrap;
  overflow:hidden;
  padding-left: 8px;
}

.col1width { 250px; }
.col2width { 100px; }
.colNwidth { 150px; }
</style>

....

<ul>
<li>
  <a href="#"><table><tr>
    <td><div class="col1width">any content here</div></td>
    <td><div class="col2width">any content here</div></td>
    <td><div class="colNwidth">any content here</div></td>
  </tr></table></a>
</li>
....
</ul>

Again, I'm not sure if the approach/code is best practice, but it's a solution 
that's
working for me right now.

Original comment by mitchell...@gmail.com on 25 Feb 2010 at 7:25

GoogleCodeExporter commented 9 years ago 
we did the same but with divs... and some javascript that measures the width of 
all
the divs and assigns it the widest width.

Original comment by lauber.p...@gmail.com on 26 Feb 2010 at 8:05

GoogleCodeExporter commented 9 years ago 
Yes, I forgot to mention that I adjust the width of the first div based on the 
node
level to compensate for the indentation. I also forgot to include the treeCell 
class
in the div class attributes above, so they should all look like:

<div class="treeCell col2width">any content here</div>

This ensures that cells have fixed single-line height.

Original comment by mitchell...@gmail.com on 26 Feb 2010 at 4:53

GoogleCodeExporter commented 9 years ago 
I just released a plugin to do something similar, Ivan is looking at possibly 
incorporating it into core. Like jstree, it is GPL+MIT dual-licensed. If it is 
helpful, use it; if it needs work, contribute.

http://github.com/deitch/jstree-grid

Avi

Original comment by avi%deit...@gtempaccount.com on 16 Aug 2010 at 4:19

GoogleCodeExporter commented 9 years ago 
Hi 

Anyone can show me how to do this as of today?

Original comment by msuda...@gmail.com on 10 Feb 2012 at 4:07

GoogleCodeExporter commented 9 years ago 
Tree grid is here
https://github.com/deitch/jstree-grid

Original comment by simwa...@googlemail.com on 27 Feb 2012 at 2:33