bootstrap结合easyui-datagrid列宽不自动适应问题

最新推荐文章于 2021-06-22 11:44:59 发布
最新推荐文章于 2021-06-22 11:44:59 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： web开发 文章标签： bootstrap easyui datagrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amo_te_ama_me/article/details/51588952
版权
当在Bootstrap环境中使用EasyUI的datagrid组件时，遇到列宽无法自动适应屏幕的问题。通常设置width属性和fitColumns为true能实现自适应，但在此情况下无效。经过排查发现，问题可能出在Bootstrap的网格系统上。解决方案是在datagrid的table元素上添加特定属性，使datagrid宽度与Bootstrap网格宽度保持一致，从而实现列宽自适应。
摘要由CSDN通过智能技术生成

平时我们使用easyui的datagrid组件时，如果想要datagrid列宽自动适应屏幕宽度：

只要给列指定width属性，并且datagrid fitColumns配置为true后，就能自适应屏幕了。

但是今天加上了这几个属性datagrid还是不能自适应屏幕宽度，检查了几遍配置问题，也没有出错

<div class="col-md-12 >
                <div style="margin-bottom: 2em;">
                    <table id="box">
                    </table>
                    <div <
最低0.47元/天 解锁文章
感谢努力的自己
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui的datagrid表头与数据列宽度不一致
biang_biang的博客
04-29 2039
如图，在我弄好之后，上下与数据列宽度不对应
bootstrap的datagrid组件
07-29
基于bootstrap封装的表格组件，调用方式类似与easyui。提供分页，条件查询、高级搜索。
EasyUI中 datagrid 控件不能自适应窗口可能的原因
zooah212的专栏
06-05 555
1、datagrid 控件的 fit 属性设置为 true，fitColumns 设置为 true，autuHeight 设置为 false。同时，如果 datagrid 至于 panel 中，panel 的 fit 属性也需要设置为 true，这样 datagrid 将随着页面的变化而自适应； 2、datagrid 列的 width 使用百分比形式，且所有列的宽之和等于 100%； 3、检查 datagrid 控件所在页面，是否有元素的 id 设置为了 nodeType，nodeType 为 easy
Easy-UI中datagrid宽高自适应问题
tianchengwei09的专栏
08-30 1291
在使用easy-ui的过程中，新增tab中利用iframe显示时，发现里面的datagrid高度不能自适应，下面是解决办法，写下备用： 再iframe中使用easyui-layout布局，然后把datagrid放到center就可以了，比如：   &lt;body class="easyui-layout"&gt; &lt;divregion="center"style="padding...
easyui datagrid 浏览器像素及改变表、列宽问题
tnjun123456的专栏
01-17 9128
title：easyui datagrid表格宽度，以及列宽随浏览器缩放改变 在使用easyui的datagrid时，需要考虑到浏览器不同的像素问题，所以，在使用时，我们需要自己写一个函数 code： function getWidth(percent){ return $(window).width() * percent; } 这样在初始化时：
[Web/Easyui]table里的列宽怎么设置都不正确？
weixin_39049564的博客
06-22 377
试了老半天，发现怎么设置，他要不没反应，要不就是他width他自己的，跟自己设置的width一点都不一样，郁闷坏了，什么鬼情况？左边怎么这么挤啊？ <div id="tt" class="easyui-tabs" style="width: 100%;height: 100%"> <div title="sj"> <form method="post" id="editForm" name="editForm" fit="true">
java 基于 bootstrap_datagrid 分页
weixin_30664615的博客
09-15 166
1、首先引入datagrid js ，css $("#datagrid").bootstrap_datagrid({ url : "<%=path%>/user/findAllUser.html", params : { page ...
easyui 的datagrid的自适应宽度的问题
Bourne_2015的博客
06-17 240
/***JQuery扩展方法，用户对JQueryEasyUI的DataGrid控件进行操作。*/$.fn.extend({/***修改DataGrid对象的默认大小，以适应页面宽度。**@paramheightMargin*高度对页内边距的距离。*@paramwidthMargin*宽度对页内边...
datagrid 列宽设置不起作用和表头和内容错位
Lxylovezlj的博客
12-12 8613
上下两个datagrid写法完全一样，但是第二个的设置的列宽始终不起作用，我到处百度，但其他人的方法始终不能解决这个bug,最后我发现调整两个datagrid写的位置，最后面那个datagrid的列宽就会失效. 最后走投无路的我只要在两个datagrid中间写一个无用的datagrid，最后将这个无用的datagrid隐藏起来，bug就消失了。 datagrid1 table i
easyui datagrid在fitColumns="true"的情况自适应宽度下失效
Java流浪记
09-25 8359
field如果有重复的话，会导致fitColumns=”true”失效 如果列都没有设置宽度的话，也会导致fitColumns=”true”失效
bootstrap java 分页_java 基于 bootstrap_datagrid 分页
weixin_34808718的博客
02-15 149
$("#datagrid").bootstrap_datagrid({url :"/user/findAllUser.html",params : {page :1,pageSize :10,name:name},singleSelect :true,pagination:true,columns : [ [/*{title : "userid",field : "userid",hidden :...
bootstrap 服务端分页与easyUI.datagrid
Bronna的博客
07-19 1206
一、bootstrap服务端分页 之前用的bootstrap分页插件是在前端分页的，一次查出所有的数据，在前端进行分页，但是这种方式会使得加载速度变得缓慢，加载1000+数据要三四秒的时间，用户体验不好，于是改成服务端分页 bootstrap-table.min.js bootstrap-table-locale-all.min.js bootstrap-table-zh-CN.min.js
Bootstrap复选框、EasyUI datagrid复选框
西门吹吹吹雪
08-03 2352
1.EasyUI datagrid $("#waitorder") .datagrid( { url : "${ctx}/waitOrder/findWaitOrder", nowrap : false, striped : true, remoteSort : false, pageSize : 20,
easyui的datagrid表格表头和内容对不齐原因之一及解决方案
weixin_46298946的博客
01-30 2580
本人之前用easyui做一个后台管理页面数据出来后表格表头和内容对不齐 在网上找了各种各样的方法都不管用，然后改了easyui文件夹下jquery.easyui.min.js才终于好了，一般是第9977行，如下图左边是改之前，右边是改之后 var ss=["<style type=“text/headTree” easyui=“true”>"]; 改成 var ss=["<style type=“text/css” easyui=“true”>"]; 希望对大家有所帮助 ...
easy UI中 datagrid的表头和数据错位的原因
zhao277949522的博客
03-18 4839
因列的field中，存在特殊字符或中文导致，将相应的字段替换为英文即可正常显示 例如： columns: [{"field": '字段1', "title": ‘字段1’, width: '100px' }， {"field": '字段2', "title": ‘字段2’, width: '100px' }] 这时就会出现表头和表的内容错位 这时候可改为： columns: [{"field":...
datagrid表头与数据列宽度不对齐_bootstrap table列和表头对不齐的解决方法
weixin_42701905的博客
01-17 659
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不一样。通过Chrome浏览器 f12，看到样式为 .fixed-table-header .fixed-table-body .fixed-table-footer的3个div容器宽...
jQueryEasyUI中DataGrid的height,width,fit,fitColumns属性
asdf10245的博客
04-16 538
1 height: 600, //不指定则默认垂直包裹，指定了则固定 2 width:1200,//不指定则水平100%平铺，指定了则固定 3 fit:false,//true:高度填充父窗体，忽略height属性。父窗体可能是一个高度很小的div，导致看不到数据。false（默认）：高度取决于height。 4 fitColumns: true,//true：自动扩大或缩小列...
easyui 之 datagrid动态列与列宽自适应
weixin_34090643的博客
11-16 1282
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap中哪个控件类似easyui-datagrid控件？
最新发布
01-18
在Bootstrap中，类似于easyui-datagrid控件的是Bootstrap的表格控件，即`<table>`元素。Bootstrap的表格控件提供了丰富的样式和功能，可以用于展示和操作数据。 以下是一个使用Bootstrap表格控件的示例： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值