Question

我正在使用FOOTABLE创建工作板。我想添加的是一个复选框选项，用于选择作业（行），以便用户可以一次将cv发送到多个作业。有关如何在现有表中实现此功能的任何想法？简单的例子：

<table class="footable  toggle-arrow" data-page-size="20" >
<thead>
    <tr>
        <th><!--select option id col--></th>
        <th><span>Job Description</span></th>
        <th><span>Area</span></th>
        <th><span>Number</span></th>
        <th><!--TYPE--></th>
        <th><!--SEND--></th>
    </tr>
</thead>
<tbody>
        <tr><!---JOB-->
        <td><input type="checkbox" value="id"></td>
        <td>job description value</td>
        <td>area value</td>
        <td>job number</td> 
        <td data-value="4566">4566</td>
        <td data-value="3"><img title="hot" src="vip.png" /></td>
        <td></td>
        </tr><!---END JOB-->

</tbody>

谢谢！

Answer 1

以下是一种快速举例说明：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <a id="sendSelectedButton" href="#">Send Selected</a>
  <table id="theTable">
    <thead>
      <tr>
        <th></th>
        <th>Description</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>Job 1</td>
        <td><a href="#">send</a>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>Job 2</td>
        <td><a href="#">send</a>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>Job 3</td>
        <td><a href="#">send</a>
        </td>
      </tr>
    </tbody>
  </table>
  <script>
    function sendRows(rows) {
      if (rows === undefined ||
        rows === null ||
        rows.length === 0)
        return;

      //Do stuff to send rows here.  
    }

    $(document).ready(function() {
      $("#sendSelectedButton").on("click", function() {
        var checkRows = $("#theTable").find("tbody tr").has("input:checked");
        sendRows(checkRows);
      });

      $("table").on("click", "tr a", function() {
        var row = $(this).parents("tr");
        sendRows(row);
      });
    });
  </script>
</body>
</html>

这是一个使用相同代码的插件：http://plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx

我没有在这里添加任何Footable，因为似乎Footable不会以这种或那种方式影响它。

我认为随着您的应用程序的成熟，您会发现事情会变得更加复杂。我建议你看看某种类型的数据绑定。我个人使用Knockout.js。即使您不决定使用Knockout.js，我认为他们的教程非常酷。（http://knockoutjs.com/index.html）

足部2选择行

1 个答案: