0

このサイト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);

しかし、ツリービューのデータは印刷されませんでした:

Array ( [userName] => test [comment] => testt [rb1] => foo [cb1] => John )
4

1 に答える 1

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-追加

<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">
于 2013-10-20T13:17:37.450 に答える