easyui 的datagrid的自适应宽度的问题

$.fn.extend({

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

});
 }
});

$(function() {
 // datagrid数据表格ID
 var datagridId = ‘tt‘;

// 第一次加载时自动变化大小
 $(‘#‘ + datagridId).resizeDataGrid(0, 0, 0, 0);

// 当窗口大小发生变化时,调整DataGrid的大小

$(window).resize(function() {

$(‘#‘ + datagridId).resizeDataGrid(0, 0, 0, 0);

});
});

确保table的id为tt

还有一个方法是直接设置table的fit属性为true 前提是table的calss属性必须是easyui-datagrid

时间: 2025-01-23 23:43:50

easyui 的datagrid的自适应宽度的问题的相关文章

jQuery dategrid自适应宽度

我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化,目前我还没发现其自带此功能,因此简单写了一个实现方法,与网友们分享,也希望能够帮助有需要的朋友. 下面是我基于JQuery做的一个实现: Js代码   /** * JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作. */ $.fn.extend({ /** * 修改DataGrid对象的默认大小,以适应页面宽度. * * @param heightMargin *  

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

运用EasyUI中datagrid读取数据库数据实现分页

1dao层 package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Query; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.boot.registry.Standa

Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的datagrid的使用方法 在这里,datagrid的使用我不做过多讲解,俺毕竟是初学者,不敢班门弄斧.所以就简单带一下. ①.在easyui的layout中的center中定义一个table,id为"datagridTable". <div region="center"

easyui的datagrid整合struts2,以及Ajax,实现局部刷新功能,并设置分页的实现---------投票案例

========================================================================================================= 1.登陆功能- ----表单内容----------------------------------------------------- <pre name="code" class="java"><div class="log

easyUI中datagrid的使用

easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,html中主要是确定datagrid在网页中的位置,css来设置datagrid的样式,js填充datagrid数据. 一 html部分 示例代码如下: <div class="columntablebox" > <table id="columnTable&qu

JQuery EasyUI 之 DataGrid

1.动态创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: (1)页面上添加div标签 <div id="dataGrid"></div> (2)用js动态初始化: $(function () { $('#dataGrid').datagrid({ height: 340, url: '<%=path%>/AdminCenter/SysFunction/GetData

easyui datagird 列宽自适应

代码如下: 1 onLoadSuccess: function (data) { 2 var rows = data.rows; //得到行数据 3 var columnMaxCharacter = new Array(); //该列最大字符数 4 //遍历所有行数据,获得该列数据的最大字符数 5 var propertys = Object.getOwnPropertyNames(rows[0]); 6 for (var i = 0; i < rows.length; i++) { 7 for

EasyUI之dataGrid的行内编辑

1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量:当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源 6 iconCls: 'icon-save', //图标 7 pagination: true, //显