jQuery EasyUI データグリッド -カスタムビューの作成

状況によっては、データグリッド（datagrid）により柔軟なレイアウトを適用する必要があるかもしれません。ユーザーにとって、カードビュー（Card View）は良い選択肢です。このツールはデータグリッド（datagrid）内でデータを迅速に取得して表示できます。データグリッド（datagrid）のヘッダーでは、列ヘッダーをクリックするだけでデータを並べ替えることができます。このチュートリアルでは、カスタムカードビュー（Card View）の作成方法を紹介します。

カードビュー（Card View）の作成

データグリッド（datagrid）のデフォルトビューから継承することは、カスタムビューを作成する良い方法です。各行にいくつかの情報を表示するために、カードビュー（Card View）を作成します。

    var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
        renderRow: function(target, fields, frozen, rowIndex, rowData){
            var cc = [];
            cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
            if (!frozen){
                var aa = rowData.itemid.split('-');
                var img = 'shirt' + aa[1] + '.gif';
                cc.push('<img src="images/index.html' + img + '" style="width:150px;float:left">');
                cc.push('<div style="float:left;margin-left:20px;">');
                for(var i=0; i<fields.length; i++){
                    var copts = $(target).datagrid('getColumnOption', fields[i]);
                    cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
                }
                cc.push('</div>');
            }
            cc.push('</td>');
            return cc.join('');
        }
    });

データグリッド（DataGrid）の作成

次に、ビューを使用してデータグリッド（datagrid）を作成します。

    <table id="tt" style="width:500px;height:400px"
            title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"
            url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">
        <thead>
            <tr>
                <th field="itemid" width="80" sortable="true">Item ID</th>
                <th field="listprice" width="80" sortable="true">List Price</th>
                <th field="unitcost" width="80" sortable="true">Unit Cost</th>
                <th field="attr1" width="150" sortable="true">Attribute</th>
                <th field="status" width="60" sortable="true">Status</th>
            </tr>
        </thead>
    </table>    

    $('#tt').datagrid({
        view: cardview
    });

view 属性を設定し、その値をカードビューに設定していることに注意してください。

jQuery EasyUI サンプルをダウンロード

jeasyui-datagrid-datagrid16.zip