jExcelでセルをReadOnly（リードオンリー）にする方法

JavascriptでExcel風の表が書けるライブラリ「jExcel」ですが、セルをReadOnly（リードオンリー・変更不可）にすることができます。

今回はその方法を解説します。

jExcelでセルをReadOnly（リードオンリー）にする
まとめ

jExcelでセルをReadOnly（リードオンリー）にする

jExcelでセルをReadOnly（リードオンリー）にするには「columns」に「readOnly」プロパティを設定して実現します。

具体的には以下のようになります。

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <script src="https://bossanova.uk/jexcel/v4/jexcel.js"></script>
    <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
    <link rel="stylesheet" href="https://bossanova.uk/jexcel/v4/jexcel.css" />
    <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" />
    <script>
        $(function(){
            const data = [
                           [ 100, 200, 300, 400, 500 ]
                          ,[ 300, 400, 500, 600, 700 ]
                         ] ;
            jexcel( document.getElementById( "jexcel_table" ),
                        {
                             data: data
                            ,columns:[
                                   { title:"カラム１", width:300                }
                                  ,{ title:"カラム２", width: 80, readOnly:true }
                                  ,{ title:"カラム３", width:100                }
                                  ,{ title:"カラム４", width:100, readOnly:true }
                                  ,{ title:"カラム５", width:100, readOnly:true }
                                 ]
                        }
           ) ;
        });
    </script>
</head>
<body>
    <div id="jexcel_table"></div>
</body>
</html>

ReadOnly（リードオンリー）にしたいセルの「readOnly:true」にします。

上記のソースをブラウザーで表示すると

のように指定したセルがReadOnly（リードオンリー）になっています。

まとめ

jExcelでセルをReadOnly（リードオンリー）に設定するには「columns」に「readOnly:true」を設定して行います。

以上、jExcelでセルをReadOnly（リードオンリー）にする方法でした。