从模态

时间：2018-05-18 15:22:24

标签： javascript jquery html bootstrap-modal

如何从模式中删除文字？我做了一个模块，显示了2个复选框之间的关系。如果我放myModal.find('.modal-body').text("Not related");并选择2个彼此没有连接的数据，则模态显示它们不相关。但是，如果我选择2彼此连接，模态显示它们也不相关。但我想打印＆＃34;不相关＆＃34;当数据没有相互连接时。我怎么解决这个问题？

我的代码

＆＃13;
＆＃13; 
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 not related
      if (!next) {
        // Update modal
        //myModal.find('.modal-body').text("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();
});
＆＃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-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"></td>
            <td>Data2</td>
            <td></td>
            <td></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>Description2</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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

有两个问题：

  • 即使没有关系，你也在画网络。如果没有关系，我使用全局related布尔值来绘制网络。
  • 通过myModal.find('.modal-body').text("Not related");，您正在删除#network-container。因此，如果您尝试绘制另一个网络，则会因为没有容器而出现错误。

我修复了两个： - 添加包含“不相关”消息的#message范围 - 在没有关系时显示#message并隐藏#network-container - 隐藏#message并在有关系时显示#network-container 

var nodes = [];

var edges = [];
var related = false;

$(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 not related
      if (!next) {
        // Update modal
        myModal.find('#message').show();
        myModal.find('#network-container').hide();
        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'});
        myModal.find('#message').hide();
        myModal.find('#network-container').show();
        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"></td>
            <td>Data2</td>
            <td></td>
            <td></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>Description2</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">
        <span id="message">Not related</span>
        <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>

相关问题
最新问题