1

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

4

3 回答 3

2

下面给出的解决方案会根据加载数据网格的 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
});
于 2014-07-16T08:12:01.493 回答
0

这是响应式数据表的一些不错的实现

于 2013-04-13T01:57:30.560 回答
0

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

于 2014-06-03T04:37:28.863 回答