0

DynaTree を使用してツリー ビューを作成しようとしています。次に、チェックボックスの値をデータベースに保存します。

以下のコードのチェックボックスの値をデータベースに保存することについての知識は誰にでもあります。このコードは dynatree からのものです。

    <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>User Access Details</title>

  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script src="jquery/jquery-ui.custom.js" type="text/javascript"></script>
  <script src="jquery/jquery.cookie.js" type="text/javascript"></script>

  <link href="src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
  <script src="src/jquery.dynatree.js" type="text/javascript"></script>

  <!-- (Irrelevant source removed.) -->

<script type="text/javascript">
  var treeData = [

    {title: "Authorised Access", key: "id3",
      children: [
        {title: "POS",select: true,
          children: [
            {title: "Read", key: "id3.1.1" },
            {title: "Write", key: "id3.1.2" }
          ]
        },
        {title: "MATE",
          children: [
            {title: "Read", key: "id3.2.1" },
            {title: "Write", key: "id3.2.2" }
          ]
        }
      ]
    },
    {title: "Unauthorised Access", key: "id4",
      children: [
        {title: "Logical Access", activate: true,
          children: [
            {title: "Email", key: "id4.1.1" },
            {title: "Internate", key: "id4.1.2" }
          ]
        },


      ]
    }
  ];
  $(function(){

    // --- Initialize sample trees
    $("#tree1").dynatree({
      checkbox: true,
      // Override class name for checkbox icon:
      classNames: {checkbox: "dynatree-radio"},
      selectMode: 1,
      children: treeData,
      onActivate: function(node) {
        $("#echoActive1").text(node.data.title);
      },
      onSelect: function(select, node) {
        // Display list of selected nodes
        var s = node.tree.getSelectedNodes().join(", ");
        $("#echoSelection1").text(s);
      },
      onDblClick: function(node, event) {
        node.toggleSelect();
      },
      onKeydown: function(node, event) {
        if( event.which == 32 ) {
          node.toggleSelect();
          return false;
        }
      },
      // The following options are only required, if we have more than one tree on one page:
//      initId: "treeData",
      cookieId: "dynatree-Cb1",
      idPrefix: "dynatree-Cb1-"
    });

    $("#tree2").dynatree({
      checkbox: true,
      selectMode: 2,
      children: treeData,
      onSelect: function(select, node) {
        // Display list of selected nodes
        var selNodes = node.tree.getSelectedNodes();
        // convert to title/key array
        var selKeys = $.map(selNodes, function(node){
             return "[" + node.data.key + "]: '" + node.data.title + "'";
        });
        $("#echoSelection2").text(selKeys.join(", "));
      },
      onClick: function(node, event) {
        // We should not toggle, if target was "checkbox", because this
        // would result in double-toggle (i.e. no toggle)
        if( node.getEventTargetType(event) == "title" )
          node.toggleSelect();
      },
      onKeydown: function(node, event) {
        if( event.which == 32 ) {
          node.toggleSelect();
          return false;
        }
      },
      // The following options are only required, if we have more than one tree on one page:
      cookieId: "dynatree-Cb2",
      idPrefix: "dynatree-Cb2-"
    });

    $("#tree3").dynatree({
      checkbox: true,
      selectMode: 3,
      children: treeData,
      onSelect: function(select, node) {
        // Get a list of all selected nodes, and convert to a key array:
        var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
          return node.data.key;
        });
        $("#echoSelection3").text(selKeys.join(", "));

        // Get a list of all selected TOP nodes
        var selRootNodes = node.tree.getSelectedNodes(true);
        // ... and convert to a key array:
        var selRootKeys = $.map(selRootNodes, function(node){
          return node.data.key;
        });
        $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
        $("#echoSelectionRoots3").text(selRootNodes.join(", "));
      },
      onDblClick: function(node, event) {
        node.toggleSelect();
      },
      onKeydown: function(node, event) {
        if( event.which == 32 ) {
          node.toggleSelect();
          return false;
        }
      },
      // The following options are only required, if we have more than one tree on one page:
//        initId: "treeData",
      cookieId: "dynatree-Cb3",
      idPrefix: "dynatree-Cb3-"
    });

    $("#tree4").dynatree({
      checkbox: false,
      selectMode: 2,
      children: treeData,
      onQuerySelect: function(select, node) {
        if( node.data.isFolder )
          return false;
      },
      onSelect: function(select, node) {
        // Display list of selected nodes
        var selNodes = node.tree.getSelectedNodes();
        // convert to title/key array
        var selKeys = $.map(selNodes, function(node){
             return "[" + node.data.key + "]: '" + node.data.title + "'";
        });
        $("#echoSelection4").text(selKeys.join(", "));
      },
      onClick: function(node, event) {
        if( ! node.data.isFolder )
          node.toggleSelect();
      },
      onDblClick: function(node, event) {
        node.toggleExpand();
      },
      onKeydown: function(node, event) {
        if( event.which == 32 ) {
          node.toggleSelect();
          return false;
        }
      },
      // The following options are only required, if we have more than one tree on one page:
//      initId: "treeData",
      cookieId: "dynatree-Cb4",
      idPrefix: "dynatree-Cb4-"
    });

    $("#btnToggleSelect").click(function(){
      $("#tree2").dynatree("getRoot").visit(function(node){
        node.toggleSelect();
      });
      return false;
    });
    $("#btnDeselectAll").click(function(){
      $("#tree2").dynatree("getRoot").visit(function(node){
        node.select(false);
      });
      return false;
    });
    $("#btnSelectAll").click(function(){
      $("#tree2").dynatree("getRoot").visit(function(node){
        node.select(true);
      });
      return false;
    });
    <!-- (Irrelevant source removed.) -->
  });

  $("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://127.0.0.1:8001/submit_data",
           formData,
           function(response, textStatus, xhr){
             alert("POST returned " + response + ", " + textStatus);
           }
      );
      return false;
    });
</script>
</head>

<body class="example">
   <form>
  <div id="tree3"></div>
   <div id="tree" name="selNodes">
    </div>

    <input type="submit" value="Send data">
 </form>
</body>
</html>
4

1 に答える 1

0

この記事では、Dynatree を使用して、フォームの投稿後に設定されたチェックボックスの値を取得する方法について説明します。

http://www.llakomy.com/articles/adding-dynatree-with-checkboxes-to-a-form/

値を取得したら、それらをデータベースに永続化できます。

于 2014-04-23T09:57:46.557 に答える