easyui-layout布局高度自适应
发布时间
阅读量：
阅读量
动态加载datagrid数据
| $("#dg_center").datagrid({
url: ''/AJAX/EasyUiListComm.ashx',
fit: true, //datagrid高度是否自适应
nowrap: true, //是否只显示一行，即文本过多是否省略部分
striped: true,
border: false,
pagination: true,
pageSize: 20,
pageList: [20, 30, 40, 50, 100, 500],
pageNumber: 1,
checkOnSelect: false,
selectOnCheck: false,
singleSelect: true,
rownumbers: false,
idField: 'Id',
columns: [[
{ checkbox: true, field: 'Id', },
| { title: '标题', field: 'Title', sortable: true, width: 200 }, ]],}); |
|---|
| 如果layout布局中加入了form标签，则需在样式中写入一个固定高度，否则页面上将显示不出来 |
|---|
|
|最终效果如图：
大家实践后可以看到这样布局下来的高度不能自动将页面填满，而且高度固定后当内容再继续增加时会有滚动条出现，并不能达到美观的效果。再此基础上我们再添加属性data-options="fit:true"，浏览器宽度变化时，datagrid的宽度能够自动变化添加属性
| 如果去掉form标签后，只需加上属性data-options="fit:true" 即可使datagrid的宽高自动根据浏览器大小填满，并且，加上属性border:false可以完全填满 |
|---|
|
|效果如图：
全部评论 (0)
还没有任何评论哟~