Esse é meu 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>
Preciso agora colocar em cada nó, não em todos, mas aqueles que serão tomada algumas ações. Estou tendo dificuldade em fazer isso. Uso: JQuery, MVC5, Bootstrap 3, C#
A dúvida toda não é bem criar os checkboxes, mas sim fazer com que haja um dependência entre eles, assim: Em um nó pai, existe abaixo deles os filhos, então eu checo o pai e todos os filhos deveriam ser checados também. Esse tem sido minha grande dor de cabeça. Baixei alguns exemplos na net e nada, como esses:
http://www.jqwidgets.com/jquery-tree-with-checkboxes/
https://gist.github.com/clayzermk1/3317341
Não consegui fazê-los funcionar.
Fiz dessa forma e ainda não consigo fazer funcionar.
<!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>
Esses são os erros de javascript que está dando quando eu executo.
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
Peguei outro exemplo na internet e tenho dificuldade em trabalhar com json. Não consegui montar, pois os arquivos(HTML e JSON) vêm separados. Para usar json(acho que é uma função) o faço semelhante a uma função javascript ou jquery? Veja abaixo os arquivos json e html respectivamente. Como eu faço para o html fazer referência ao json ou vice e 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"
}]
}]
}]
E o 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>
check boxes
filhos. Onde está este código?