我正在使用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&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,这可能会有所不同。