mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Add jquery-treegrid plugin
This commit is contained in:
Oliver Walters
parent
37baec2db6
commit
4cd54203a2
3
InvenTree/InvenTree/static/treegrid/.gitignore
vendored
Normal file
3
InvenTree/InvenTree/static/treegrid/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
/nbproject
|
||||
/node_modules
|
||||
/bower_modules
|
||||
43
InvenTree/InvenTree/static/treegrid/CHANGELOG.txt
Normal file
43
InvenTree/InvenTree/static/treegrid/CHANGELOG.txt
Normal file
@ -0,0 +1,43 @@
|
||||
== 0.3.0 - 03 February 2015
|
||||
* Perfomance optimization
|
||||
* Bootstrap 3 update
|
||||
* Add minifiyed js
|
||||
* Add npm installation
|
||||
* Add borew installation
|
||||
|
||||
== 0.2.1 - 21 January 2014
|
||||
* Add events support
|
||||
|
||||
== 0.1.9 - 18 December 2013
|
||||
* Fix table in table bug (thanks liuspcn)
|
||||
|
||||
== 0.1.8 - 16 December 2013
|
||||
* Fix support alphanumeric id (you can use "-" symbol in id)
|
||||
|
||||
== 0.1.7 - 15 November 2013
|
||||
* Fix isLast method. https://github.com/maxazan/jquery-treegrid/issues/4
|
||||
* Add isFirst method
|
||||
|
||||
== 0.1.6 - 14 November 2013
|
||||
* Add isNode method
|
||||
* Add getAllNodes method
|
||||
* Fix isLast method. Throw error if method is not node of tree.
|
||||
|
||||
== 0.1.5
|
||||
* Add support alphanumeric id
|
||||
|
||||
== 0.1.4
|
||||
* Add treeRow parameter
|
||||
|
||||
== 0.1.3 - 28 August 2013
|
||||
* Added bootstrap examples
|
||||
* Changed expander functionality
|
||||
* Fixed $.data set and get
|
||||
* Fixed $.extends settings
|
||||
* Adding new test
|
||||
|
||||
== 0.1.2 - 26 August 2013
|
||||
* Added save state
|
||||
|
||||
== 0.1.0 - 15 August 2013
|
||||
* Public release
|
||||
23
InvenTree/InvenTree/static/treegrid/Gruntfile.js
Normal file
23
InvenTree/InvenTree/static/treegrid/Gruntfile.js
Normal file
@ -0,0 +1,23 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! <%= pkg.name %> <%= pkg.version %> */\n'
|
||||
},
|
||||
build: {
|
||||
src: 'js/jquery.treegrid.js',
|
||||
dest: 'js/jquery.treegrid.min.js'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Load the plugin that provides the "uglify" task.
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
|
||||
// Default task(s).
|
||||
grunt.registerTask('default', ['uglify']);
|
||||
|
||||
};
|
||||
20
InvenTree/InvenTree/static/treegrid/LICENSE
Normal file
20
InvenTree/InvenTree/static/treegrid/LICENSE
Normal file
@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
21
InvenTree/InvenTree/static/treegrid/README.md
Normal file
21
InvenTree/InvenTree/static/treegrid/README.md
Normal file
@ -0,0 +1,21 @@
|
||||
TreeGrid plugin for jQuery
|
||||
==========
|
||||
|
||||
See more information at http://maxazan.github.io/jquery-treegrid
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
### Using npm
|
||||
```
|
||||
npm install jquery-treegrid
|
||||
```
|
||||
|
||||
### Using bower
|
||||
```
|
||||
bower install jquery-treegrid
|
||||
```
|
||||
|
||||
### From source
|
||||
|
||||
Download [source](https://github.com/maxazan/jquery-treegrid/archive/master.zip) from github.com
|
||||
33
InvenTree/InvenTree/static/treegrid/bower.json
Normal file
33
InvenTree/InvenTree/static/treegrid/bower.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "jquery-treegrid",
|
||||
"description": "TreeGrid plugin for jQuery.",
|
||||
"version": "0.3.0",
|
||||
"homepage": "http://maxazan.github.io/jquery-treegrid",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"examples",
|
||||
"tests",
|
||||
"**/.*",
|
||||
"composer.json",
|
||||
"index.html",
|
||||
"params.json",
|
||||
"style.css",
|
||||
"test.html",
|
||||
"treegrid.jquery.json"
|
||||
],
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"javascript",
|
||||
"plugin",
|
||||
"bootstrap",
|
||||
"treegrid",
|
||||
"treeview"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">= 1.9.1",
|
||||
"jquery.cookie": ">= 1.4.1"
|
||||
},
|
||||
"authors": [
|
||||
"Maksym Pomazan"
|
||||
]
|
||||
}
|
||||
12
InvenTree/InvenTree/static/treegrid/composer.json
Normal file
12
InvenTree/InvenTree/static/treegrid/composer.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "maxazan/jquery-treegrid",
|
||||
"description": "jquery treegrid plugin",
|
||||
"keywords": ["jquery", "grid", "treegrid", "tree"],
|
||||
"homepage": "http://maxazan.github.io/jquery-treegrid",
|
||||
"type": "library",
|
||||
"license": "MIT",
|
||||
"support": {
|
||||
"issues": "https://github.com/maxazan/jquery-treegrid/issues",
|
||||
"source": "https://github.com/maxazan/jquery-treegrid"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
.treegrid-indent {width:16px; height: 16px; display: inline-block; position: relative;}
|
||||
|
||||
.treegrid-expander {width:16px; height: 16px; display: inline-block; position: relative; cursor: pointer;}
|
||||
|
||||
.treegrid-expander-expanded{background-image: url(../img/collapse.png); }
|
||||
.treegrid-expander-collapsed{background-image: url(../img/expand.png);}
|
||||
1109
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/css/bootstrap-responsive.css
vendored
Normal file
1109
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/css/bootstrap-responsive.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
6167
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/css/bootstrap.css
vendored
Normal file
6167
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/css/bootstrap.min.css
vendored
Normal file
9
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
2280
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/js/bootstrap.js
vendored
Normal file
2280
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/js/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
6
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/js/bootstrap.min.js
vendored
Normal file
6
InvenTree/InvenTree/static/treegrid/examples/bootstrap-2.3.2/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
131
InvenTree/InvenTree/static/treegrid/examples/example-basic.html
Normal file
131
InvenTree/InvenTree/static/treegrid/examples/example-basic.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Basic example</h1>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre>
|
||||
<code class='html'>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>TreeGrid for Bootstrap 2.3.x</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap2.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
$('.tree2').treegrid({
|
||||
expanderExpandedClass: 'icon-minus-sign',
|
||||
expanderCollapsedClass: 'icon-plus-sign'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Bootstrap 2.3.2 examples</h1>
|
||||
|
||||
<table class="table tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Source</h3>
|
||||
|
||||
<pre><code class="html"><link href="bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap2.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script></code></pre>
|
||||
<h2>Bootstrap grid example<br>
|
||||
table-bordered table-striped table-condensed<br>
|
||||
with custom expander</h2>
|
||||
<table class="table tree2 table-bordered table-striped table-condensed">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Source</h3>
|
||||
|
||||
<pre><code class="html"><link href="bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap2.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
expanderExpandedClass: 'icon-minus-sign',
|
||||
expanderCollapsedClass: 'icon-plus-sign'
|
||||
});
|
||||
});
|
||||
</script></code></pre>
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>TreeGrid for Bootstrap 3.0.x</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
$('.tree-2').treegrid({
|
||||
expanderExpandedClass: 'glyphicon glyphicon-minus',
|
||||
expanderCollapsedClass: 'glyphicon glyphicon-plus'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Bootstrap 3 examples</h1>
|
||||
|
||||
<table class="table tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Code</h3>
|
||||
|
||||
<pre><code class="html"><link href="bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script></code></pre>
|
||||
<h2>Bootstrap TreeGrid example<br>
|
||||
table-bordered table-striped table-condensed<br>
|
||||
custom expander</h2>
|
||||
<table class="table tree-2 table-bordered table-striped table-condensed">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Code</h3>
|
||||
<pre><code class="html"><link href="bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
expanderExpandedClass: 'glyphicon glyphicon-minus',
|
||||
expanderCollapsedClass: 'glyphicon glyphicon-plus'
|
||||
});
|
||||
});
|
||||
</script></code></pre>
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>TreeGrid for Bootstrap 3.0.x</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
$('.tree-2').treegrid({
|
||||
expanderExpandedClass: 'glyphicon glyphicon-minus',
|
||||
expanderCollapsedClass: 'glyphicon glyphicon-plus'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Bootstrap 3 resize examples</h1>
|
||||
|
||||
<table class="table tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Code</h3>
|
||||
|
||||
<pre><code class="html"><link href="bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script></code></pre>
|
||||
<h2>Bootstrap TreeGrid example<br>
|
||||
table-bordered table-striped table-condensed<br>
|
||||
custom expander</h2>
|
||||
<table class="table tree-2 table-bordered table-striped table-condensed">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Code</h3>
|
||||
<pre><code class="html"><link href="bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
expanderExpandedClass: 'glyphicon glyphicon-minus',
|
||||
expanderCollapsedClass: 'glyphicon glyphicon-plus'
|
||||
});
|
||||
});
|
||||
</script></code></pre>
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
</body>
|
||||
</html>
|
||||
135
InvenTree/InvenTree/static/treegrid/examples/example-column.html
Normal file
135
InvenTree/InvenTree/static/treegrid/examples/example-column.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>TreeGrid example with tree in 2nd column</title>
|
||||
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
treeColumn: 1
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> example with tree in 2nd column</h1>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre>
|
||||
<code class='html'>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
treeColumn: 1
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
155
InvenTree/InvenTree/static/treegrid/examples/example-events.html
Normal file
155
InvenTree/InvenTree/static/treegrid/examples/example-events.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>TreeGrid events example</title>
|
||||
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
onChange: function() {
|
||||
alert("Changed: " + $(this).attr("id"));
|
||||
},
|
||||
onCollapse: function() {
|
||||
alert("Collapsed " + $(this).attr("id"));
|
||||
},
|
||||
onExpand: function() {
|
||||
alert("Expanded: " + $(this).attr("id"));
|
||||
}});
|
||||
$('#node-1').on("change", function() {
|
||||
alert("Event from " + $(this).attr("id"));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> events example</h1>
|
||||
|
||||
<table class="tree">
|
||||
<tr id="node-1" class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr id="node-1-1" class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr id="node-1-2" class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr id="node-1-2-1" class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre>
|
||||
<code class='html'>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
onChange: function() {
|
||||
alert("Changed: "+$(this).attr("id"));
|
||||
},
|
||||
onCollapse: function() {
|
||||
alert("Collapsed: "+$(this).attr("id"));
|
||||
},
|
||||
onExpand: function() {
|
||||
alert("Expanded "+$(this).attr("id"));
|
||||
}});
|
||||
$('#node-1').on("change", function() {
|
||||
alert("Event from " + $(this).attr("id"));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
113
InvenTree/InvenTree/static/treegrid/examples/example-huge.html
Normal file
113
InvenTree/InvenTree/static/treegrid/examples/example-huge.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
//create huge treetable
|
||||
var count_root_elements=100;
|
||||
var count_deep=10;
|
||||
console.log('init');
|
||||
for(var i=0; i<count_root_elements; i++){
|
||||
console.log('add');
|
||||
var tr=$("<tr></tr>").addClass("treegrid-"+i+"-0").appendTo($('.tree')).html("<td>Root node "+i+"</td><td>Additional info</td>");
|
||||
|
||||
for(var j=1; j<count_deep; j++){
|
||||
$("<tr></tr>").addClass("treegrid-"+i+"-"+j).addClass("treegrid-parent-"+i+"-"+(j-1)).appendTo($('.tree')).html("<td>Child node "+i+"-"+j+"</td><td>Additional info</td>");
|
||||
}
|
||||
}
|
||||
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Big data example</h1>
|
||||
|
||||
<table class="tree"></table>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre>
|
||||
<code class='html'>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,162 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid save state example</title>
|
||||
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
'initialState': 'collapsed',
|
||||
'saveState': true,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> save state example</h1>
|
||||
<p>You can reload page. The tree state is saved.</p>
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre>
|
||||
<code class='html'>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Jquery-treegrid basic example</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/jquery.treegrid.css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tree').treegrid({
|
||||
'initialState': 'collapsed',
|
||||
'saveState': true,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node 1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-5">
|
||||
<td>Root node 2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-6 treegrid-parent-5">
|
||||
<td>Node 2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-7 treegrid-parent-5">
|
||||
<td>Node 2-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-8 treegrid-parent-7">
|
||||
<td>Node 2-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
InvenTree/InvenTree/static/treegrid/img/collapse.png
Normal file
BIN
InvenTree/InvenTree/static/treegrid/img/collapse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
InvenTree/InvenTree/static/treegrid/img/expand.png
Normal file
BIN
InvenTree/InvenTree/static/treegrid/img/expand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
InvenTree/InvenTree/static/treegrid/img/file.png
Normal file
BIN
InvenTree/InvenTree/static/treegrid/img/file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 B |
BIN
InvenTree/InvenTree/static/treegrid/img/folder.png
Normal file
BIN
InvenTree/InvenTree/static/treegrid/img/folder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 537 B |
478
InvenTree/InvenTree/static/treegrid/index.html
Normal file
478
InvenTree/InvenTree/static/treegrid/index.html
Normal file
@ -0,0 +1,478 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="google-site-verification" content="Qsvvve1CBtl2_PikToO7CdVGsY7bwLrjc_9AgZtt_bk" />
|
||||
<title>Treegrid jquery plugin</title>
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
|
||||
<link rel="stylesheet" href="css/jquery.treegrid.css">
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-43342702-1', 'maxazan.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
<ul class="download" style="float:right;">
|
||||
<li><a href="https://github.com/maxazan/jquery-treegrid/zipball/master">Download <br><strong>ZIP File</strong></a></li>
|
||||
<li><a href="https://github.com/maxazan/jquery-treegrid/tarball/master">Download <br><strong>TAR Ball</strong></a></li>
|
||||
<li><a href="https://github.com/maxazan/jquery-treegrid">View On <br><strong>GitHub</strong></a></li>
|
||||
</ul>
|
||||
|
||||
<h1>TreeGrid jQuery plugin</h1>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Create TreeGrid from HTML table</li>
|
||||
<li>Simple and flexible javascript</li>
|
||||
<li>Compatible with bootstrap</li>
|
||||
<li>Ability to save the state of the tree</li>
|
||||
<li>Events support</li>
|
||||
|
||||
</ul>
|
||||
<h2>Usage</h2>
|
||||
<p>Step 1. Initialize plugin</p>
|
||||
<pre><code>
|
||||
<script type="text/javascript" src="js/jquery.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.treegrid.js"></script>
|
||||
<link rel="stylesheet" href="css/jquery.treegrid.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
$('.tree').treegrid();
|
||||
</script></code></pre>
|
||||
<p>Step 2. Make table</p>
|
||||
<pre><code class="html">
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</code></pre>
|
||||
<p>Step 3. See result</p>
|
||||
|
||||
<table class="tree">
|
||||
<tr class="treegrid-1">
|
||||
<td>Root node</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1">
|
||||
<td>Node 1-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-3 treegrid-parent-1">
|
||||
<td>Node 1-2</td><td>Additional info</td>
|
||||
</tr>
|
||||
<tr class="treegrid-4 treegrid-parent-3">
|
||||
<td>Node 1-2-1</td><td>Additional info</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Other examples</h2>
|
||||
<p><a href="examples/example-basic.html" target="_blank">Basic example</a></p>
|
||||
<p><a href="examples/example-column.html" target="_blank">Tree on 2nd column example</a></p>
|
||||
<p><a href="examples/example-save-state.html" target="_blank">Save state example</a></p>
|
||||
<p><a href="examples/example-bootstrap-2.html" target="_blank">TreeGrid for bootstrap 2.x</a></p>
|
||||
<p><a href="examples/example-bootstrap-3.html" target="_blank">TreeGrid for bootstrap 3.x</a></p>
|
||||
<p><a href="examples/example-bootstrap-resize.html" target="_blank">TreeGrid for bootstrap 3.x resize demo</a></p>
|
||||
<p><a href="examples/example-events.html" target="_blank">Events examples</a></p>
|
||||
<p><a href="examples/example-huge.html" target="_blank">Big data example</a></p>
|
||||
|
||||
|
||||
<h2>Configuration Settings</h2>
|
||||
<h3>Settings</h3>
|
||||
<table>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Default value</th><th>Description</th></tr>
|
||||
<tr>
|
||||
<td>treeColumn</td>
|
||||
<td>Numeric</td>
|
||||
<td>0</td>
|
||||
<td>Number of column using for tree</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>initialState</td>
|
||||
<td>String</td>
|
||||
<td>expanded</td>
|
||||
<td>Initial state of tree<br>
|
||||
'expanded' - all nodes will be expanded<br>
|
||||
'collapsed' - all nodes will be collapsed<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>saveState</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>If true you can reload page and tree state was saved</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>saveStateMethod</td>
|
||||
<td>String</td>
|
||||
<td>cookie</td>
|
||||
<td>
|
||||
'cookie' - save state to cookie<br>
|
||||
'hash' - save state to hash<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>saveStateName</td>
|
||||
<td>String</td>
|
||||
<td>tree-grid-state</td>
|
||||
<td>
|
||||
Name of cookie or hash to save state.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>expanderTemplate</td>
|
||||
<td>String</td>
|
||||
<td><span class="treegrid-expander"></span></td>
|
||||
<td>HTML Element when you click on that will be collapse/expand branches</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expanderExpandedClass</td>
|
||||
<td>String</td>
|
||||
<td>treegrid-expander-expanded</td>
|
||||
<td>Class using for expander element when it expanded</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expanderCollapsedClass</td>
|
||||
<td>String</td>
|
||||
<td>treegrid-expander-collapsed</td>
|
||||
<td>Class using for expander element when it collapsed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>indentTemplate</td>
|
||||
<td>String</td>
|
||||
<td><span class="treegrid-indent"></span></td>
|
||||
<td>HTML Element that will be placed as padding, depending on the depth of nesting node</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>onCollapse</td>
|
||||
<td>Function</td>
|
||||
<td>null</td>
|
||||
<td>Function, which will be executed when one of node will be collapsed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onExpand</td>
|
||||
<td>Function</td>
|
||||
<td>null</td>
|
||||
<td>Function, which will be executed when one of node will be expanded</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>Function</td>
|
||||
<td>null</td>
|
||||
<td>Function, which will be executed when one of node will be expanded or collapsed</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Public methods</h3>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Method name</th>
|
||||
<th>Description</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getRootNodes</td>
|
||||
<td>Returns the root branches</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// Expand all root nodes
|
||||
$('.tree').treegrid('getRootNodes').treegrid('expand');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getNodeId</td>
|
||||
<td>Return the id of node</td>
|
||||
<td>
|
||||
<pre><code class="javascript">if($('#node-2').treegrid('getNodeId')===2){
|
||||
// Do something with node 2
|
||||
};</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getParentNodeId</td>
|
||||
<td>Return the id of parent node or null if node is root</td>
|
||||
<td>
|
||||
<pre><code class="javascript">if($('#node-2').treegrid('getParentNodeId')===2){
|
||||
// Do something if parent node Id is 2
|
||||
};</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getAllNodes</td>
|
||||
<td>Return the all nodes of tree</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// Find all nodes
|
||||
$('#tree-1').treegrid('getAllNodes').each(function() {
|
||||
if ($(this).treegrid("isLast")) {
|
||||
//Do something with all last nodes
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getParentNode</td>
|
||||
<td>Return the parent node or null if node is root</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// Expand parent node
|
||||
$('#node-2').treegrid('getParentNode').treegrid('collapse');
|
||||
</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getChildNodes</td>
|
||||
<td>Return the child nodes or null if node is leaf</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// Expand child nodes
|
||||
$('#node-2').treegrid('getChildNodes').treegrid('expand');
|
||||
</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getDepth</td>
|
||||
<td>Returns the depth of nested branch</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// Expand all nodes 2nd nesting
|
||||
$('.tree').find('tr').each(function(){
|
||||
if ($(this).treegrid('getDepth')<2){
|
||||
$(this).treegrid('expand');
|
||||
}
|
||||
});</code></pre>
|
||||
</td>
|
||||
<tr>
|
||||
<td>isNode</td>
|
||||
<td>return true if element is node</td>
|
||||
<td>
|
||||
<pre><code class="javascript">
|
||||
$('#tree-1').find('tr').each(function() {
|
||||
if ($(this).treegrid("isNode")) {
|
||||
//Do something
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isLeaf</td>
|
||||
<td>Is there a node leaf</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// hide all files
|
||||
$('.tree').find('tr').each(function(){
|
||||
if ($(this).treegrid('isLeaf')){
|
||||
$(this).hide();
|
||||
}
|
||||
});</code></pre>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isLast</td>
|
||||
<td>Return true if node is last in branch</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// hide all last elements
|
||||
$('.tree').find('tr').each(function(){
|
||||
if ($(this).treegrid('isLast')){
|
||||
$(this).hide();
|
||||
}
|
||||
});</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isFirst</td>
|
||||
<td>Return true if node is first in branch</td>
|
||||
<td>
|
||||
<pre><code class="javascript">// hide all last elements
|
||||
$('.tree').find('tr').each(function(){
|
||||
if ($(this).treegrid('isFirst')){
|
||||
$(this).hide();
|
||||
}
|
||||
});</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isExpanded</td>
|
||||
<td>Is node expanded</td>
|
||||
<td>
|
||||
<pre><code class="javascript">if($('#node-2').treegrid('isExpanded')){
|
||||
// Do something if node expanded
|
||||
};</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isCollapsed</td>
|
||||
<td>Is node collapsed</td>
|
||||
<td>
|
||||
<pre><code class="javascript">if($('#node-2').treegrid('isCollapsed')){
|
||||
// Do something if node collapsed
|
||||
};</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isOneOfParentsCollapsed</td>
|
||||
<td>Is at least one of the parent nodes is collapsed</td>
|
||||
<td>
|
||||
<pre><code class="javascript">if($('#node-2').treegrid('isOneOfParentCollapsed')){
|
||||
// Do something if one of parent collapsed
|
||||
};</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expand</td>
|
||||
<td>Expand node</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#node-2').treegrid('expand');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>collapse</td>
|
||||
<td>Collapse node</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#node-2').treegrid('collapse');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandRecursive</td>
|
||||
<td>Expand nodes recursively</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#node-2').treegrid('expandRecursive');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>collapseRecursive</td>
|
||||
<td>Collapse nodes recursively</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#node-2').treegrid('collapseRecursive');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandAll</td>
|
||||
<td>Expand all nodes</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#tree').treegrid('expandAll');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>collapseAll</td>
|
||||
<td>Collapse all nodes</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#tree').treegrid('collapseAll');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>Collapse node if it expanded and expand when collapsed</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#node-2').treegrid('toggle');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>render</td>
|
||||
<td>Redraw the node and all its children</td>
|
||||
<td>
|
||||
<pre><code class="javascript">$('#node-2').treegrid('render');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
<h3>Events</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Event name</th>
|
||||
<th>Description</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>collapse</td>
|
||||
<td>Will fire when node collapsed</td>
|
||||
<td>
|
||||
<pre><code class="javascript">//Alert when node in treegrid with class "tree" collapsed
|
||||
$('.tree').treegrid('getRootNodes').on('collapse', function(){
|
||||
alert(this);
|
||||
});</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expand</td>
|
||||
<td>Will fire when node expanded</td>
|
||||
<td>
|
||||
<pre><code class="javascript">//Alert when node with id "node1" expanded
|
||||
$('#node1').on('expand', function(){
|
||||
alert(this);
|
||||
});</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td>Will fire when node changed. Expanded or collapsed</td>
|
||||
<td>
|
||||
<pre><code class="javascript">//Alert when node in treegrid with class "tree" changed.
|
||||
$('.tree').treegrid('getRootNodes').on('change', function(){
|
||||
alert(this);
|
||||
});</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2><a href="test.html">Unit Tests</a></h2>
|
||||
|
||||
</div>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.treegrid.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$('.tree').treegrid();
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var metas = document.getElementsByTagName('meta');
|
||||
var i;
|
||||
if (navigator.userAgent.match(/iPhone/i)) {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
}
|
||||
}
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
function gestureStart() {
|
||||
for (i = 0; i < metas.length; i++) {
|
||||
if (metas[i].name == "viewport") {
|
||||
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
|
||||
}
|
||||
}
|
||||
}</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
96
InvenTree/InvenTree/static/treegrid/js/jquery.cookie.js
Normal file
96
InvenTree/InvenTree/static/treegrid/js/jquery.cookie.js
Normal file
@ -0,0 +1,96 @@
|
||||
/*!
|
||||
* jQuery Cookie Plugin v1.3.1
|
||||
* https://github.com/carhartl/jquery-cookie
|
||||
*
|
||||
* Copyright 2013 Klaus Hartl
|
||||
* Released under the MIT license
|
||||
*/
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else {
|
||||
// Browser globals.
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
var pluses = /\+/g;
|
||||
|
||||
function decode(s) {
|
||||
if (config.raw) {
|
||||
return s;
|
||||
}
|
||||
return decodeURIComponent(s.replace(pluses, ' '));
|
||||
}
|
||||
|
||||
function decodeAndParse(s) {
|
||||
if (s.indexOf('"') === 0) {
|
||||
// This is a quoted cookie as according to RFC2068, unescape...
|
||||
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
|
||||
}
|
||||
|
||||
s = decode(s);
|
||||
|
||||
try {
|
||||
return config.json ? JSON.parse(s) : s;
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
var config = $.cookie = function (key, value, options) {
|
||||
|
||||
// Write
|
||||
if (value !== undefined) {
|
||||
options = $.extend({}, config.defaults, options);
|
||||
|
||||
if (typeof options.expires === 'number') {
|
||||
var days = options.expires, t = options.expires = new Date();
|
||||
t.setDate(t.getDate() + days);
|
||||
}
|
||||
|
||||
value = config.json ? JSON.stringify(value) : String(value);
|
||||
|
||||
return (document.cookie = [
|
||||
config.raw ? key : encodeURIComponent(key),
|
||||
'=',
|
||||
config.raw ? value : encodeURIComponent(value),
|
||||
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
|
||||
options.path ? '; path=' + options.path : '',
|
||||
options.domain ? '; domain=' + options.domain : '',
|
||||
options.secure ? '; secure' : ''
|
||||
].join(''));
|
||||
}
|
||||
|
||||
// Read
|
||||
var cookies = document.cookie.split('; ');
|
||||
var result = key ? undefined : {};
|
||||
for (var i = 0, l = cookies.length; i < l; i++) {
|
||||
var parts = cookies[i].split('=');
|
||||
var name = decode(parts.shift());
|
||||
var cookie = parts.join('=');
|
||||
|
||||
if (key && key === name) {
|
||||
result = decodeAndParse(cookie);
|
||||
break;
|
||||
}
|
||||
|
||||
if (!key) {
|
||||
result[name] = decodeAndParse(cookie);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
config.defaults = {};
|
||||
|
||||
$.removeCookie = function (key, options) {
|
||||
if ($.cookie(key) !== undefined) {
|
||||
// Must not alter options, thus extending a fresh object...
|
||||
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
}));
|
||||
@ -0,0 +1,5 @@
|
||||
$.extend($.fn.treegrid.defaults, {
|
||||
expanderTemplate: '<i class="treegrid-expander"></i>',
|
||||
expanderExpandedClass: 'icon-chevron-down',
|
||||
expanderCollapsedClass: 'icon-chevron-right'
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
$.extend($.fn.treegrid.defaults, {
|
||||
expanderExpandedClass: 'glyphicon glyphicon-chevron-down',
|
||||
expanderCollapsedClass: 'glyphicon glyphicon-chevron-right'
|
||||
});
|
||||
626
InvenTree/InvenTree/static/treegrid/js/jquery.treegrid.js
Normal file
626
InvenTree/InvenTree/static/treegrid/js/jquery.treegrid.js
Normal file
@ -0,0 +1,626 @@
|
||||
/*
|
||||
* jQuery treegrid Plugin 0.3.0
|
||||
* https://github.com/maxazan/jquery-treegrid
|
||||
*
|
||||
* Copyright 2013, Pomazan Max
|
||||
* Licensed under the MIT licenses.
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
var methods = {
|
||||
/**
|
||||
* Initialize tree
|
||||
*
|
||||
* @param {Object} options
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
initTree: function(options) {
|
||||
var settings = $.extend({}, this.treegrid.defaults, options);
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('setTreeContainer', $(this));
|
||||
$this.treegrid('setSettings', settings);
|
||||
settings.getRootNodes.apply(this, [$(this)]).treegrid('initNode', settings);
|
||||
$this.treegrid('getRootNodes').treegrid('render');
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Initialize node
|
||||
*
|
||||
* @param {Object} settings
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
initNode: function(settings) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('setTreeContainer', settings.getTreeGridContainer.apply(this));
|
||||
$this.treegrid('getChildNodes').treegrid('initNode', settings);
|
||||
$this.treegrid('initExpander').treegrid('initIndent').treegrid('initEvents').treegrid('initState').treegrid('initChangeEvent').treegrid("initSettingsEvents");
|
||||
});
|
||||
},
|
||||
initChangeEvent: function() {
|
||||
var $this = $(this);
|
||||
//Save state on change
|
||||
$this.on("change", function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('render');
|
||||
if ($this.treegrid('getSetting', 'saveState')) {
|
||||
$this.treegrid('saveState');
|
||||
}
|
||||
});
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize node events
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initEvents: function() {
|
||||
var $this = $(this);
|
||||
//Default behavior on collapse
|
||||
$this.on("collapse", function() {
|
||||
var $this = $(this);
|
||||
$this.removeClass('treegrid-expanded');
|
||||
$this.addClass('treegrid-collapsed');
|
||||
});
|
||||
//Default behavior on expand
|
||||
$this.on("expand", function() {
|
||||
var $this = $(this);
|
||||
$this.removeClass('treegrid-collapsed');
|
||||
$this.addClass('treegrid-expanded');
|
||||
});
|
||||
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize events from settings
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initSettingsEvents: function() {
|
||||
var $this = $(this);
|
||||
//Save state on change
|
||||
$this.on("change", function() {
|
||||
var $this = $(this);
|
||||
if (typeof($this.treegrid('getSetting', 'onChange')) === "function") {
|
||||
$this.treegrid('getSetting', 'onChange').apply($this);
|
||||
}
|
||||
});
|
||||
//Default behavior on collapse
|
||||
$this.on("collapse", function() {
|
||||
var $this = $(this);
|
||||
if (typeof($this.treegrid('getSetting', 'onCollapse')) === "function") {
|
||||
$this.treegrid('getSetting', 'onCollapse').apply($this);
|
||||
}
|
||||
});
|
||||
//Default behavior on expand
|
||||
$this.on("expand", function() {
|
||||
var $this = $(this);
|
||||
if (typeof($this.treegrid('getSetting', 'onExpand')) === "function") {
|
||||
$this.treegrid('getSetting', 'onExpand').apply($this);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize expander for node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initExpander: function() {
|
||||
var $this = $(this);
|
||||
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');
|
||||
});
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize indent for node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initIndent: function() {
|
||||
var $this = $(this);
|
||||
$this.find('.treegrid-indent').remove();
|
||||
var tpl = $this.treegrid('getSetting', 'indentTemplate');
|
||||
var expander = $this.find('.treegrid-expander');
|
||||
var depth = $this.treegrid('getDepth');
|
||||
for (var i = 0; i < depth; i++) {
|
||||
$(tpl).insertBefore(expander);
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialise state of node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initState: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('getSetting', 'saveState') && !$this.treegrid('isFirstInit')) {
|
||||
$this.treegrid('restoreState');
|
||||
} else {
|
||||
if ($this.treegrid('getSetting', 'initialState') === "expanded") {
|
||||
$this.treegrid('expand');
|
||||
} else {
|
||||
$this.treegrid('collapse');
|
||||
}
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Return true if this tree was never been initialised
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isFirstInit: function() {
|
||||
var tree = $(this).treegrid('getTreeContainer');
|
||||
if (tree.data('first_init') === undefined) {
|
||||
tree.data('first_init', $.cookie(tree.treegrid('getSetting', 'saveStateName')) === undefined);
|
||||
}
|
||||
return tree.data('first_init');
|
||||
},
|
||||
/**
|
||||
* Save state of current node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
saveState: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') {
|
||||
|
||||
var stateArrayString = $.cookie($this.treegrid('getSetting', 'saveStateName')) || '';
|
||||
var stateArray = (stateArrayString === '' ? [] : stateArrayString.split(','));
|
||||
var nodeId = $this.treegrid('getNodeId');
|
||||
|
||||
if ($this.treegrid('isExpanded')) {
|
||||
if ($.inArray(nodeId, stateArray) === -1) {
|
||||
stateArray.push(nodeId);
|
||||
}
|
||||
} else if ($this.treegrid('isCollapsed')) {
|
||||
if ($.inArray(nodeId, stateArray) !== -1) {
|
||||
stateArray.splice($.inArray(nodeId, stateArray), 1);
|
||||
}
|
||||
}
|
||||
$.cookie($this.treegrid('getSetting', 'saveStateName'), stateArray.join(','));
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Restore state of current node.
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
restoreState: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') {
|
||||
var stateArray = $.cookie($this.treegrid('getSetting', 'saveStateName')).split(',');
|
||||
if ($.inArray($this.treegrid('getNodeId'), stateArray) !== -1) {
|
||||
$this.treegrid('expand');
|
||||
} else {
|
||||
$this.treegrid('collapse');
|
||||
}
|
||||
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Method return setting by name
|
||||
*
|
||||
* @param {type} name
|
||||
* @returns {unresolved}
|
||||
*/
|
||||
getSetting: function(name) {
|
||||
if (!$(this).treegrid('getTreeContainer')) {
|
||||
return null;
|
||||
}
|
||||
return $(this).treegrid('getTreeContainer').data('settings')[name];
|
||||
},
|
||||
/**
|
||||
* Add new settings
|
||||
*
|
||||
* @param {Object} settings
|
||||
*/
|
||||
setSettings: function(settings) {
|
||||
$(this).treegrid('getTreeContainer').data('settings', settings);
|
||||
},
|
||||
/**
|
||||
* Return tree container
|
||||
*
|
||||
* @returns {HtmlElement}
|
||||
*/
|
||||
getTreeContainer: function() {
|
||||
return $(this).data('treegrid');
|
||||
},
|
||||
/**
|
||||
* Set tree container
|
||||
*
|
||||
* @param {HtmlE;ement} container
|
||||
*/
|
||||
setTreeContainer: function(container) {
|
||||
return $(this).data('treegrid', container);
|
||||
},
|
||||
/**
|
||||
* Method return all root nodes of tree.
|
||||
*
|
||||
* Start init all child nodes from it.
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
getRootNodes: function() {
|
||||
return $(this).treegrid('getSetting', 'getRootNodes').apply(this, [$(this).treegrid('getTreeContainer')]);
|
||||
},
|
||||
/**
|
||||
* Method return all nodes of tree.
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
getAllNodes: function() {
|
||||
return $(this).treegrid('getSetting', 'getAllNodes').apply(this, [$(this).treegrid('getTreeContainer')]);
|
||||
},
|
||||
/**
|
||||
* Mthod return true if element is Node
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
isNode: function() {
|
||||
return $(this).treegrid('getNodeId') !== null;
|
||||
},
|
||||
/**
|
||||
* Mthod return id of node
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
getNodeId: function() {
|
||||
if ($(this).treegrid('getSetting', 'getNodeId') === null) {
|
||||
return null;
|
||||
} else {
|
||||
return $(this).treegrid('getSetting', 'getNodeId').apply(this);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Method return parent id of node or null if root node
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
getParentNodeId: function() {
|
||||
return $(this).treegrid('getSetting', 'getParentNodeId').apply(this);
|
||||
},
|
||||
/**
|
||||
* Method return parent node or null if root node
|
||||
*
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
getParentNode: function() {
|
||||
if ($(this).treegrid('getParentNodeId') === null) {
|
||||
return null;
|
||||
} else {
|
||||
return $(this).treegrid('getSetting', 'getNodeById').apply(this, [$(this).treegrid('getParentNodeId'), $(this).treegrid('getTreeContainer')]);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Method return array of child nodes or null if node is leaf
|
||||
*
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
getChildNodes: function() {
|
||||
return $(this).treegrid('getSetting', 'getChildNodes').apply(this, [$(this).treegrid('getNodeId'), $(this).treegrid('getTreeContainer')]);
|
||||
},
|
||||
/**
|
||||
* Method return depth of tree.
|
||||
*
|
||||
* This method is needs for calculate indent
|
||||
*
|
||||
* @returns {Number}
|
||||
*/
|
||||
getDepth: function() {
|
||||
if ($(this).treegrid('getParentNode') === null) {
|
||||
return 0;
|
||||
}
|
||||
return $(this).treegrid('getParentNode').treegrid('getDepth') + 1;
|
||||
},
|
||||
/**
|
||||
* Method return true if node is root
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isRoot: function() {
|
||||
return $(this).treegrid('getDepth') === 0;
|
||||
},
|
||||
/**
|
||||
* Method return true if node has no child nodes
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isLeaf: function() {
|
||||
return $(this).treegrid('getChildNodes').length === 0;
|
||||
},
|
||||
/**
|
||||
* Method return true if node last in branch
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isLast: function() {
|
||||
if ($(this).treegrid('isNode')) {
|
||||
var parentNode = $(this).treegrid('getParentNode');
|
||||
if (parentNode === null) {
|
||||
if ($(this).treegrid('getNodeId') === $(this).treegrid('getRootNodes').last().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if ($(this).treegrid('getNodeId') === parentNode.treegrid('getChildNodes').last().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Method return true if node first in branch
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isFirst: function() {
|
||||
if ($(this).treegrid('isNode')) {
|
||||
var parentNode = $(this).treegrid('getParentNode');
|
||||
if (parentNode === null) {
|
||||
if ($(this).treegrid('getNodeId') === $(this).treegrid('getRootNodes').first().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if ($(this).treegrid('getNodeId') === parentNode.treegrid('getChildNodes').first().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Return true if node expanded
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isExpanded: function() {
|
||||
return $(this).hasClass('treegrid-expanded');
|
||||
},
|
||||
/**
|
||||
* Return true if node collapsed
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isCollapsed: function() {
|
||||
return $(this).hasClass('treegrid-collapsed');
|
||||
},
|
||||
/**
|
||||
* Return true if at least one of parent node is collapsed
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isOneOfParentsCollapsed: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('isRoot')) {
|
||||
return false;
|
||||
} else {
|
||||
if ($this.treegrid('getParentNode').treegrid('isCollapsed')) {
|
||||
return true;
|
||||
} else {
|
||||
return $this.treegrid('getParentNode').treegrid('isOneOfParentsCollapsed');
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Expand node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
expand: function() {
|
||||
if (!this.treegrid('isLeaf') && !this.treegrid("isExpanded")) {
|
||||
this.trigger("expand");
|
||||
this.trigger("change");
|
||||
return this;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Expand all nodes
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
expandAll: function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('getRootNodes').treegrid('expandRecursive');
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Expand current node and all child nodes begin from current
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
expandRecursive: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('expand');
|
||||
if (!$this.treegrid('isLeaf')) {
|
||||
$this.treegrid('getChildNodes').treegrid('expandRecursive');
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Collapse node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
collapse: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
if (!$this.treegrid('isLeaf') && !$this.treegrid("isCollapsed")) {
|
||||
$this.trigger("collapse");
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Collapse all nodes
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
collapseAll: function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('getRootNodes').treegrid('collapseRecursive');
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Collapse current node and all child nodes begin from current
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
collapseRecursive: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('collapse');
|
||||
if (!$this.treegrid('isLeaf')) {
|
||||
$this.treegrid('getChildNodes').treegrid('collapseRecursive');
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Expand if collapsed, Collapse if expanded
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
toggle: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('isExpanded')) {
|
||||
$this.treegrid('collapse');
|
||||
} else {
|
||||
$this.treegrid('expand');
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Rendering node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
render: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
//if parent colapsed we hidden
|
||||
if ($this.treegrid('isOneOfParentsCollapsed')) {
|
||||
$this.hide();
|
||||
} else {
|
||||
$this.show();
|
||||
}
|
||||
if (!$this.treegrid('isLeaf')) {
|
||||
$this.treegrid('renderExpander');
|
||||
$this.treegrid('getChildNodes').treegrid('render');
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Rendering expander depends on node state
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
renderExpander: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
|
||||
if (expander) {
|
||||
|
||||
if (!$this.treegrid('isCollapsed')) {
|
||||
expander.removeClass($this.treegrid('getSetting', 'expanderCollapsedClass'));
|
||||
expander.addClass($this.treegrid('getSetting', 'expanderExpandedClass'));
|
||||
} else {
|
||||
expander.removeClass($this.treegrid('getSetting', 'expanderExpandedClass'));
|
||||
expander.addClass($this.treegrid('getSetting', 'expanderCollapsedClass'));
|
||||
}
|
||||
} else {
|
||||
$this.treegrid('initExpander');
|
||||
$this.treegrid('renderExpander');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
$.fn.treegrid = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
return methods.initTree.apply(this, arguments);
|
||||
} else {
|
||||
$.error('Method with name ' + method + ' does not exists for jQuery.treegrid');
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Plugin's default options
|
||||
*/
|
||||
$.fn.treegrid.defaults = {
|
||||
initialState: 'expanded',
|
||||
saveState: false,
|
||||
saveStateMethod: 'cookie',
|
||||
saveStateName: 'tree-grid-state',
|
||||
expanderTemplate: '<span class="treegrid-expander"></span>',
|
||||
indentTemplate: '<span class="treegrid-indent"></span>',
|
||||
expanderExpandedClass: 'treegrid-expander-expanded',
|
||||
expanderCollapsedClass: 'treegrid-expander-collapsed',
|
||||
treeColumn: 0,
|
||||
getExpander: function() {
|
||||
return $(this).find('.treegrid-expander');
|
||||
},
|
||||
getNodeId: function() {
|
||||
var template = /treegrid-([A-Za-z0-9_-]+)/;
|
||||
if (template.test($(this).attr('class'))) {
|
||||
return template.exec($(this).attr('class'))[1];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getParentNodeId: function() {
|
||||
var template = /treegrid-parent-([A-Za-z0-9_-]+)/;
|
||||
if (template.test($(this).attr('class'))) {
|
||||
return template.exec($(this).attr('class'))[1];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getNodeById: function(id, treegridContainer) {
|
||||
var templateClass = "treegrid-" + id;
|
||||
return treegridContainer.find('tr.' + templateClass);
|
||||
},
|
||||
getChildNodes: function(id, treegridContainer) {
|
||||
var templateClass = "treegrid-parent-" + id;
|
||||
return treegridContainer.find('tr.' + templateClass);
|
||||
},
|
||||
getTreeGridContainer: function() {
|
||||
return $(this).closest('table');
|
||||
},
|
||||
getRootNodes: function(treegridContainer) {
|
||||
var result = $.grep(treegridContainer.find('tr'), function(element) {
|
||||
var classNames = $(element).attr('class');
|
||||
var templateClass = /treegrid-([A-Za-z0-9_-]+)/;
|
||||
var templateParentClass = /treegrid-parent-([A-Za-z0-9_-]+)/;
|
||||
return templateClass.test(classNames) && !templateParentClass.test(classNames);
|
||||
});
|
||||
return $(result);
|
||||
},
|
||||
getAllNodes: function(treegridContainer) {
|
||||
var result = $.grep(treegridContainer.find('tr'), function(element) {
|
||||
var classNames = $(element).attr('class');
|
||||
var templateClass = /treegrid-([A-Za-z0-9_-]+)/;
|
||||
return templateClass.test(classNames);
|
||||
});
|
||||
return $(result);
|
||||
},
|
||||
//Events
|
||||
onCollapse: null,
|
||||
onExpand: null,
|
||||
onChange: null
|
||||
|
||||
};
|
||||
})(jQuery);
|
||||
2
InvenTree/InvenTree/static/treegrid/js/jquery.treegrid.min.js
vendored
Normal file
2
InvenTree/InvenTree/static/treegrid/js/jquery.treegrid.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
35
InvenTree/InvenTree/static/treegrid/package.json
Normal file
35
InvenTree/InvenTree/static/treegrid/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "jquery-treegrid",
|
||||
"version": "0.3.0",
|
||||
"description": "jQuery TreeGrid plugin",
|
||||
"main": "index.js",
|
||||
"directories": {
|
||||
"example": "examples",
|
||||
"test": "tests"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/maxazan/jquery-treegrid.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.5",
|
||||
"grunt-contrib-jshint": "~0.10.0",
|
||||
"grunt-contrib-nodeunit": "~0.4.1",
|
||||
"grunt-contrib-uglify": "~0.5.0"
|
||||
},
|
||||
"keywords": [
|
||||
"treegrid",
|
||||
"table",
|
||||
"grid",
|
||||
"ui"
|
||||
],
|
||||
"author": "Maksym Pomazan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/maxazan/jquery-treegrid/issues"
|
||||
},
|
||||
"homepage": "https://github.com/maxazan/jquery-treegrid"
|
||||
}
|
||||
1
InvenTree/InvenTree/static/treegrid/params.json
Normal file
1
InvenTree/InvenTree/static/treegrid/params.json
Normal file
@ -0,0 +1 @@
|
||||
{"name":"Jquery-treegrid","tagline":"TreeGrid plugin for jQuery","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `<a>` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
|
||||
250
InvenTree/InvenTree/static/treegrid/styles.css
Normal file
250
InvenTree/InvenTree/static/treegrid/styles.css
Normal file
@ -0,0 +1,250 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
|
||||
|
||||
body {
|
||||
padding:50px;
|
||||
font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color:#777;
|
||||
font-weight:300;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color:#222;
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
p, ul, ol, table, pre, dl {
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height:1.1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:28px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:#393939;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
color:#494949;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#39c;
|
||||
font-weight:400;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a small {
|
||||
font-size:11px;
|
||||
color:#777;
|
||||
margin-top:-0.6em;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width:860px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left:1px solid #e5e5e5;
|
||||
margin:0;
|
||||
padding:0 0 0 20px;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
|
||||
color:#333;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding:8px 15px;
|
||||
background: #f8f8f8;
|
||||
border-radius:5px;
|
||||
border:1px solid #e5e5e5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align:left;
|
||||
padding:5px 10px;
|
||||
border-bottom:1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
dt {
|
||||
color:#444;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
th {
|
||||
color:#444;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
|
||||
ul.download {
|
||||
list-style:none;
|
||||
height:40px;
|
||||
|
||||
padding:0;
|
||||
|
||||
background: #eee;
|
||||
background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
|
||||
background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
|
||||
background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
|
||||
background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
|
||||
background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
|
||||
|
||||
border-radius:5px;
|
||||
border:1px solid #d2d2d2;
|
||||
box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
|
||||
width:270px;
|
||||
}
|
||||
|
||||
ul.download li {
|
||||
width:89px;
|
||||
float:left;
|
||||
border-right:1px solid #d2d2d2;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
ul.download a {
|
||||
line-height:1;
|
||||
font-size:11px;
|
||||
color:#999;
|
||||
display:block;
|
||||
text-align:center;
|
||||
padding-top:6px;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color:#222;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
header ul li + li {
|
||||
width:88px;
|
||||
border-left:1px solid #fff;
|
||||
}
|
||||
|
||||
header ul li + li + li {
|
||||
border-right:none;
|
||||
width:89px;
|
||||
}
|
||||
|
||||
header ul a strong {
|
||||
font-size:14px;
|
||||
display:block;
|
||||
color:#222;
|
||||
}
|
||||
|
||||
section {
|
||||
width:500px;
|
||||
float:right;
|
||||
padding-bottom:50px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border:0;
|
||||
background:#e5e5e5;
|
||||
height:1px;
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
width:270px;
|
||||
float:left;
|
||||
position:fixed;
|
||||
bottom:50px;
|
||||
}
|
||||
|
||||
@media print, screen and (max-width: 960px) {
|
||||
|
||||
div.wrapper {
|
||||
width:auto;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
header, section, footer {
|
||||
float:none;
|
||||
position:static;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-right:320px;
|
||||
}
|
||||
|
||||
section {
|
||||
border:1px solid #e5e5e5;
|
||||
border-width:1px 0;
|
||||
padding:20px 0;
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
header a small {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
header ul {
|
||||
position:absolute;
|
||||
right:50px;
|
||||
top:52px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print, screen and (max-width: 720px) {
|
||||
body {
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
||||
header {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
header ul, header p.view {
|
||||
position:static;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
word-wrap:normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media print, screen and (max-width: 480px) {
|
||||
body {
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
header ul {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
padding:0.4in;
|
||||
font-size:12pt;
|
||||
color:#444;
|
||||
}
|
||||
}
|
||||
207
InvenTree/InvenTree/static/treegrid/test.html
Normal file
207
InvenTree/InvenTree/static/treegrid/test.html
Normal file
@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery TreeGrid Unit tests</title>
|
||||
<link rel="stylesheet" href="tests/qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="css/jquery.treegrid.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<table id='tree-1' border="1" cellpadding="0" cellspacing="0">
|
||||
<tr id="tree-head-1">
|
||||
<th>1</th><th>2</th>
|
||||
</tr>
|
||||
<tr class="treegrid-1" id="node-1">
|
||||
<td>1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1" id="node-1-1">
|
||||
<td>1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-3 treegrid-parent-2' id="node-1-1-1">
|
||||
<td>1.1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-9 treegrid-parent-2' id="node-1-1-2">
|
||||
<td>1.1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-10 treegrid-parent-9' id="node-1-1-2-1">
|
||||
<td>1.1.2.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-4 treegrid-parent-1' id="node-1-2">
|
||||
<td>1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-5 treegrid-parent-1' id="node-1-3">
|
||||
<td>1.3</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-6 treegrid-parent-5' id="node-1-3-1">
|
||||
<td>1.3.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-7 treegrid-parent-1' id="node-1-4">
|
||||
<td>1.4</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-8 treegrid-parent-7' id="node-1-4-1">
|
||||
<td>1.4.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-12 treegrid-parent-1' id="node-1-5">
|
||||
<td>1.5</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
|
||||
<tr class="treegrid-11" id="node-2">
|
||||
<td>2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr id="tree-summary-1">
|
||||
<td>Total</td><td>343</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<table id='tree-2' border="1" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<th>1</th><th>2</th>
|
||||
</tr>
|
||||
<tr class="treegrid-1" id="tnode-1">
|
||||
<td>1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-2 treegrid-parent-1" id="tnode-1-1">
|
||||
<td>1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-3 treegrid-parent-2' id="tnode-1-1-1">
|
||||
<td>1.1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-9 treegrid-parent-2' id="tnode-1-1-2">
|
||||
<td>1.1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-10 treegrid-parent-9' id="tnode-1-1-2-1">
|
||||
<td>1.1.2.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-4 treegrid-parent-1' id="tnode-1-2">
|
||||
<td>1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-5 treegrid-parent-1' id="tnode-1-3">
|
||||
<td>1.3</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-6 treegrid-parent-5' id="tnode-1-3-1">
|
||||
<td>1.3.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-7 treegrid-parent-1' id="tnode-1-4">
|
||||
<td>1.4</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-8 treegrid-parent-7' id="tnode-1-4-1">
|
||||
<td>1.4.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-11" id="tnode-2">
|
||||
<td>2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
<table id='tree-3' border="1" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<th>1</th><th>2</th>
|
||||
</tr>
|
||||
<tr class="treegrid-alfa1" id="anode-1">
|
||||
<td>1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-alfa2 treegrid-parent-alfa1" id="anode-1-1">
|
||||
<td>1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa3 treegrid-parent-alfa2' id="anode-1-1-1">
|
||||
<td>1.1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa9 treegrid-parent-alfa2' id="anode-1-1-2">
|
||||
<td>1.1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa10 treegrid-parent-alfa9' id="anode-1-1-2-1">
|
||||
<td>1.1.2.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa4 treegrid-parent-alfa1' id="anode-1-2">
|
||||
<td>1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa5 treegrid-parent-alfa1' id="anode-1-3">
|
||||
<td>1.3</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa6 treegrid-parent-alfa5' id="anode-1-3-1">
|
||||
<td>1.3.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa7 treegrid-parent-alfa1' id="anode-1-4">
|
||||
<td>1.4</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa8 treegrid-parent-alfa7' id="anode-1-4-1">
|
||||
<td>1.4.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-alfa11" id="anode-2">
|
||||
<td>2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
Event tests
|
||||
<table id='tree-4' border="1" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<th>1</th><th>2</th>
|
||||
</tr>
|
||||
<tr class="treegrid-alfa1" id="anode-1">
|
||||
<td>1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-alfa2 treegrid-parent-alfa1" id="anode-1-1">
|
||||
<td>1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa3 treegrid-parent-alfa2' id="anode-1-1-1">
|
||||
<td>1.1.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa9 treegrid-parent-alfa2' id="anode-1-1-2">
|
||||
<td>1.1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa10 treegrid-parent-alfa9' id="anode-1-1-2-1">
|
||||
<td>1.1.2.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa4 treegrid-parent-alfa1' id="anode-1-2">
|
||||
<td>1.2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa5 treegrid-parent-alfa1' id="anode-1-3">
|
||||
<td>1.3</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa6 treegrid-parent-alfa5' id="anode-1-3-1">
|
||||
<td>1.3.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa7 treegrid-parent-alfa1' id="anode-1-4">
|
||||
<td>1.4</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class='treegrid-alfa8 treegrid-parent-alfa7' id="anode-1-4-1">
|
||||
<td>1.4.1</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
<tr class="treegrid-alfa11" id="anode-2">
|
||||
<td>2</td><td>Simple text of ...</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="js/jquery.treegrid.min.js"></script>
|
||||
<script src="js/jquery.cookie.js"></script>
|
||||
<script>
|
||||
var globalCounter = 0;
|
||||
var saveStateName = 'state-save-4';
|
||||
$("#tree-1").treegrid({initialState: 'collapsed'});
|
||||
$("#tree-2").treegrid({treeColumn: 1, initialState: 'expanded', 'saveState': true, 'saveStateName': saveStateName});
|
||||
$("#tree-3").treegrid({initialState: 'collapsed'});
|
||||
$("#tree-4").treegrid({onChange: function() {
|
||||
globalCounter++;
|
||||
}, onCollapse: function() {
|
||||
globalCounter++;
|
||||
}, onExpand: function() {
|
||||
globalCounter++;
|
||||
}});
|
||||
</script>
|
||||
<script src="tests/qunit-1.12.0.js"></script>
|
||||
<script src="tests/tests.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
244
InvenTree/InvenTree/static/treegrid/tests/qunit-1.12.0.css
Normal file
244
InvenTree/InvenTree/static/treegrid/tests/qunit-1.12.0.css
Normal file
@ -0,0 +1,244 @@
|
||||
/**
|
||||
* QUnit v1.12.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://qunitjs.com
|
||||
*
|
||||
* Copyright 2012 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
padding: 0 .5em 0 .1em;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3c510c;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
2212
InvenTree/InvenTree/static/treegrid/tests/qunit-1.12.0.js
Normal file
2212
InvenTree/InvenTree/static/treegrid/tests/qunit-1.12.0.js
Normal file
File diff suppressed because it is too large
Load Diff
188
InvenTree/InvenTree/static/treegrid/tests/tests.js
Normal file
188
InvenTree/InvenTree/static/treegrid/tests/tests.js
Normal file
@ -0,0 +1,188 @@
|
||||
test("getRootNodes()", function() {
|
||||
var rootNodes = $('#tree-1').treegrid('getRootNodes');
|
||||
ok(rootNodes.length === 2, "Length need to be 2");
|
||||
equal($(rootNodes.get(0)).attr('id'), 'node-1', 'Test node 1');
|
||||
equal($(rootNodes.get(1)).attr('id'), 'node-2', 'Test node 2');
|
||||
var rootNodes2 = $('#node-1-1-2-1').treegrid('getRootNodes');
|
||||
equal(rootNodes.length, rootNodes2.length, "Length need to be equal");
|
||||
});
|
||||
|
||||
test("isolated options", function() {
|
||||
ok($('#node-1-1-2-1').treegrid('getSetting', 'initialState') !== $('#tnode-1-1-2-1').treegrid('getSetting', 'initialState'), "need to be not equal");
|
||||
});
|
||||
|
||||
test("treeColumn test", function() {
|
||||
ok($($('#node-1-1-2').find('td').get(1)).find('.treegrid-expander').length === 0, "0");
|
||||
ok($($('#node-1-1-2').find('td').get(0)).find('.treegrid-expander').length === 1, "1");
|
||||
ok($($('#tnode-1-1-2').find('td').get(0)).find('.treegrid-expander').length === 0, "0");
|
||||
ok($($('#tnode-1-1-2').find('td').get(1)).find('.treegrid-expander').length === 1, "1");
|
||||
});
|
||||
|
||||
test("getNodeId()", function() {
|
||||
equal($('#node-1-1-2-1').treegrid('getNodeId'), 10, "Return 10");
|
||||
equal($('#node-1-1-2').treegrid('getNodeId'), 9, "Return 9");
|
||||
});
|
||||
|
||||
test("getParentNodeId()", function() {
|
||||
equal($('#node-1-1-2-1').treegrid('getParentNodeId'), 9, "Return 9");
|
||||
equal($('#node-1-1-2').treegrid('getParentNodeId'), 2, "Return 2");
|
||||
equal($('#node-1-1-2').treegrid('getParentNodeId'), $('#node-1-1').treegrid('getNodeId'), "Equal id");
|
||||
});
|
||||
|
||||
test("getParentNode()", function() {
|
||||
equal($('#node-1-1-2-1').treegrid('getParentNode').treegrid('getNodeId'), 9, "Return 9");
|
||||
equal($('#node-1').treegrid('getParentNode'), null, "Return null");
|
||||
});
|
||||
|
||||
test("getChildNodes()", function() {
|
||||
equal($('#node-1').treegrid('getChildNodes').length, 5, "Return 5");
|
||||
equal($('#node-1-1-2-1').treegrid('getChildNodes').length, [], "Return []");
|
||||
});
|
||||
|
||||
test("getDepth()", function() {
|
||||
equal($('#node-1').treegrid('getDepth'), 0, "Return 0");
|
||||
equal($('#node-1-1-2-1').treegrid('getDepth'), 3, "Return 3");
|
||||
});
|
||||
|
||||
test("isLeaf()", function() {
|
||||
ok($('#node-1-1-2-1').treegrid('isLeaf') === true, "true");
|
||||
ok($('#node-1').treegrid('isLeaf') === false, "false");
|
||||
});
|
||||
|
||||
test("isLast()", function() {
|
||||
//Test root nodes
|
||||
ok($('#node-1').treegrid('isLast') === false, "Not Last!");
|
||||
ok($('#node-2').treegrid('isLast') === true, "Last!");
|
||||
//Test nodes with branch
|
||||
ok($('#node-1-4').treegrid('isLast') === false, "Not Last test!");
|
||||
ok($('#node-1-5').treegrid('isLast') === true, "Last test!");
|
||||
ok($('#node-1-1-2-1').treegrid('isLast') === true, "Last test!");
|
||||
ok($('#node-1-2').treegrid('isLast') === false, "Not Last test!");
|
||||
});
|
||||
|
||||
test("isFirst()", function() {
|
||||
//Test root nodes
|
||||
ok($('#node-1').treegrid('isFirst') === true, "First!");
|
||||
ok($('#node-2').treegrid('isFirst') === false, "Not first!");
|
||||
//Test nodes with branch
|
||||
ok($('#node-1-1').treegrid('isFirst') === true, "First!");
|
||||
ok($('#node-1-4').treegrid('isFirst') === false, "Not first!");
|
||||
ok($('#node-1-1-2-1').treegrid('isFirst') === true, "First!");
|
||||
ok($('#node-1-2').treegrid('isFirst') === false, "Not First!");
|
||||
});
|
||||
|
||||
test("isRoot()", function() {
|
||||
ok($('#node-1').treegrid('isRoot') === true, "Root test!");
|
||||
ok($('#node-1-2').treegrid('isRoot') === false, "Not Root test!");
|
||||
ok($('#node-2').treegrid('isRoot') === true, "Other root test!");
|
||||
});
|
||||
|
||||
test("expand(), collapse(), isExpanded(), isCollapsed()", function() {
|
||||
$('#node-1').treegrid('expand');
|
||||
ok($('#node-1').treegrid('isExpanded') === true, "Expanded");
|
||||
ok($('#node-1').hasClass('treegrid-expanded'), "Expanded class");
|
||||
$('#node-1').treegrid('collapse');
|
||||
ok($('#node-1').treegrid('isCollapsed') === true, "Collapsed");
|
||||
ok($('#node-1').hasClass('treegrid-collapsed'), "Collapsed class");
|
||||
$('#node-1').find('.treegrid-expander').click();
|
||||
ok($('#node-1').treegrid('isExpanded') === true, "Expanded after click simulate");
|
||||
$('#node-1').treegrid('collapse');
|
||||
ok($('#node-1-1').is(':visible') === false, "hidden child node 1-1");
|
||||
ok($('#node-1-1-2').is(':visible') === false, "hidden child node 1-1-2");
|
||||
ok($('#node-1-1-2-1').is(':visible') === false, "hidden child node 1-1-2-1");
|
||||
});
|
||||
|
||||
test("expandAll()", function() {
|
||||
$('#tree-1').treegrid('expandAll');
|
||||
ok($('#node-1').treegrid('isExpanded') === true, "Expanded");
|
||||
ok($('#node-1-1').treegrid('isExpanded') === true, "Expanded 1-1");
|
||||
ok($('#node-1-1-2').treegrid('isExpanded') === true, "Expanded 1-1-2");
|
||||
});
|
||||
|
||||
test("collapseAll()", function() {
|
||||
$('#tree-1').treegrid('collapseAll');
|
||||
ok($('#node-1').treegrid('isExpanded') === false, "Collapsed");
|
||||
ok($('#node-1-1').treegrid('isExpanded') === false, "Collapsed 1-1");
|
||||
ok($('#node-1-1-2').treegrid('isExpanded') === false, "Collapsed 1-1-2");
|
||||
$('#node-1-1-2').treegrid('expandAll');
|
||||
ok($('#node-1-1').treegrid('isExpanded') === true, "Expanded 1-1");
|
||||
});
|
||||
|
||||
test("Save state (cookie method)", function() {
|
||||
ok($.cookie(saveStateName) !== undefined, "Cookie set");
|
||||
$.cookie(saveStateName, '1,5');
|
||||
$('#tnode-1').treegrid('restoreState');
|
||||
$('#tnode-1-3').treegrid('restoreState');
|
||||
ok($('#tnode-1').treegrid('isExpanded'), "tnode-1 expanded");
|
||||
ok($('#tnode-1-3').treegrid('isExpanded'), "tnode-1-3 expanded");
|
||||
$.cookie(saveStateName, '2');
|
||||
$('#tnode-1').treegrid('restoreState');
|
||||
$('#tnode-1-3').treegrid('restoreState');
|
||||
$('#tnode-1-1').treegrid('restoreState');
|
||||
ok($('#tnode-1').treegrid('isCollapsed'), "tnode-1 collapsed");
|
||||
ok($('#tnode-1-3').treegrid('isCollapsed'), "tnode-1-3 collpased");
|
||||
ok($('#tnode-1-1').treegrid('isExpanded'), "tnode-1-1 expanded");
|
||||
});
|
||||
|
||||
test("Alphanumeric id", function() {
|
||||
equal($('#anode-1').treegrid('getDepth'), 0, "Return 0");
|
||||
equal($('#anode-1-1-2-1').treegrid('getDepth'), 3, "Return 3");
|
||||
equal($('#anode-1').treegrid('getChildNodes').length, 4, "Return 4");
|
||||
equal($('#anode-1-1-2-1').treegrid('getChildNodes').length, [], "Return []");
|
||||
});
|
||||
|
||||
test("getAllNodes", function() {
|
||||
equal($('#tree-1').treegrid('getAllNodes').length, 12, "12");
|
||||
});
|
||||
|
||||
test("isNode", function() {
|
||||
ok($('#tree-head-1').treegrid("isNode") === false, 'Head is not node');
|
||||
ok($('#tree-summary-1').treegrid("isNode") === false, 'Summary is not node');
|
||||
ok($('#node-1-1').treegrid("isNode") === true, 'Node is node');
|
||||
});
|
||||
|
||||
test("getLast from getAllNodes", function() {
|
||||
$('#tree-1').treegrid('getAllNodes').each(function() {
|
||||
if ($(this).treegrid("isLast")) {
|
||||
ok($.inArray($(this).treegrid('getNodeId'), [11, 7, 9, 10, 6, 8]));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test("getLast from tr.each", function() {
|
||||
$('#tree-1').find('tr').each(function() {
|
||||
if ($(this).treegrid("isNode") && $(this).treegrid("isLast")) {
|
||||
ok($.inArray($(this).treegrid('getNodeId'), [11, 7, 9, 10, 6, 8]));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test("Event collapse/expand", function() {
|
||||
var count = 0;
|
||||
$('#tree-4').find('#anode-1').treegrid("collapse");
|
||||
$('#tree-4').treegrid("getAllNodes").one("collapse", function(event) {
|
||||
count++;
|
||||
});
|
||||
$('#tree-4').treegrid("getAllNodes").one("expand", function(event) {
|
||||
count++;
|
||||
});
|
||||
$('#tree-4').find('#anode-1').treegrid("expand");
|
||||
$('#tree-4').find('#anode-1').treegrid("collapse");
|
||||
equal(count, 2);
|
||||
});
|
||||
|
||||
test("Event change", function() {
|
||||
var count = 0;
|
||||
$('#tree-4').find('#anode-1').treegrid("collapse");
|
||||
var func=function(event) {
|
||||
count++;
|
||||
};
|
||||
$('#tree-4').treegrid("getAllNodes").on("change", func);
|
||||
$('#tree-4').find('#anode-1').treegrid("expand");
|
||||
$('#tree-4').find('#anode-1').treegrid("collapse");
|
||||
$('#tree-4').find('#anode-1').treegrid("expand");
|
||||
$('#tree-4').find('#anode-1').treegrid("collapse");
|
||||
$('#tree-4').treegrid("getAllNodes").off("change", func);
|
||||
|
||||
equal(count, 4);
|
||||
});
|
||||
37
InvenTree/InvenTree/static/treegrid/treegrid.jquery.json
Normal file
37
InvenTree/InvenTree/static/treegrid/treegrid.jquery.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "treegrid",
|
||||
"description": "jquery plugin for showing a HTML table as tree",
|
||||
"keywords": [
|
||||
"treegrid",
|
||||
"tree",
|
||||
"grid",
|
||||
"explorer",
|
||||
"file",
|
||||
"table",
|
||||
"tree",
|
||||
"ui"
|
||||
],
|
||||
"version": "0.3.0",
|
||||
"title": "TreeGrid plugin for jQuery",
|
||||
"author": {
|
||||
"name": "Pomazan Max"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Pomazan Max"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"bugs": "https://github.com/maxazan/jquery-treegrid/issues",
|
||||
"homepage": "http://maxazan.github.io/jquery-treegrid/",
|
||||
"docs": "http://maxazan.github.io/jquery-treegrid/",
|
||||
"demo": "http://maxazan.github.io/jquery-treegrid/",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.10.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user