使用dasBaum:重新加载页面,并且不在树中输入

时间:2014-11-25 09:05:36

标签: javascript jquery jquery-ui jquery-plugins

我正在使用dasBaum插件,问题是,当我点击任意2个按钮添加项目时,页面已被重新加载,并且该项目未添加到树中。

我在我的页面中做了什么:我创建了一些标签和第三个标签我放置了一个div,其中树(包含项目的div)就在那里。

你可以在我给出的链接中看到dasBaum.js。

    <html>
    <head>

    <script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery-1.9.1.js" ></script>
<!--script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery-ui-1.8.18.custom.min.js"></script--> 
<script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/fullcalendar.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery-ui.multidatespicker.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/prettify.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery.multiselect2side.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery.tmpl.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/TableTools.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/ZeroClipboard.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/tab-menu.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/excellentexport.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/xlReader.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/eRoster.js"></script>
<script type="text/javascript" src="<?php echo $jsPath; ?>js/utils.js"></script>  
<script type="text/javascript" src="<?php echo $jsPath; ?>js/linq.js"></script> 
<script type="text/javascript" src="<?php echo $jsPath; ?>js/Require.js"></script> 
<script type="text/javascript" src="<?php echo $jsPath; ?>js/dasBaum.js"></script> 
<script type="text/javascript" src="<?php echo $jsPath; ?>js/json2.js"></script> 
<script type="text/javascript" src="js/jquery.alerts.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> 
</head>



 <!-- CREATED TABS DIV HERE, IN THIRD DIV I HAVE PUT "CONTAINER" DIV -->
 <body>
 ------------------
 ------------------
 <div id="container">
        <center class="headline">
            <button id="btFolder">New Folder</button>
            <button id="btEntry">New Entry</button>
        </center>

        <div id="tree">
        </div>
        <div style="color:white">
            <div class="headline">Features</div>
            Drag&amp;Drop to reorder items<br/>
            Doubleclick to rename
            <div class="headline">Hotkeys</div>
            <strong>Space:</strong> Toggle Item<br/>
            <strong>Up/Down:</strong> Move Cursor<br/>
            <strong>Enter:</strong> Select<br/>
        </div>
    </div>
   --------------
   --------------

   <script type="text/javascript">
        $(function() {
            $(document).keydown(function(e) {
                $('#tree').dasBaum('handleKey',e);
            })
            $('#btFolder').click(function() {
                $('#tree').dasBaum('addItem',{label:'New Entry',items:[]})
            });
            $('#btEntry').click(function() {
                $('#tree').dasBaum('addItem',{label:'New Entry'});
            });
            console.log("bfore dasBaum");
            debugger;
            $('#tree').dasBaum({
                sort: true,
                foldersOnTop: true,
                items: [
                    {

                        label:'D',
                        items: [{label:'E'}]

                    },
                    {label:'A'},
                    {label:'B'},
                    {label:'C'},
                ]
            });debugger;
        });
    </script>

   </body>
   </html>

plz转到dasBaum.js或.css文件的链接。 我在我的项目中使用jquery-ui-1.11.2.js,这可能会有所不同。

0 个答案:

没有答案