如何使easyui数据网格响应？答案

【问题标题】：how to make easyui datagrid responsive?如何使easyui数据网格响应？
【发布时间】：2013-03-23 11:09:36
【问题描述】：

是否可以让 easyui 数据网格响应式？我们如何创建响应式数据网格或流体布局？

【问题讨论】：

“响应式”是什么意思？
"responsive" 意味着我希望它在调整浏览器大小时自动调整大小。

标签： jquery user-interface responsive-design jquery-easyui

【解决方案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;  
}

datagrid初始化照常进行：

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

【讨论】：

【解决方案2】：

以下是responsive data tables 的一些不错的实现

【讨论】：

感谢您的链接，但我想让简单的 ui 数据网格成为响应式的。

【解决方案3】：

我还没有看到 easyui 数据网格响应。但 Easyui 有数据网格和其他移动组件。 http://www.jeasyui.com/demo-mobile/main/index.php?plugin=DataGrid&theme=metro-gray&dir=ltr&pitem=

【讨论】：