Javascript 如何使用php将动态数据插入json
我正在实际开发复选框树，其中我需要一个复选框动态值。。这是我的密码。我现在有json格式的静态数据，我需要将其转换为动态数据，这些数据必须从mysql数据库中获取。我已经尝试了所有的事情，但没有一件对我有效，所以请帮助我解决我的问题Javascript 如何使用php将动态数据插入json,javascript,php,jquery,mysql,json,Javascript,Php,Jquery,Mysql,Json,我正在实际开发复选框树，其中我需要一个复选框动态值。。这是我的密码。我现在有json格式的静态数据，我需要将其转换为动态数据，这些数据必须从mysql数据库中获取。我已经尝试了所有的事情，但没有一件对我有效，所以请帮助我解决我的问题 <!DOCTYPE html> <html> <head> </head> <body> <a class="offline-button
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" class="k-content">
<div class="container">
<div class="treeview-back ">
<div id="treeview"></div>
</div>
</div>
<div id="result">No nodes checked.</div>
<?php $mydata=mysql_query("select id,item_name,parent,menu_type from epic_master_menu ");
while($myfetch=mysql_fetch_array($mydata)) {
print_r($myfetch);
}
?>
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id:1, text: "<?php echo $myfetch['item_name']; ?>", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
});
</script>
<style scoped>
#treeview .k-sprite {
background-image: url("../../content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
.treeview-back
{
float: left;
margin: 0 0 2em;
padding: 20px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.45), inner 0 0 30px rgba(0,0,0,0.07);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.container
{
margin: 0 30px;
float: left;
width: 220px;
}
#result
{
float: left;
padding: 10px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.45), inner 0 0 30px rgba(0,0,0,0.07);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
</style>
</div>
</body>
</html>
未检查任何节点。
$（“#treeview”）.kendoTreeView({
复选框：{
孩子们：是的
},
数据源：[{
id:1，文本：，扩展：true，精灵类：“根文件夹”，项：[
{
id:2，文本：“剑道UI项目”，扩展：true，精灵类：“文件夹”，项目：[
{id:3，文本：“about.html”，spritecsclass：“html”}，
{id:4，文本：“index.html”，spritecsclass:“html”}，
{id:5，文本：“logo.png”，spritecsclass:“image”}
]
},
{
id:6，文本：“新网站”，扩展：true，精灵类：“文件夹”，项目：[
{id:7，文本：“mockup.jpg”，spritecsclass：“image”}，
{id:8，文本：“Research.pdf”，spritecsclass：“pdf”}，
]
},
{
id:9，文本：“报告”，扩展：true，精灵类：“文件夹”，项目：[
{id:10，文本：“二月.pdf”，精灵类：“pdf”}，
{id:11，文本：“March.pdf”，spritecsclass：“pdf”}，
{id:12，文本：“April.pdf”，spritecsclass:“pdf”}
]
}
]
}]
});
//函数，用于收集选中节点的ID
函数checkedNodeId（节点，checkedNodes）{
对于（var i=0；i0）{
message=“选中节点的ID:”+checkedNodes.join（“，”）；
}否则{
message=“未检查任何节点。”；
}
$（“#结果”）.html（消息）；
});
#树妖{
背景图像：url（“../../content/web/treeview/coloricons sprite.png”）；
}
.rootfolder{背景位置：0；}
.文件夹{背景位置：0-16px；}
.pdf{背景位置：0-32px；}
.html{背景位置：0-48px；}
.image{背景位置：0-64px；}
treeview先生回来了
{
浮动：左；
边缘：0.02米；
填充：20px；
-moz盒阴影：0 1px 2px rgba（0,0,0,0.45），插入0 0 30px rgba（0,0,0,0.07）；
-webkit盒阴影：0 1px 2px rgba（0,0,0,0.45），插入0 0 30px rgba（0,0,0,0.07）；
盒影：0.1px2pxRGBA（0,0,0,0.45），内部0.30pxRGBA（0,0,0,0.07）；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
}
.集装箱
{
利润率：0.30px；
浮动：左；
宽度：220px；
}
#结果
{
浮动：左；
填充：10px；
-moz盒阴影：0 1px 2px rgba（0,0,0,0.45），插入0 0 30px rgba（0,0,0,0.07）；
-webkit盒阴影：0 1px 2px rgba（0,0,0,0.45），插入0 0 30px rgba（0,0,0,0.07）；
盒影：0.1px2pxRGBA（0,0,0,0.45），内部0.30pxRGBA（0,0,0,0.07）；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
}
$data = array(
id => 1,
text => 'item_name',
expanded => true,
spriteCssClass => "rootfolder",
items => array(
array(
id => 2,
text => "Kendo UI Project",
expanded => true,
spriteCssClass => "folder",
items => array(
array( id => 3, text => "about.html", spriteCssClass => "html" ),
array( id => 4, text => "index.html", spriteCssClass => "html" ),
array( id => 5, text => "logo.png", spriteCssClass => "image" )
)
),
array(...),
)
)
echo json_encode($data);
只有
id:1