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的.效 ...
随机推荐
- Excel: assign label to scatter chart using specific cell values
ref: https://www.get-digital-help.com/custom-data-labels-in-x-y-scatter-chart/ Improve your X Y Scat ...
- linux运维、架构之路-Git+Jenkins实现自动化部署
一.Jenkins介绍 jenkins是一个用JAVA编写的开源的持续集成工具,运行在servlet容器中,支持软件配置管理(SCM)工具,可以执行基于APACHE ANT和APAC ...
- VGA驱动时序说明
根据不同的显示器分辨率,需要不同的刷新频率. 其中显示模式中@60表示显示器1秒钟刷新60帧. 其中时钟(MHz),表示FPGA输出给显示器的时钟频率.需要我们配置PLL的时钟频率为对应频率. 其中行 ...
- minilzo使用流程
/* testmini.c -- very simple test program for the miniLZO library This file is part of the LZO real- ...
- Dmango cxrf 自定义分页 缓存 session 序列化 信号量 知识点
参考https://www.cnblogs.com/wupeiqi/articles/5246483.html
- SpringBoot属性配置-第三章
1.application.yml配置#自定义参数对象book: name: A id: 1 page: 100 2.创建实体类: /** * @Auther: youqc * @Date: 2018 ...
- 全球DC主机交流
全球DC主机交流https://www.globaldc.cn/ 全球DC主机交流论坛是一个综合性的国内服务器.国外服务器.高防清洗.硬件服务器交流论坛,主要为网友提供IP地址鉴定主机商,全球独立服务 ...
- Day3 01 枚举
枚举:关键字 enum 主要为了限定了选择范围,声明了一组相关的值类型的集合. 1.枚举类型,实质上是整整 2.如果不进行赋值操作,枚举类型从0开始递增. 3.枚举不能定义字段 属性 方法. 例如 ...
- optistruct线性求解一次二次单元应力位移比较
通过分析比较10mm.5mm.3mm.1mm的网格模型, 网格越细密: 位移与应力均趋于恒定值(收敛): 一次与二次单元的应力区域一致: 一次与二次单元的位移相差11.3%,一次单元的位移小. 所用的 ...
- ORACLE DG在线日志修改
ORACLE DG在线日志修改 SQL>select SEQUENCE#,first_time,next_time,APPLIED, THREAD# from v$archived_log or ...