Question

我正在为一个项目使用两个精彩的jQuery插件：

此日期/时间选择器：https://github.com/xdan/datetimepicker
此HTML表编辑器：https://github.com/mindmup/editable-table

他们分开工作很好但不幸的是他们彼此不兼容。当我想更新HTML表格中的日期时，当我点击日期/时间时，日历会显示和关闭，但表格单元格中的值不会更新（并且Chrome的javascript控制台不会报告任何错误消息）。你知道一个解决方案或解决方法吗？您可以使用以下代码自行快速测试：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
    <head>
        <title>Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src='http://mindmup.github.io/editable-table/mindmup-editabletable.js'></script>
        <link href='http://xdsoft.net/scripts/jquery.datetimepicker.css' rel='stylesheet' type='text/css' />
        <script src='http://xdsoft.net/scripts/jquery.datetimepicker.js'></script>
        <script>
            $(function() {
                $('table').editableTableWidget();
                $('.picker').datetimepicker({ format:'Y-m-d H:i' });
            });
        </script>
    </head>
    <body>
        <p>The date/time picker works perfectly:</p>
        <input class='picker' />
        </br></br>
        <p>But not in the table below:</p>
        <table style='border:1px solid black'>
            <tr><td class='picker'>2014-08-22 15:00</td></tr>
            <tr><td>However no problem for text, i.e. just here!</td></tr>
        </table>
    </body>
</html>

这两个插件可以一起工作真是太棒了。谢谢！

皮尔

Answer 1

当我在寻找能够做你想做的事情的时候，我找到了你的问题。我没有找到它，因此修改了mindmup解决方案，将其扩展为包含几种不同的编辑方法。我最终得到的是：

常规文字。
日期，使用bootstrap-datepicker。
值文本，这是我的应用程序特有的内容，用户可以输入带或不带逗号的整数，并用逗号显示。
数字，使用<input type="number">元素作为整数。
选择。这些有点棘手，但基本上你提供了一个javascript关联数组，代码使用data-edit-source属性来查找数组。

git repository上有一个例子。我把代码放在这里，但我很懒，并且不想解释它。对于那个很抱歉。如果您下载代码，index.html文件中会有一个演示。

表格如下：

<table id="secondDemo" class="table table-striped">
  <thead><tr>
    <th>Location</th>
    <th>Expires</th>
    <th>Count</th>
    <th>Value</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Adelaide</td>
      <td data-edit-type="date">24-Jan-2015</td>
      <td data-edit-type="ntext">8</td>
      <td data-edit-type="vtext">5,000</td>
    </tr>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Brisbane</td>
      <td data-edit-type="date">25-Jan-2015</td>
      <td data-edit-type="ntext">8</td>
      <td data-edit-type="vtext">15,000</td>
    </tr>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Melbourne</td>
      <td data-edit-type="date">26-Jan-2015</td>
      <td data-edit-type="ntext">9</td>
      <td data-edit-type="vtext">8,000</td>
    </tr>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Sydney</td>
      <td data-edit-type="date">27-Jan-2015</td>
      <td data-edit-type="ntext">6</td>
      <td data-edit-type="vtext">9,000</td>
    </tr>
  </tbody>
</table>

...并且所需的javascript如下所示：

var locations = {
    'Adelaide': 'Adelaide - South Australia',
    'Brisbane': 'Brisbane - Queensland',
    'Canberra': 'Canberra - Australian Capital Territory',
    'Darwin': 'Darwin - Northern Territory',
    'Hobart': 'Hobart - Tasmania',
    'Melbourne': 'Melbourne - Victoria',
    'Perth': 'Perth - Western Australia',
    'Sydney': 'Sydney - New South Wales'
};
$('#secondDemo').editableTableWidget();

希望这有帮助。

Answer 2

可编辑表格小部件会创建隐藏的新<input/>，并在用户点击该字段时显示。为了让datetimepicker能够处理这些字段，您必须告诉可编辑表将picker类添加到输入中：

$(function() {
    $('table').editableTableWidget({editor: $('<input class="picker"/>')});
    $('.picker').datetimepicker({ format:'Y-m-d H:i' });
});

DEMO Here

编辑：我刚刚意识到这不会以你想要的方式运作。查看代码，可编辑表仅创建一个用于所有表格单元格的隐藏输入框。因此，只有当您希望所有表格单元格都是日期选择器时，这才有效。

Answer 3

作为一种解决方法，我只是调整了你的小提琴：Fiddle

进行以下更改：

$(function () {
  $('table').editableTableWidget();
  $('.picker').datetimepicker({
    format: 'Y-m-d H:i'
  });
  $('.pickertwo').datetimepicker({
    format: 'Y-m-d H:i'
   });
   $(".pickertwo").on("change", function () {
    var textVal = $(this).val();
    $(".textpick").text(textVal);
   });
   $(".pickTwo").on("click", function () {
    $(".pickertwo").focus();
   })
});

标记更改：

<input class='picker' /> 
<table style='border:1px solid black' class="pickTwo">
<tr>
    <td class='textpick'></td>
</tr>
<tr>
    <td>However no problem for text, i.e. just here!</td>
</tr>
</table>
<input class='pickertwo' />

问题是隐藏第二个日期选择器 - 设置display: none;或visibility: hidden;将禁用该功能。也许您可以为第二个输入设置一个低z-index值，并将其隐藏在与您要实现它的页面匹配的图像后面，并为此图像设置更高的z-index。

使datetimepicker与editable-table一起使用

3 个答案: