See more information at http://maxazan.github.io/jquery-treegrid
npm install jquery-treegrid
bower install jquery-treegrid
Download source from github.com
TreeGrid plugin for jQuery
Home Page: http://maxazan.github.io/jquery-treegrid
License: MIT License
See more information at http://maxazan.github.io/jquery-treegrid
npm install jquery-treegrid
bower install jquery-treegrid
Download source from github.com
Whether Editable Grid Feature is available in jquery-treegrid . if available plz let me know how to use it.
I think that it would be useful adding two events:
Thanks
-definable initial state of selected rows (collapsed/expanded)
-definition of behavior for too long lines (wrapping, indentation, trimming, etc.)
Is it possible to load data using url?
It's hard to target the glyph in small devices (small screen). Is there any way to be clickable all the word to expand the subtrees?.
Tnx
Chris
This altered version of the initExpander code will add the expand action to the title of each treenode:
( makes it much easier to use, don't know how to add this to code, sorry )
initExpander: function() {
var
var cell = $this.find('td').get($this.treegrid('getSetting', 'treeColumn'));
var tpl = $this.treegrid('getSetting', 'expanderTemplate');
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
if (expander) {
expander.remove();
}
$(tpl).prependTo(cell).click(function() {
$($(this).closest('tr')).treegrid('toggle');
});
// %%%%%%%%%% added these lines %%%%%%%%%%%%%%%
$(cell).find(".title").click(function () {
$($(this).closest('tr')).treegrid('toggle');
});
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
return $this;
},
Just like the display in the example, My data's Id is not an integer ,but a string like '1-1','1-2','1-2-1', I render the table ,but it seems it doesn't work.
Hi All,
I'm having a large set of data almost 2000 rows in table. I want to display progress bar or i need to do pagination while collapsing the row and once it is completed i want to disable the progressbar.
Is there any way to handle this method like completed or success event exists?
$('.tree').on("change", function() {complete: function () {}});
Is there any way kindly update.
I would like to use the plugin.
It still maintenance or not?
This is some cool stuff however it would be nice if the columns could have headers.
Is there any option to sort by drag&drop
I have this error on my Tree
Uncaught RangeError: Maximum call stack size exceeded
$(document).ready(function () { $('.table').treegrid({ initialState: 'collapsed', expanderExpandedClass: 'glyphicon glyphicon-minus', expanderCollapsedClass: 'glyphicon glyphicon-plus' }); });
pls add this project to bower
Hi
I want to provide data in form of json, does this lib suppor that?
Thanks for your work!
I wonder if we can set some parameters so that tree can be shown as collapsed form by default. When the user clicks on the icon or node, the tree nodes will be expended. Thanks!
First, this is a great control. Thank you.
I've noticed that when I collapse and expand a node, there is a selected text highlight behind the node text. It looks like a colored block behind the text block.
I fixed it with this style:
.tree td {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Not sure if/how you want to include this in the styling.
Hi.
Level 1 - 4 rows
Level 2 - 226 rows
Level 3 - 5 rows
this configuration not work. Javascript is down.
when Row Click i took values and passed them to popup. and after changing the values in it. i wanted it to store it back to grid, but when i closed the popup grid got refreshed and again same default values appeared.
if this is not clear let me know about this.
Hi maxazan,
I'm currently trying to use your tool with angular 2, using ng-repeat to populate the grid. I've run into some issues with it. Do you support, or plan to support, angular?
Thanks!
when specific parent node is removed please remove it's child elements too
opening/collabsing big tree contents might irritate the user
How about adding an open/close animation where the speed can be configured by developer as well as on/off?
It's possible to add new nodes to the grid and make the expand/collapse work?
I can't figure it out how.
Thaks.
Hello all
I need option where it is possible to define which column(s) are always visible and which are hidden based on device size.
For example, on desktop displayed are all 5 columns
on iPad (portrait) displayed are 3 columns and on phone displayed is only one column, something like it works here:
https://github.com/filamentgroup/tablesaw
I want to pay if someone can add that feature (wanted to write directly to maxazan but can not find any email address?
Than you.
Hello, is there option for something like these line helpers: http://powerconsulting.co/Samples/Tabelizer
It would be very nice. :)
Hey,
First of all, thanks for the plugin. It helped me so much ;)
When I activate the saveState, the tree-structure disappears, and I have the full table without tree-structure.
I have tried this multiple ways:
What's going wrong? :s
Greetzz
Hi there - thanks for this treegrid! As a JS beginner I have a few basic issues with adapting the tree to my needs.
Firstly, I like to know how I can trigger $('#tree').treegrid('expandAll'); with a button or a checkbox for example. Can somebody help?
Secondly, savestate is not working if applied as shown in the savestate example. initialState works however, but if I insert the savestate : true line, all the node arrows disappear, so there must be some issue here.
Thanks for help! Frank
For a table with "table-striped", is it possible to turn off the table stripe for each child and its children row? Only allow stripes for the 1st level parent rows.
If a node has a childNode,then its next node's parentNode is itself. So use the method "isLast" on this node will return ture.
$('.tree').find('tr').each(function(){
if ($(this).treegrid('isLast')){
$(this).find('.treegrid-expander').css("background","red");
}
});
Here's my code;
And this is the error from firebug
TypeError: $(...).treegrid(...) is undefined
Hi,
I have downloaded the jquery-treegrid. but i am unable to get the expand or collapse, the table is displaying as simple table. Even the examples are also displaying as normal table.
In example 1 you have mentioned to add jquery.js , which file is this. This file is not included in tar.
says Object doesn't support this property or method at line " $('.tree').treegrid();"
We currently have the ability specify glyphs for items with children that are expanded or collapsed, but not glyphs for items that have no children.
This is helpful to provide a default icon for items with no children.
Hello , I'm is China people,not good in English,
Thanks for you . you tools is so great
but wo don't know how to add checkbox in the tools.
do you have checkbox extend. thanks very much
Hi
Following is the output i get from my query
$array = array (0 => array ( 'id' => '1', 'parent' => '0','name'='aaaa' ),
1 => array ( 'id' => '2', 'parent' => '1','name'='mmmmm' ),
2 => array ( 'id' => '3', 'parent' => '0','name'='uuuu' ),
3 => array ( 'id' => '5', 'parent' => '0','name'='www' ),
4 => array ( 'id' => '17', 'parent' => '3','name'='bbbb' ),
5 => array ( 'id' => '31', 'parent' => '2','name'='ttttt' ),
6 => array ( 'id' => '32', 'parent' => '2','name'='kkkk')
7 => array ( 'id' => '97', 'parent' => '31','name'='pppp' ),);
If i created a table by looping trough this i will get the tree but the position of parent and child are not correct. The rows are not rearranged according to its parent id. Is it possible to rearrange them by this plugin to get the tree correctly.
Dear, if I need to add headers to the levels of the tree. As I do so that the alignment and tabulation are equal to the contents of the table.
You add the thead but levels of the tree has its own tab, try to adjust it with css and do not take them, greetings!
How do I use the plugin with Angular2 ?
there is some function to work with AJAX, every time you load the ajax actulice the tree?
In chrome and firefox tested.
With 100 rows of reasonably nested lists, this completely fails to init, don't even try it on anything larger as it freezes.
Some optimization needed here for this to be practical,
There is something wrong with init is seems.
:( was promising
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.
In my feature I need to instance the treegrid and keep the current state.
But currently, when I add one more row and apply the treegrid, the another rows are open or close.
I think in accept another value like "keep" or simply false. Currently is only ("expanded" and "collapsed").
Hi,
I am using django and supervisor/nginx to run my webserver. I have js-cookies in my static files (as well as a number of other items that are loaded without issue). For whatever reason, I cannot get saveState to cooperate. I am basically hanging on a blank load screen when I try to refresh the browser with saveState in the code block. If I remove saveState, everything works great.
Apologies if this isn't detailed enough, more of a weekend warrior with web dev.
Looking in DEBUG, I also see this:
[12/Sep/2017 20:53:38] "GET /static/js-cookie/src/js.cookie.js HTTP/1.1" 304 0
Here is my code block loading this in:
<html lang="en">
<head>
<title> Temp </title>
{% load staticfiles %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<meta http-equiv="refresh" content="300">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static '/jquery-treegrid/css/jquery.treegrid.css' %}">
<script type="text/javascript" src="{% static '/jquery-treegrid/js/jquery.treegrid.js' %}"></script>
<script type="text/javascript" src="{% static '/js-cookie/src/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static '/jquery-treegrid/js/jquery.treegrid.bootstrap3.js' %}"></script>
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementById("CurrentLink").href = window.location.toString();
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.tree').treegrid();
$('.tree-2').treegrid({
'initialState': 'collapsed',
expanderExpandedClass: 'glyphicon glyphicon-minus',
expanderCollapsedClass: 'glyphicon glyphicon-plus'
});
});
Hi
I don't know if this is a known issue, but it is taking almost 1 minute to load the table grid for just 1530 nodes. Please let me know if there is any work around for this or this issue is in queue to be fixed.
Thanks
Is it somehow possible to set level of expansion?
I'm trying make nested treegrids but get error: Uncaught TypeError: Cannot read property 'getChildNodes' of undefined
Code:
<table class="tree">
<tr class="treegrid-1">
<td>ID</td>
<td>Client</td>
<td>Date</td>
<td>Status</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td colspan="7">
<table class="tree table table-bordered">
<tr class="treegrid-6">
<td>Test</td>
</tr>
<tr class="treegrid-11 treegrid-parent-6">
<td>Test2</td>
</tr>
</table>
</td>
</tr>
</table>
It would be helpful to provide a setting that disallows the expansion or collapse of items. That is, the entire tree is expanded by default, and users cannot collapse trees/subtrees.
Hi there,
I'm trying to use this plugin with webpack using the version published on npm, but, I've noticed that the package.json
's main point to a non existing index.js
. It's also not working on tonic
It's possible to have an update to the package.json
and relative update to npm?
Thanks
I followed this example: http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html
But it seems to be a bug hidding the icons on the first load. A capture: http://i.imgur.com/Ba52qyT.png
After clicking the icon appears: http://i.imgur.com/Lz8JJTk.png
Any idea how to solve it?
Thx
In the example below, if I had a button that added a new child for treegrid-1, it would show up in the table at the bottom. It isn't hard in jquery to make the the new child show up after the last tr with the class of treegrid-parent-1, but if that last child has children as well, the new treegrid-1 child shows up in the table before the children of the last child. In general I'm just having trouble adding children and having them show up in the correct order. Any help would be awesome!
Node 1Additional info Node 1-1Additional info Node 2Additional info Node 2-1Additional infoFirst, GOOD job!
pardon me for my poor english!
Extend or collapse raise ERROR:"...null" on browser console when I put the grid(table) in a table.
my way to fix:
at line 54: change "$(
at line 541: change "return
VERSION: 0.1.8.
thinks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.