`

jquery easyui datagrid 列自适应窗口宽度

阅读更多

easyui datagriad 框架 在做列自适应时可以采取以下步骤:

    1. fitColumns: true,/*自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动*/

          使之保持与父类宽度相同

   2.设置列宽为百分比

field:'opt',title:'操作',width:$(this).width() * 0.2,align:'center', rowspan:2,

    将width的值设为百分比,这里是20%,诸位可以根据自己的实际情况做适当调整。

   3. 监听浏览器宽度变化,调整datagrid尺寸和布局

    

                              $(window).resize(function(){
		$('#tt').datagrid('resize');
		});	

    经过以上三步即可达到预期效果~~

 

 

分享到:
评论
1 楼 yujian58 2013-08-14  
写得很好。

相关推荐

    easyui datagrid标题列宽度自适应

    当窗口大小变化时,调用这个方法可以使datagrid自适应新的窗口尺寸。 4. **列属性设置**:在定义datagrid的列时,可以设置`width`属性为`auto`,让其自动根据内容调整宽度。 5. **自定义插件**:如果EasyUI默认的...

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    总的来说,实现EasyUI数据表格列宽自适应内容宽度的过程涉及到对数据表格的遍历、对文本内容的长度计算、列宽的动态设置以及对列宽调整功能的冻结。通过这些步骤,我们可以确保数据表格的列宽能够恰当地展示内容,...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    如何让easyui gridview 宽度自适应窗口改变及fitColumns应用

    首先,`fitColumns`是EasyUI datagrid的一个配置选项,当设置为`true`时,它会使表格的所有列宽度自动填充整个表格宽度,从而达到列宽自适应的效果。例如,你可以这样设置: ```javascript $('#gvManage').datagrid...

    jquery-easyui-datagrid

    2. **配置选项**: `options` 中常见的参数有 `columns`(定义列)、`url`(数据源地址)、`pagination`(是否开启分页)、`fit`(是否自适应容器宽度)等。 3. **数据绑定**: 通过 `loadData` 方法或者在初始化时...

    jQuery EasyUI 1.5.1 中文API文档 帮助手册 chm pdf demo

    - **组件(Widgets)**:jQuery EasyUI 提供了一系列组件,如 DataGrid(数据网格)、Tree(树形控件)、Panel(面板)、Window(窗口)、DatePicker(日期选择器)等,这些组件大大增强了Web应用的交互性。...

    EasyUI布局 高度自适应

    EasyUI 是一款基于 jQuery 的 UI 框架,它提供了丰富的组件和美观的界面设计,使得开发者能够快速构建用户友好的 Web 应用程序。在本文中,我们将深入探讨 EasyUI 中的高度自适应布局(Height Auto-adaptation)及其...

    jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发的复杂性,提供了大量的可重用组件,如对话框、表格、菜单、表单等。1.5.1 版本是该框架的一个稳定版本,包含了之前版本的改进和新特性。 **...

    JQuery+easyUI实例

    **jQuery和EasyUI简介** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...提供的JQueryEasyUI实例下载将是一个很好的实践平台,帮助开发者深入理解和运用这两个库。

    使用jquery的datagrid经常遇到的问题

    设置 `fitColumns` 为 `true` 可以让 Datagrid 的列宽自适应容器宽度。 #### 三、总结 通过上述介绍,我们了解了在使用 `jQuery Datagrid` 时可能遇到的一些常见问题及其解决方案。正确处理这些问题不仅能够提高...

    Jquery EasyUI Frame Wanglim V1.0

    Jquery EasyUI Frame Wanglim V1.0是一款专为初学者设计的Web界面框架,它充分利用了EasyUI的功能,实现了页面自适应布局,以及对多种组件的有效整合,如Plan、datagrid、easyui-layout和tree等,大大简化了Web应用...

    jquery easyui1.2.5和帮助文档

    **jQuery EasyUI 1.2.5:框架详解与应用指南** jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了丰富的用户界面组件,简化了HTML页面的交互性和外观设计。1.2.5 版本是这个框架的一个稳定版本,包含了一...

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    datagrid:允许用户设置百分比宽度的列(该功能真是千呼万唤始出来啊 ); form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是...

    jQuery EasyUI 1.4.1和EXTension API 中文chm版

    jQuery EasyUI 和 EXTension 是两种广泛使用的前端开发框架,它们为开发者提供了丰富的组件和API,以简化Web应用程序的创建过程。下面将详细讲解这两个框架的主要特点、核心组件以及API的使用。 **jQuery EasyUI** ...

    jQuery EasyUI 1.5.1 版 API 中文版(pdf+chm+exe) + demo+demo mobile

    - **EasyUI**:基于jQuery,提供了一系列预先封装好的UI组件,如`datagrid`(数据网格)、`dialog`(对话框)、`tabs`(选项卡)、`form`(表单)等,使得页面布局和交互变得更加简单。 2. **API 文档** - **PDF*...

    Jquery EasyUI 1.4版本官方开发包+中文版API开发文档

    表头定义了各列的显示字段、宽度、对齐方式和格式化函数。 总结而言,jQuery EasyUI 1.4版本为前端开发者提供了一套完整的、易于使用的工具集,大大降低了开发复杂UI的难度,同时也提供了中文文档以便更好地服务于...

    jquery-easyui-1.3.5 源码

    `jQuery EasyUI` 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者能够快速构建出美观、交互性强的Web应用。`1.3.5` 是这个框架的一个版本,我们接下来将深入探讨其核心概念、主要功能以及...

    jquery-easyui-1.3.3

    《jQuery EasyUI 1.3.3:打造高效前端界面》 jQuery EasyUI 是一个基于 jQuery 的开源前端框架,它为开发者提供了丰富的组件和便捷的API,极大地简化了Web界面的开发过程。EasyUI 提供了一套完整的用户界面解决方案...

    jquery-easyui-1.8

    《jQuery EasyUI 1.8 实现样例详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列轻量级、易于使用的组件,以帮助快速构建功能丰富的 Web 应用程序。EasyUI 的核心思想是通过简单的 HTML ...

Global site tag (gtag.js) - Google Analytics