【问题标题】:how to disable a particular column using handsontable in handsontable如何在handsontable中使用handsontable禁用特定列
【发布时间】:2013-11-16 05:27:03
【问题描述】:

如何使用handsontable 中的handsontable 禁用特定列。我希望第一列仅可编辑,其他三列被禁用。我对三列使用readonly true,但如何禁用它不起作用....

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

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

         },
         {}]

【问题讨论】:

    标签: handsontable


    【解决方案1】:

    在项目中我用这行代码来做。

     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

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        【解决方案3】:

        您的代码运行正常。请参阅与您类似的方法的 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/

        如果您遇到任何其他问题,请告诉我。

        【讨论】:

          【解决方案4】:

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

          使用以下版本解决了我的问题(以下是我在 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">
          

          【讨论】:

            猜你喜欢
            • 2017-03-08
            • 2014-07-05
            • 2017-01-17
            • 2014-04-22
            • 2013-09-16
            • 2013-07-03
            • 2016-04-12
            • 2016-04-03
            • 2018-06-06
            相关资源
            最近更新 更多