jQuery EasyUI データ グリッド - ツールバーの追加

この例では、ツールバー (toolbar) をデータ グリッド (datagrid) に追加する方法を示します。

データ グリッド (DataGrid) を作成する

    <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url= 
            "data/datagrid_data.json" 
            title="ツールバー付きデータグリッド" iconCls="icon-save" 
            toolbar= "#tb"> 
        <thead> 
            <tr> 
                <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="150">属性</th> 
                <th field="status" width="60" align="center">ステータス</th> 
            </tr> 
        </thead>
    </table> 
    <div id="tb"> 
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:alert('Add')" >追加</a> 
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" οnclick="javascript:alert('Cut')">カット</a> 
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:alert('Save')">保存</a> 
    </div>

javascript コードを記述する必要はありません。ツールバー (ツールバー) を「ツールバー」プロパティを介してデータグリッド (データグリッド) に接続するだけです。