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

記事内に広告が含まれています。

JavascriptでExcel風の表が書けるライブラリ「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:"カラム1", width:300                }
                                  ,{ title:"カラム2", width: 80, readOnly:true }
                                  ,{ title:"カラム3", width:100                }
                                  ,{ title:"カラム4", width:100, readOnly:true }
                                  ,{ title:"カラム5", width:100, readOnly:true }
                                 ]
                        }
           ) ;
        });
    </script>
</head>
<body>
    <div id="jexcel_table"></div>
</body>
</html>

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

上記のソースをブラウザーで表示すると
jExcelでセルをリードオンリーにする
のように指定したセルがReadOnly(リードオンリー)になっています。

まとめ

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

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

スポンサーリンク
スポンサーリンク
【PR】
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
タイトルとURLをコピーしました