如何让easyui datagrid响应？

Question

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

Answer 1

这里是responsive data tables

Answer 2

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

Answer 3

下面给出的解决方案进行调整，以使数据网格中加载的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 
});