我使用了此网站TreeView
中的treeview组件(请选择“嵌入表格”)
我编辑了示例源代码并将其保存到index.php:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynatree - Example</title>
<script src="../assets/jquery/jquery.js" type="text/javascript"></script>
<script src="../assets/jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../assets/jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../assets/css/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../assets/js/jquery.dynatree.js" type="text/javascript"></script>
<!-- (Irrelevant source removed.) -->
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
$(function(){
$("#tree").dynatree({
checkbox: true,
// Override class name for checkbox icon, so rasio buttons are displayed:
//classNames: {checkbox: "dynatree-radio"},
// Select mode 3: multi-hier
selectMode: 3,
children: [
{title: "Item 1", key: "node1"},
{title: "Folder 2", isFolder: true, key: "node2",
children: [
{title: "Sub-item 2.1", key: "node2.1"},
{title: "Sub-item 2.2", key: "node2.2"}
]
},
{title: "Item 3", key: "node3"}
]
});
$("form").submit(function() {
// Serialize standard form fields:
var formData = $(this).serializeArray();
// then append Dynatree selected 'checkboxes':
var tree = $("#tree").dynatree("getTree");
formData = formData.concat(tree.serializeArray());
// and/or add the active node as 'radio button':
if(tree.getActiveNode()){
formData.push({name: "activeNode", value: tree.getActiveNode().data.key});
}
alert("POSTing this:\n" + jQuery.param(formData));
$.post("http://localhost/LearnPHP/Tree/code/action.php", formData);
});
});
</script>
</head>
<body class="example">
<h1>Example: Form</h1>
<p class="description">
This checkbox tree is embedded in a form.
The [Submit] handler serializes the selected tree nodes as if they were
standard checkboxes.<br>
The values are then POSTed to the server (together with the other form
elements).
</p>
<form action="http://localhost/LearnPHP/Tree/code/action.php" method="POST">
<!--<form method="POST">-->
Username: <input type="text" name="userName" />
<br>
<textarea name="comment"></textarea>
<br>
<input type="radio" name="rb1" value="foo" checked> Foo
<input type="radio" name="rb1" value="bar"> Bar
<input type="radio" name="rb1" value="baz"> Baz
<br>
<input type="checkbox" name="cb1" value="John" checked>John
<input type="checkbox" name="cb1" value="Paul">Paul
<input type="checkbox" name="cb1" value="George">George
<input type="checkbox" name="cb1" value="Ringo">Ringo
<br>
<!-- The name attribute is used by tree.serializeArray() -->
<div id="tree" name="selNodes"></div>
<input type="submit" value="Send data">
</form>
<!-- (Irrelevant source removed.) -->
</body>
</html>
我将数据发送到action.php(这是我的action.php文件):
print_r($_POST);
但是没有打印treeview的数据:
Array ( [userName] => test [comment] => testt [rb1] => foo [cb1] => John )
答案 0 :(得分:0)
最后我找到了解决方案! 1-编辑jquery代码:
jQuery("#sub").click(function() {
var tree = $("#tree").dynatree("getTree");
var ts = tree.serializeArray();
var arr = [];
for (var i = 0; i < ts.length; i++) {
arr.push(ts[i].value);
}
$("#selcs").val(arr.join());
var formData = $("#f1").serializeArray();
formData = formData.concat(tree.serializeArray());
if (tree.getActiveNode()) {
formData.push({
name : "activeNode",
value : tree.getActiveNode().data.key
});
}
$("#f1").submit();
});
2-add
<input id="selcs" name="mySelects" type="hidden" value="">
3-编辑:
<form id="f1" method="post" action="action.php" >
<input id="sub" type="button" value="Send data">