Question

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

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

以下是responsive data tables

的一些不错的实现

Answer 3

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

如何让easyui datagrid响应？

3 个答案: