一步步实现 easyui datagrid表格宽度自适应,效果非常好
一步步实现 easyui datagrid表格宽度自适应,效果非常好:
一、设置公共方法,使得datagrid的属性 fitColumns:true
$(function(){
//初始加载,表格宽度自适应
$(document).ready(function(){
fitCoulms();
});
//浏览器窗口大小变化后,表格宽度自适应
$(window).resize(function(){
fitCoulms();
});
}) //表格宽度自适应,这里的#dg是datagrid表格生成的div标签
function fitCoulms(){
$('#dg').datagrid({
fitColumns:true
});
}
二、在$('#dg').datagrid中设置columns的各列宽度比例
当 fitColumns:true时,columns里的width变为改列宽度占表格总宽度大小的比例,而不是实际宽度
下面例子中,各列的宽度大小比为:250:200:110:114
// 视频广告数据统计的表格数据渲染
$('#frequencyDg').datagrid({
scrollbarSize:0,
method : 'get',
loadMsg: '正在加载中,请稍等... ',
nowrap:false,//允许换行
fitColumns:true,//宽度自适应
emptyMsg: '<span>无记录</span>',
onLoadSuccess : function(data) {// Fires when data is
var classify = $("#classify").val();
$('#frequencyPp').pagination('refresh', {
total : data.total,
pageNumber : data.page,
classify:classify
});
},
columns:[[
{
field:'name',
title:'广告名称',
width:, //当 fitColumns:true时,columns里的width变为改列宽度占表格总宽度大小的比例
align:'center'
},
{
field:'startTime',
title:'投放日期',
width:,
align:'center'
},
{
field:'playCount',
title:'播放次数',
width:,
align:'center',
editor:'text'
},
{
field:'userSawTimes',
title:'用户观看次数',
width:,
align:'center',
editor:'text'
}
]]
});
三、将body设置为min-width:1100px。使得datagrid表格宽度大于浏览器宽度时,下面可以出现横向滚动条,可以横向拉动看到整个datagrid数据。
body{
padding: 0;
margin: 0;
border: 0;
min-width: 1100px;
box-sizing: border-box;
font-size: 14px;
}
显示效果如下图:
一步步实现 easyui datagrid表格宽度自适应,效果非常好的更多相关文章
- easyui Datagrid 表格高度计算及自适应页面的实现
因为页面上既要计算表格的高度,又要自适应浏览器大小,之前都都采用固定表格高度,这样就会导致不同的分辨率电脑上看起来表格高矮不一, 所以采用了计算网页高度和其他div 的高度之差作为表格的初始高度: H ...
- easyui—element-ui框架套用(表格宽度自适应)
外层使用easyui框架中window组件,便于使用最大化功能:内部表格使用element-ui在的el-table,el-table列宽须设置为最小宽度才能在最大化窗口时列表中列宽自适应window ...
- EasyUi datagrid 表格分页例子
1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){ $.ajax({ url: a ...
- easyUI datagrid 列宽自适应(简单 图解)(转)
响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...
- easyui datagrid 表格适应屏幕
1.项目后台系统使用easyui,datagrid 的数据设置为自动适应屏幕,那么对于笔记本的话,就会显得有的小,可以通过设置datagrid属性,进行固定长度的设置 $('#gridTable'). ...
- easyui datagrid 高度布局自适应
最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过 ...
- 关于easyui datagrid 表格数据处理
首先先将easyui 引入到jsp页面中 <link rel="stylesheet" type="text/css" href="easyui ...
- easyui datagrid 表格不让选中(双层嵌套)
代码: function local(role,region,ip){ $("#roleList").datagrid({ // title:'服务器监控列表', height:( ...
- easyui datagrid 表格动态隐藏部分列的展示
1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...
随机推荐
- 【转】每天一个linux命令(14):head 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/11/06/2756278.html head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头 ...
- POJ2279杨氏矩阵+钩子定理
题目:http://poj.org/problem?id=2279 有dp做法,但会MLE. dp的思想很好,是通过 “按身高由小到大往进放” 把 “身高小于” 的条件转化成 “放进去的先后” ,于是 ...
- oracle常用数据类型说明
类型 含义 存储描述 备注 CHAR 固定长度字符串 最大长度2000bytes VARCHAR2 可变长度的字符串, 最大长度4000bytes 可做索引的最大长度749 NCHAR 根据字符集而定 ...
- android datepicker monthOfYear getMonth(): 获取当前月(注意:返回数值为0..11,需要自己+1来显示).....
关键点: 1. getMonth(): 获取当前月(注意:返回数值为0..11,需要自己+1来显示) 2. 初始年(译者注:注意使用new Date()初始化年时,需要+1900,如下:dat ...
- JbossMiner 挖矿蠕虫分析 (转载)
前言 从2013年的诞生,到2016爆发,挖矿(MiningCryptocurrency) 的高回报率,使其成为了一把双刃剑.据外媒去年的统计,比特币的算力(Hash Rate)已在半年内翻了一翻. ...
- 一款easyUI写的界面例子,小记
后台是用strut2的: 前台界面风格easyUI,感觉挺好用的: <!DOCTYPE html> <html> <head> <meta charset=& ...
- Java-Web中访问某个指定工程中的文件,报错后发现访问的文件是另一个工程里面的文件
问题: 浏览器向我的bingou项目中的UserDaoImpl.java发送请求, myeclipse报错:空指针异常 点击报错行之后,错误给定位到了另一个项目中的的一个文件 解决: 原因是文件名错误 ...
- R语言学习——列表
1.列表 列表是一种泛化的向量,其并没有要求所有元素都是同一类型,其元素甚至可为任意类型. 列表格式自由,为统计的计算结果的返回提供了极便利的方法. 2.列表的创建 可以用list()函数创建列表. ...
- 9-16Jenkins-3可用的环境变量、参数化构建和依赖
1.环境变量 可以查看可用的环境量 执行构建 2.参数化构建 3.依赖 多个工程可以在按既定顺序执行 test1225-2的构建触发器设置
- 1043 Is It a Binary Search Tree (25 分)
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...