0

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>
4
  • Pra que este código funcione, você precisa desenvolver um JS que marque todos os check boxes filhos. Onde está este código? Commented 4/09/2014 às 19:55
  • Não, não tem. O Bootstrap é simplesmente um padrão de organização de arquivos CSS com JS. Qualquer outro comportamento a mais você precisa adicionar manualmente. Commented 5/09/2014 às 16:38
  • Encontrei um exemplo na net, mas usa Telerik(Kendo UI). Gostaria de usar somente Bootstrap ou Javascript e nada de outros componentes, principalmente de terceiros, até porque envolve licença e acho que a empresa aqui não vai querer pagar. Tá osso, mas estou buscando. Veja, não é criar os checkbox, isso eu faço. É checar um nó e todos os filhos ficarem checados também, essa é minha busca. demos.telerik.com/kendo-ui/treeview/checkboxes
    – pnet
    Commented 8/09/2014 às 13:29
  • Fiz uma edição no meu post, mostrando uma certa dificuldade com json. Se alguém souber e me ajudar, agradeço mesmo.
    – pnet
    Commented 8/09/2014 às 17:07

1 Resposta 1

0

Esse exemplo que eu baixei funcionou.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynatree - Example</title>

    <link href="Content/Jqwidgets/jqx.base.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-2.1.0.min.js"></script>

    <script src="Scripts/Jqwidgets/jqxcore.js"></script>
    <script src="Scripts/Jqwidgets/jqxbuttons.js"></script>
    <script src="Scripts/Jqwidgets/jqxscrollbar.js"></script>
    <script src="Scripts/Jqwidgets/jqxpanel.js"></script>
    <script src="Scripts/Jqwidgets/jqxtree.js"></script>
    <script src="Scripts/Jqwidgets/jqxcheckbox.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>

    <!-- (Irrelevant source removed.) -->
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .