jquery - easyui データグリッドをレスポンシブにする方法は?

Question

easyui データグリッドをレスポンシブにすることは可能ですか?レスポンシブなデータグリッドまたは流動的なレイアウトを作成するにはどうすればよいですか?

Answer 1

以下に示すソリューションは、データグリッドが読み込まれる div に合わせて調整されます。

$(function(){
    /**
     * Extend the datagrid functionality
     */
    $.extend($.fn.datagrid.defaults, {
          width: getMainWidth()
    });
});
/**
 * Returns the width of <div id="Main">
 * This can be used by the datagrids during initialization 
 * on the attribute: width
 * @returns
 */
 function getMainWidth(){
    return $("#Main").width();  
 }

この時点で、データグリッドは全幅に拡張され<div id="Main"> ます。次は、調整可能な列幅です。したがって、これを達成するために、次のようにデータグリッドを定義できます

<table id="datagridID" style="display:none;">
<thead>
    <tr>
        <th data-options="field:'column1', width:adjustColumnWidth(0.18)">Column 1</th>
        <th data-options="field:'column2', width:adjustColumnWidth(0.16)">Column 2</th>
        <th data-options="field:'column3', width:adjustColumnWidth(0.32)">Column 3</th>
        <th data-options="field:'column4', width:adjustColumnWidth(0.05)">Column 4</th>
        <th data-options="field:'column5', width:adjustColumnWidth(0.08)">Column 5</th>
        <th data-options="field:'column6', width:adjustColumnWidth(0.05)">Column 6</th>
        <th data-options="field:'column7', width:adjustColumnWidth(0.05)">Column 7</th>
        <th data-options="field:'column8', width:adjustColumnWidth(0.11)">Column 8</th>
    </tr>
</thead>

adjustColumnWidth 関数のパラメータはパーセンテージであり、すべて加算すると 100% になります。

/**
 * This specifies a percentage width according to the #Main div
 * This is used during column initialization in order to set a percentage 
 * width.
 * eg:
 *   data-options="field:'docNumber', width:adjustColumnWidth(0.18)"
 *   sets a 18% width
 *    
 * @param percent
 * @returns {Number}
 */
function adjustColumnWidth(percent){  
    return getMainWidth() * percent;  
} 

データグリッドの初期化は通常どおりです。

var datagrid = $("#datagridID");
datagrid.show();
datagrid.datagrid({
    url: gridDataURL
});

Answer 2

レスポンシブ データ テーブルの優れた実装を次に示します。