0
This is my treeview:
@*Daqui para baixo, tudo se relaciona com a treeview*@
<div class="well" style="width:100%; padding: 8px 0;">
<div style="overflow-y: scroll; overflow-x: hidden; height: 300px;">
<ul class="nav nav-list">
<li>
<label class="tree-toggler nav-header">Produto</label>
<ul class="nav nav-list tree">
<li><a href="#">MIP</a></li>
<li>
<label class="tree-toggler nav-header">Família: ACCUVIT</label>
<ul class="nav nav-list tree">
<li><a href="#">ACCUVIT COMREV FRX30</a></li>
</ul>
</li>
<li>
<label class="tree-toggler nav-header">Família: FLOGORAL</label>
<ul class="nav nav-list tree">
<li><a href="#">FLOGORAL SPRAY CEREJA CTX30ML</a></li>
<li><a href="#">FLOGORAL SPRAY MENTA CTX30ML</a></li>
<li><a href="#">FLOGORAL CREM DENTAL CTX70G</a></li>
</ul>
</li>
<li><a href="#">GX</a></li>
<li><a href="#">RX</a></li>
<li>
</li>
<li>
<label class="tree-toggler nav-header">Header 1.1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li>
<label class="tree-toggler nav-header">Header 1.1.1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
I need now to put on each knot, not at all, but those that will be taken some actions. I’m having difficulty in doing this. Use: Jquery, MVC5, Bootstrap 3, C#
The whole question is not to create checkboxes, but to make a dependency between them, like this: In a parent node, there are below them the children, so I check the father and all the children should be checked as well. This has been my big headache. I downloaded some examples on the net and nothing like these:
http://www.jqwidgets.com/jquery-tree-with-checkboxes/
https://gist.github.com/clayzermk1/3317341
I couldn’t get them to work.
I did it that way and I still can’t make it work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Content/Jqwidgets/jqx.base.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/modernizr-2.7.1.js"></script>
<script src="Scripts/Jqwidgets/jqxbuttons.js"></script>
<script src="Scripts/Jqwidgets/jqxcheckbox.js"></script>
<script src="Scripts/Jqwidgets/jqxcore.js"></script>
<script src="Scripts/Jqwidgets/jqxlistbox.js"></script>
<script src="Scripts/Jqwidgets/jqxscrollbar.js"></script>
<script src="Scripts/Jqwidgets/jqxpanel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// create jqxTree
$('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px' });
$('#jqxTree').css('visibility', 'visible');
$('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true });
$('#jqxCheckBox').on('change', function (event) {
var checked = event.args.checked;
$('#jqxTree').jqxTree({ hasThreeStates: checked });
});
$("#jqxTree").jqxTree('selectItem', $("#home")[0]);
});
</script>
</head>
<body>
<div id='jqxWidget'>
<div style='float: left;'>
<div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
<ul>
<li id='home'>Home</li>
<li item-checked='true' item-expanded='true'>
Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li item-checked='false'>Manufacturing</li>
<li>
Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>
Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>
Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>
Communities
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Educators and students</li>
<li>Partners</li>
<li>
By resource
<ul>
<li>Labs</li>
<li>TV</li>
<li>Forums</li>
<li>Exchange</li>
<li>Blogs</li>
<li>Experience Design</li>
</ul>
</li>
</ul>
</li>
<li>
Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</div>
<div style='margin-left: 60px; float: left;'>
<div style='margin-top: 10px;'>
<div id='jqxCheckBox'>Three Check States</div>
</div>
</div>
</div>
</div>
</body>
</html>
These are the javascript errors that are giving when I run.
Uncaught ReferenceError: $ is not defined Teste.html:
7 Uncaught TypeError: Cannot set property 'cssroundedcorners' of undefined jqxbuttons.js:
7 Uncaught TypeError: Cannot read property 'jqxWidget' of undefined
I took another example on the internet and I have difficulty working with json. I couldn’t assemble it because the files (HTML and JSON) come separately. To use json(I think it’s a function) do I do it similar to a javascript or jquery function? See below the json and html files respectively. How do I make html to reference json or vice versa?
[{
"id":1,
"text":"Foods",
"children":[{
"id":2,
"text":"Fruits",
"state":"closed",
"children":[{
"text":"apple",
"checked":true
},{
"text":"orange"
}]
},{
"id":3,
"text":"Vegetables",
"state":"open",
"children":[{
"text":"tomato",
"checked":true
},{
"text":"carrot",
"checked":true
},{
"text":"cabbage"
},{
"text":"potato",
"checked":true
},{
"text":"lettuce"
}]
}]
}]
And the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree"
url="data/tree_data.json"
checkbox="true">
</ul>
</body>
</html>
For this code to work, you need to develop a JS that marks all
check boxeschildren. Where is this code?– Leonel Sanches da Silva
No, it doesn’t. Bootstrap is simply a standard for organizing CSS files with JS. Any other behavior you need to add manually.
– Leonel Sanches da Silva
I found an example on the net, but uses Telerik (Kendo UI). I would like to use only Bootstrap or Javascript and nothing of other components, mainly of third parties, because it involves license and I think the company here will not want to pay. Okay, but I’m looking. See, it’s not creating checkboxes, that’s what I do. It is to check a node and all the children are checked too, this is my search. http://demos.telerik.com/kendo-ui/treeview/checkboxes
– pnet
I did an edit on my post, showing a certain difficulty with json. If anyone knows and helps me, I really appreciate it.
– pnet