是否可以使easyui datagrid响应?我们如何创建响应式数据网格或流体布局?
答案 0 :(得分: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
});
答案 1 :(得分:0)
答案 2 :(得分:0)
我还没有看到easyui datagrid的响应。 但Easyui拥有数据网格和移动设备的其他组件。 http://www.jeasyui.com/demo-mobile/main/index.php?plugin=DataGrid&theme=metro-gray&dir=ltr&pitem=