如何使用php將動態數據插入到json中
[英]how to insert the dyanamic data into json using php
問題描述
我正在開發復選框樹，我需要一個復選框動態值。這是我的代碼。 我有 json 格式的靜態數據，現在我需要將其轉換為動態數據，該數據必須從 mysql 數據庫中獲取。 我已經嘗試了所有的方法，但沒有任何效果，所以請幫我解決我的問題
<!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>
1 個解決方案
解決方案1
2 2014-02-24 06:35:01
首先構建php數組
$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(...),
)
)
接下來將其編碼為 json
echo json_encode($data);
使用ajax，json和php插入數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.