jquery easy ui datagrid 怎样设置宽度,让列永远百分之百填充

如题所述

fitColumns 参数设置为true可以达到你的要求,fit 参数可以让高度也自适应,这两个参数使用的前提是你放置grid的盒子有宽度和高度.

使用这个参数时也是要给columns设置width属性的,这时候的width相当于比例,如果width的值一样,则平均分配,如果有某一列width稍大,则该列在填充的时候也会稍微大一点。

PS:easyui的API是继承的,很多插件的属性都继承自父类,所以,如果你查看一个空间的api,但是没有找到合适的方法和属性,请查看它的父类的属性或方法。

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

温馨提示:内容为网友见解,仅供参考
第1个回答  2015-04-23
我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化,目前我还没发现其自带此功能,因此简单写了一个实现方法,与网友们分享,也希望能够帮助有需要的朋友。

下面是我基于JQuery做的一个实现:
Js代码 收藏代码
/**
* JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。
*/
$.fn.extend({
/**
* 修改DataGrid对象的默认大小,以适应页面宽度。
*
* @param heightMargin
* 高度对页内边距的距离。
* @param widthMargin
* 宽度对页内边距的距离。
* @param minHeight
* 最小高度。
* @param minWidth
* 最小宽度。
*
*/
resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {
var height = $(document.body).height() - heightMargin;
var width = $(document.body).width() - widthMargin;

height = height < minHeight ? minHeight : height;
width = width < minWidth ? minWidth : width;

$(this).datagrid('resize', {
height : height,
width : width
});
}
});

使用方法:
Js代码 收藏代码
$(function() {
var datagridId = 'userDataGrid';

// 其他代码

// 第一次加载时自动变化大小
$('#' + datagridId).resizeDataGrid(20, 20, 300, 600);

// 当窗口大小发生变化时,调整DataGrid的大小
$(window).resize(function() {
$('#' + datagridId).resizeDataGrid(20, 20, 300, 600);
});
});

在此补充一下,由于IE6下JS的执行效率很低,因此在让DataGrid自适应页面大小变化的时候,请将DataGrid的fitColumns属性设置为false,否则改变页面大小会导致IE出现一定时间的停顿。设置方法为:

$('#' + datagridId).datagrid({
title: '用户类型',
url: 'userType.json',
fitColumns: false,本回答被提问者和网友采纳
第2个回答  2016-02-15
请参考API(http://www.jeasyui.net/plugins/183.html)
fitColumns 参数设置为true可以达到你的要求,
fit 参数可以让高度也自适应,
这两个参数使用的前提是你放置grid的盒子有宽度和高度

使用这个参数时也是要给columns设置width属性的,这时候的width相当于比例,如果width的值一样,则平均分配,如果有某一列width稍大,则该列在填充的时候也会稍微大一点
PS:easyui的API是继承的,很多插件的属性都继承自父类,所以,如果你查看一个空间的api,但是没有找到合适的方法和属性,请查看它的父类的属性或方法
第3个回答  2016-01-26
不设置width属性,加上一个fixed设置为true.就可以自适应了。多看文档。
第4个回答  2016-01-11
在外层套一个div作为容器,设置宽度100%

easyui datagrid如何让高度充满整个框
你的datagrid的复div没有指定明确的高度,导致其fit:true后就你那样了。在你的的datagrid外面套一个div,div指定宽高为100%。如下图所示:

jquery Easy UI怎么让datagrid显示+号
下面这个是EasyUi的拓展 你需要下载datagrid-detailview.js这个JS ('#tt').datagrid({ title:'DataGrid - DetailView',width:500,height:250,remoteSort:false,singleSelect:true,nowrap:false,fitColumns:true,url:'datagrid_data.json',columns:[[{field:'itemid',title:'Item ID',width:80},{field...

...UI属性的easyui-datagrid的table,之后样式没了,怎么办
应该是动态加载进来的数据没有应用CSS,可以看下插件的文档,应该是有一句代码是让动态加载进来的数据也能应用上样式。load在加载中是加载了js,页面元素都加载完成了,动态修改元素后css是不会自己重载的,重新打开就有个重载的过程,css就应用上去了 ...

相似回答