jQuery EasyUI データ グリッド - チェックボックスの追加

この例では、チェック ボックス列をデータ グリッド (DataGrid) に配置する方法を示します。チェックボックスを介して、ユーザーはグリッド行データをチェック/チェック解除するオプションを利用できます。

チェックボックス列を追加するには、列のチェックボックス プロパティを追加して true に設定するだけです。コードは次のようになります。

    <table id="tt" title="チェックボックス選択" class="easyui-datagrid" style="width:550px;height:250px" url="data/datagrid_data.json" idField="itemid" pagination=" 
            true 
            " 
            iconCls="icon-save"> 
        <thead> 
            <tr> 
                <th field="ck"checkbox="true"></th> 
                <th field="itemid" width="80">アイテム ID</th> 
                <th field="productid" width="80">製品 ID</th> 
                <th field="listprice" width="80" align="right">定価</th>
                <th field="unitcost" width="80" align="right">単価</th> 
                <th field="attr1" width="100">属性</th>
                <th field="status" width="60" align="center">ステータス</th> 
            </tr >
        </thead> 
    </table>

上記のコードは、チェックボックス属性を持つ列を追加するため、チェックボックス列になります。idField プロパティが設定されている場合、DataGrid の選択コレクションは別のページに保持されます。