Question

如何在handsontable中使用handsontable禁用特定列。我想要第一列只能编辑其他三列得到禁用。我使用readonly true为三列但是它不起作用如何禁用....

     columns: [
              {
     type:'handsontable',
     handsontable: {

      colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
      data: manufacturerData,
      columns:[{},{readOnly: true},
          {
         readOnly: true
            },
          {
        readOnly: true
          }]
         }

         },
         {}]

Answer 1

在Project中，我使用这行代码。

 cells : function(row, col, prop) {
                var cellProperties = {};

                if (col > 0) {
                    cellProperties.readOnly = true;
                }
                else
                {
                    cellProperties.readOnly = false;
                }

                return cellProperties;
            }

您可以在给定链接上找到它的工作示例。但举个例子是将行设置为只读。 http://handsontable.com/demo/conditional.html

Answer 2

您的代码运行正常。请参阅JSFiddle，其方法与您类似。

$("#test").handsontable({
    startRows: 1,
    startCols: 1,
    rowHeaders: true,
    colHeaders: true,
    minSpareCols: 0,
    minSpareRows: 0,
    contextMenu: false,
    fillHandle: false,
    outsideClickDeselects: false,
    removeRowPlugin: false,
    currentRowClassName: 'currentRow',
    currentColClassName: 'currentCol',
    columnSorting: true,
    colHeaders: ['Col1','Col2','Col3','Col4'],
    columns: [{},
              {readOnly: true}, 
              {readOnly: true},
              {readOnly: true}]
  });

工作链接：http://jsfiddle.net/rvd61fuy/

如果您面临任何其他问题，请告诉我。

Answer 3

要禁用，您可以将单元格/列设置为只读，甚至可以将背景颜色设置为灰色（以产生特殊效果）。方法即使用readonly的方法：初始化时的列声明中为true handsontable以及你使用单元格属性和使用条件确定是否需要将单元格设置为只在表格渲染时才能读取的方法，这两种方法似乎都适合我。你需要正确实例化你的HOT，可能是问题所在。此外，当使用单元格属性时，您不需要使用cellProperties.readOnly = false，因为默认情况下单元格不是只读的，除非您已单独编码。如果您需要进一步的帮助，请告诉我。

Answer 4

同时检查您是否拥有最新版本的handsontable。我试图在具有不稳定结果的复选框列的单元格上实现readonly时遇到了问题。

使用以下版本解决了我的问题（以下是我在HTML页面中使用的内容）

<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

Answer 5

考虑到他们放弃了免费版本，还有一个与handsontable非常兼容的选择。但是，您可以为表中的任何TD设置class =“ readonly”。就是这样。

https://bossanova.uk/jexcel/examples/using-a-calendar-column-type

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jcalendar.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jcalendar.min.css" type="text/css" />

<div id="my"></div>

<script>
data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Model', 'Date', 'Price', 'Date'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'numeric', readOnly:true },
        { type: 'numeric', readOnly:true },
        { type: 'calendar', options: { format:'DD/MM/YYYY' } },
    ]
});
</script>
</html>

如何在handsontable中使用handsontable禁用特定列

5 个答案: