Question

我刚刚开始使用带有JSON数据的handontable并且它工作得很好但是我需要禁用所有表输入到某些用户（只读视图）。

有没有办法完全禁用手势，所以没有任何输入响应，删除行插件不起作用？我尝试了http://dougestep.com/dme/jquery-disabler-widget-demos似乎不起作用，而http://malsup.com/jquery/block/#element可以正常工作，但它实际上会在控件上创建一个iframe叠加层，并且使用removerow插件时，位置设置不正确。

Answer 1

完全＆＃34;禁用＆＃34;一个Handsontable我做了以下几点：

hot.updateSettings({
    readOnly: true, // make table cells read-only
    contextMenu: false, // disable context menu to change things
    disableVisualSelection: true, // prevent user from visually selecting
    manualColumnResize: false, // prevent dragging to resize columns
    manualRowResize: false, // prevent dragging to resize rows
    comments: false // prevent editing of comments
});

Answer 2

您可以使用 updateSettings

执行此操作

var hot = $("#exampleGrid").handsontable('getInstance');
hot.updateSettings({
        readOnly: true
    });

检查以下链接： http://jsfiddle.net/Hn3Zv/

Answer 3

在jExcel插件中，您可以在初始化中设置editable：false。

<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/numeral.js/2.0.6/numeral.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.jdropdown.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.jdropdown.min.css" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/excel-formula.min.js"></script>

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

<script>
data1 = [
    ['US', 'Cheese', 'Yes', '2019-02-12'],
    ['CA;US;UK', 'Apples', 'Yes', '2019-03-01'],
    ['CA;BR', 'Carrots', 'No', '2018-11-10'],
    ['BR', 'Oranges', 'Yes', '2019-01-12'],
];

$('#my1').jexcel({
    data:data1,
    colHeaders: [ 'Product Origin','Description', 'Stock', 'Best before' ],
    colWidths: [ 300, 200, 100, 100 ],
    columns: [
        { type: 'dropdown', url:'/jexcel/countries', autocomplete:true, multiple:true }, // Remote source for your dropdown
        { type: 'text' },
        { type: 'dropdown', source:['No','Yes'] },
        { type: 'calendar' },
    ],
    style:[
        { A1: 'background-color: orange; ' },
        { B1: 'background-color: orange; ' },
        { C1: 'background-color: orange; ' },
        { D1: 'background-color: orange; ' },
    ],
    editable:false,
});
</script>
</html>

更多示例：

https://bossanova.uk/jexcel

完全禁用掌上电脑

3 个答案: