如何讓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 
});