使用复选框

Question

我有一些复选框。

如果我选择其中2个，则会出现一个带有2节之间关系的自举模态。我想在复选框中添加第二个按钮，以便在我选择2个数据时可视化模态中的关系。

所以第一个按钮显示表格中的关系（这是有效的），第二个按钮显示关系。

我正在使用VisJS。

我的问题是我将数据存储在MySQL中，并且我使用PHP作为复选框，当我将节点放在数组中时，VisJS正在工作。

知道如何解决这个问题？或任何可视化的替代方案？

PHP复选框

while($row=mysqli_fetch_array($result2)) { ?>
    <tr>
        <td align="center"><input class="checkboxes" type="checkbox" name="case" data-user="<?php echo $row['conn'];?>" data-name="<?php echo $row['data1'];?>" data-name2="<?php echo $row['data2'];?>"></td>
        <td align="center"><?php echo $row['data1'];?></td>
    </tr>
<?php } ?>

这是我没有PHP的代码

＆＃13;

＆＃13;

$(function() {
  // cache jQuery objects that we will be re-using
  var checkBoxes = $("input[name=case]");
  var myModal = $("#myModal");

  // get all relationships i.e. key = name, value = connect or null
  var relations = {},
    users = {};
  checkBoxes.each(function() {
    relations[this.dataset.name] = this.dataset.connect;
    users[this.dataset.name] = this.dataset.user;
  });

  $('#checkBtn').click(function() {
    // get checked checkboxes
    var checkedBoxes = checkBoxes.filter(":checked");

    // validate first
    if (checkedBoxes.length !== 2) {
      alert("You must check 2 checkbox!");
      return false;
    }

    // build modal body
    var html = "<div class='table-responsive'><table class='table table-bordered'><tr><td><b>Name</b></td><td><b>Connect to</b></td><td><b>Description</b></td></tr>";

    var current = checkedBoxes[0].dataset.name, // start with
      end = checkedBoxes[1].dataset.name; // end with

    while (current) {
      html += "<tr><td>" + current + "</td>";

      // check if it is connected
      var next = relations[current];

      // if it is not connected, stop
      if (!next) {
        html = 'Not related';
        break;
      }

      // otherwise append HTML
      html += "<td>" + next + "</td><td>" + users[current] + "</td></tr>";

      // if it is the end, stop
      if (next === end) break;

      // start over using connected one
      current = next;
    }
    html += "</table></div>";

    // update modal
    myModal.find('.modal-body').html(html);

    // open the modal dynamically once it is ready
    myModal.modal('show');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Checkboxes -->
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Connect to</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td><input type="checkbox" name="case" data-name="Data1" data-connect="Data2" data-user="Description1"></td>
            <td>Data1</td>
            <td>Data2</td>
            <td>Description1</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="case" data-name="Data2" data-connect="Data3" data-user="Description2"></td>
            <td>Data2</td>
            <td>Data3</td>
            <td>Description2</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="case" data-name="Data3" data-connect="Data4" data-user="Description3"></td>
            <td>Data3</td>
            <td>Data4</td>
            <td>Description3</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="case" data-name="Data4"></td>
            <td>Data4</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Input button -->
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <input type="button" id="checkBtn" value="View" class="btn btn-info">
    </div>
  </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Title</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" id="modaldata">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果我选择data1和data4然后单击第二个按钮

，我想看起来像这样

＆＃13;

＆＃13;

function drawNetwork() {

  var nodes = [{
      id: 1,
      label: 'data1',
      shape: 'box'
    },
    {
      id: 2,
      label: 'data2',
      shape: 'box'
    },
    {
      id: 3,
      label: 'data3',
      shape: 'box'
    },
    {
      id: 4,
      label: 'data4',
      shape: 'box'
    }
  ];

  var edges = [{
      from: 1,
      to: 2,
      title: 'Description1',
      arrows: {
        to: true
      }
    },
    {
      from: 2,
      to: 3,
      label: 'Description2',
      font: {
        align: 'top'
      },
      arrows: {
        to: true
      }
    },
    {
      from: 3,
      to: 4,
      label: 'Description3',
      font: {
        align: 'top'
      },
      arrows: {
        to: true
      }
    }
  ];

  var container = document.getElementById('network-container');

  var data = {
    nodes: nodes,
    edges: edges
  };

  var width = 600;
  var height = 500;
  var options = {
    width: width + 'px',
    height: height + 'px',
    edges: {
      smooth: false
    },
    physics: false,
    interaction: {
      hover: true,
      dragNodes: true, // allow dragging nodes
      zoomView: false, // do not allow zooming
      dragView: false // do not allow dragging
    }
  };




  var network = new vis.Network(container, data, options);

}

$('#model4temp').on('shown.bs.modal', function() {
  drawNetwork();
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <input type="button" data-toggle="modal" data-target='#model4temp' value="View" class="btn btn-success btn-md">
    </div>
  </div>
</div>

<div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
        <div id="network-container" style="height:500px;width:600px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想要这样的东西吗？

var nodes = [];

var edges = [];

$(function() {
  var checkBoxes = $("input[name=case]");
  var myModal = $("#model4temp");

  var relations = {},
    users = {};
  checkBoxes.each(function() {
    relations[this.dataset.name] = this.dataset.connect;
    users[this.dataset.name] = this.dataset.user;
  });

  $('#checkBtn').click(function() {
    var checkedBoxes = checkBoxes.filter(":checked");

    if (checkedBoxes.length !== 2) {
      alert("You must check 2 checkbox!");
      return false;
    }

    var current = checkedBoxes[0].dataset.name,
      end = checkedBoxes[1].dataset.name;

    var id = 1;
    
    while (current) {
      
      nodes.push({id: id, label: current, shape: 'box'});

      var next = relations[current];

      if (!next) {
        html = 'Not related';
        break;
      }
      
      var label = users[current] || "";
      
      edges.push({from: id, to: id + 1, label: label,font: {align: 'top'}, arrows: {to: true}});

      if (next === end) {
        nodes.push({id: id + 1, label: next, shape: 'box'});
        break;
      }

      current = next;
      id++;
    }

    myModal.modal('show');
  });
});

function drawNetwork() {

  var container = document.getElementById('network-container');

  var data = {
    nodes: nodes,
    edges: edges
  };

  var width = 600;
  var height = 500;
  var options = {
    width: width + 'px',
    height: height + 'px',
    edges: {
      smooth: false
    },
    physics: false,
    interaction: {
      hover: true,
      dragNodes: true,
      zoomView: false,
      dragView: false
    }
  };
  nodes = [];
  edges = [];

  var network = new vis.Network(container, data, options);
}

$('#model4temp').on('shown.bs.modal', function() {
  drawNetwork();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Connect to</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td><input type="checkbox" name="case" data-name="Data1" data-connect="Data2" data-user="Description1"></td>
            <td>Data1</td>
            <td>Data2</td>
            <td>Description1</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="case" data-name="Data2" data-connect="Data3" data-user="Description2"></td>
            <td>Data2</td>
            <td>Data3</td>
            <td>Description2</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="case" data-name="Data3" data-connect="Data4" data-user="Description3"></td>
            <td>Data3</td>
            <td>Data4</td>
            <td>Description3</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="case" data-name="Data4"></td>
            <td>Data4</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Input button -->
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <input type="button" id="checkBtn" value="View" class="btn btn-info">
    </div>
  </div>
</div>


<div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
        <div id="network-container" style="height:500px;width:600px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>