EasyUi 表格自适应宽度
第一次接触EasyUi想要实现表格宽度自适应,网上找了好多文章,都没有实现,有网友实现了可是自己看不懂。可能是太简单高手都懒得分享,现在把自己的理解和实现记录一下,希望可以帮到向自己一样的菜鸟,步骤如下:
第一步,把table标签的属性“fitColumns”设置为“true”
第二步,经过第一步的设置后,此时给标题的td设置width属性,width的值此时设置为数字代表的就是宽度按百分比来设置,例如width:10,表示宽度为10%
代码如下:
<table class="easyui-datagrid" style="width:100%;"
data-options="singleSelect:true,collapsible:true,url:'demo/datagrid/datagrid_data1.json',method:'get',fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid',width:10">Item ID</th>
<th data-options="field:'productid',width:20">Product</th>
<th data-options="field:'listprice',width:10,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:10,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:40">Attribute</th>
<th data-options="field:'status',width:10,align:'center'">Status</th>
</tr>
</thead>
</table>
EasyUi 表格自适应宽度的更多相关文章
- 关于jqGrid组件表格无法自适应宽度问题
今天生成了一个4列的表格,但是无法自适应宽度,使用 $(window).resize(function(){ $(window).unbind("onresize"); $(&qu ...
- easyui panel自适应浏览器宽度
一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...
- 怎么设置table(表格)手机端自适应宽度
我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...
- easyui表格的增删改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS实现自适应宽度的Tag切换
效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...
- easyUI 表格
1.创建 <table id ="ID"></table> 2.属性 dategrid: columns 列的定义的数组 URl:访问远程数据的数组 [“t ...
- 设置表格td宽度
CSS布局,表格宽度不听使唤的实例.想把表格第一例宽度设为20,其他自适应.但CSS中宽度是等宽的.只设这一行也不起作用.但是在实际应用中总是等宽处理,并不按照样式来走. XML/HTML代码 & ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
随机推荐
- linux运维、架构之路-nfs网络文件系统
一.nfs介绍 NFS是Network File System的缩写,是网络文件系统,它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录,主要存储用户上传的图片附件等信息. ...
- vue-cli3热更新配置,解决热更新失败的问题,保存代码浏览器自动刷新
在vue,config.js中配置css热更新 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) css: { ...
- Spring——IOC与Bean容器
[IOC] (1)IOC:控制反转,控制权的转移,应用程序本身不负责依赖对象的创建和维护,而是由外部容器负责创建和维护.也就是说由IOC容器在运行期间,动态地将某种依赖关系注入到对象之中 (2)DI: ...
- ZeroMQ的进阶
上一篇博文我们对ZeroMQ的经典模式做了写Demo让他跑起来了,但实际开发中我们可能面临一些远比上述复杂的场景.这时候我们需要进一步的对经典模式进行扩展,所幸ZeroMQ已经为我们做好了准备工作. ...
- 约数定理(two)
筛约数个数和 理论基础: 1.对n质因数分解,n=p1^k1 * p2^k2 * p3^k3 …… 则n的约数个数为(k1+1)*(k2+1)*(k3+1)…… 2.线性筛素数时,用i和素数pj来筛掉 ...
- 【bzoj3343】教主的魔法
*题目描述: 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.…….N. 每个人的身高一开始 ...
- 动态GI
在Engine/Config 目录中找到ConsoleVariables.ini并打开,在其中加入 r.LightPropagationVolume = 1 ,保存,重启引擎 如果场景中有Post P ...
- 大数据笔记(五)——HDFS的高级特性
一.HDFS的回收站: recyclebin 1.HDFS的回收站默认是关闭的 2.启用回收站:去core-site.xml配置 路径:/root/training/hadoop-2.7.3/etc/ ...
- 北风设计模式课程---单一职责原则(Single Responsibility Principle)
北风设计模式课程---单一职责原则(Single Responsibility Principle) 一.总结 一句话总结: 一个类应该有且只有一个变化的原因:单一职责原则(SRP:Single Re ...
- ListView 九宫格布局实现
1.效果图 2.数据 SettingData.json { "data": [{ "icon":"setting", "title ...