Question

我想显示一个动态表，其中包含来自自定义搜索的记录。

现在我想将表格行设为内联可编辑行。

我还需要对表进行分页，因为我需要在同一个表上显示30到40个表列（滚动列）。

我使用Handsontable来实现这一点，如下图所示，但是，图像不会像我在表格单元格中输入一样。

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Scroll - Handsontable</title>

  <script data-jsfiddle="common" src="handsontable.full.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="handsontable.full.css">
</head>
<body>
      <div id="example1" style="width: 700px; height: 400px; overflow: auto">
       <table id="example" class="row-border hover order-column" cellspacing="0" style="Display: none;" >
        <thead>
            <tr>
                <th>Action</th>
                <th>ID</th>
                <th>Name</th>
                <th>Address</th>
            </tr>
        </thead>

        <tbody>
            <tr>
            <td><img src="edit.jpg" height="20" width="20"/></td>
            <td>1</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
        <td><img src="edit.jpg" height="20" width="20"/></td>
            <td>2</td>
            <td>test2</td>
            <td>test2</td>
            </tr>
        <tr>
        <td><img src="edit.jpg" height="20" width="20"/></td>
            <td>3</td>
            <td>test3</td>
            <td>test3</td>
            </tr>
        </tbody>
    </table>

  </div>
      <script data-jsfiddle="example1">
        var data=$('#example tr').map(function(tr){
        return [$(this).children().map(function(td){return $(this).text()}).get()]
        }).get()

        var
          example = document.getElementById('example1'),
          maximize = document.querySelector('.maximize'),
          maxed = false,
          resizeTimeout,
          availableWidth,
          availableHeight,
          hot1;

        hot1 = new Handsontable(example,{
          data: data,
//          colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
          rowHeaders: false,
          colHeaders: false,
          fixedColumnsLeft: 2,
          fixedRowsTop: 1,
          minSpareRows: 1,
          contextMenu: true
        });

        function calculateSize() {
          var offset;

          if (maxed) {
            offset = Handsontable.Dom.offset(example);
            availableWidth = Handsontable.Dom.innerWidth(document.body) - offset.left + window.scrollX;
            availableHeight = Handsontable.Dom.innerHeight(document.body) - offset.top + window.scrollY;

            example.style.width = availableWidth + 'px';
            example.style.height = availableHeight + 'px';
          }
        }
      </script>

</div>
</body>
</html>

Answer 1

从它的外观来看，你对Handsontable的定义是正确的。你在渲染后粘贴HTML还是Handsontable为你创建的？我不确定你是否知道但是你不需要在HTML中定义表格来实现这个目的。事实上，你不应该定义它。

如果这只是渲染的代码，你能详细说明你的意思吗？“我已经使用Handsontable实现了这个目标，但是我已经进入了表格单元格，但是图像还没有出现。”？哪些部分是错的，你需要改变什么？

Answer 2

试试这个：

cells : function (row, col, prop) { return { renderer: 'html' }; }

作为hot1定义中的一个选项。

如何将html转换为Handsontable哪个表还有html输入字段<table> </table>

2 个答案: