私は ASP.Net MVC で作業しています。そしてjqwidgets、私のWebページでのツリーコントロールを使用しています。そのツリーのコードは以下のとおりです。
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript">
function fun()
{
}
$(document).ready(function () {
$('#jqxTree').on('select',function (event)
{
var args = event.args;
var item = $('#jqxTree').jqxTree('getItem', args.element);
var label = item.label;
alert(label);
});
// Create jqxTree
var theme = getDemoTheme();
// create jqxTree
$('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: false, width: '330px', theme: theme });
$('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true, theme: theme });
$('#jqxCheckBox').on('change', function (event) {
var checked = event.args.checked;
$('#jqxTree').jqxTree({ hasThreeStates: checked });
});
$("#jqxTree").jqxTree('selectItem', $("#home")[0]);
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div style='float: left;'>
<div id='jqxTree' style='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>
<br/><br/>
</body>
</html>
ノードが展開されるたびに、サーバーのデータベースから新しい子ノードをロードする必要があります。次のデータベーススキーマがある場合、この問題の解決策は何ですか。
ID Lable ParentID
ID は要素の ID で、ParentID はその親の ID です。ノードが展開されている場合、その子を見つけてツリー コントロールに挿入する必要があります。この問題を解決する方法を教えてください。どうもありがとう。