easyui datagrid 响应式问题

Javon9276 Javon9276 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
打算做个如果是PC端登陆,我可以显示全部列,手机或平板登陆,显示部分列表。

曾经想过两种方案

一.给列添加CSS

但是找不到相应的内容可以控制整一列

二.使用js控制隐藏

1.调用隐藏方法


$('#loginLogTable').datagrid('hideColumn', 'id');
$('#loginLogTable').datagrid('hideColumn', 'ip');


2.重置datagrid


var loginLogTableParams = {
sortName: 'login_time',
sortOrder: 'desc',
fitColumns: true,
columns: [
[
{field: 'id', title: '登陆日志ID', sortable: true, align: 'center', width: 100},
{field: 'account', title: '工号', sortable: true, align: 'center', width: 100},
{field: 'name', title: '用户名', sortable: true, align: 'center', width: 100},
{field: 'ip', title: '登陆IP', sortable: true, align: 'center', width: 100},
{field: 'login_time', title: '登陆时间', sortable: true, align: 'center', width: 100},
{field: 'out_time', title: '登出时间', sortable: true, align: 'center', width: 100}
]
]
};


var loginLogTableParams = {
sortName: 'login_time',
sortOrder: 'desc',
fitColumns: true,
columns: [
[
{field: 'id', title: '登陆日志ID', sortable: true, align: 'center', width: 100, hidden: true},
{field: 'account', title: '工号', sortable: true, align: 'center', width: 100},
{field: 'name', title: '用户名', sortable: true, align: 'center', width: 100},
{field: 'ip', title: '登陆IP', sortable: true, align: 'center', width: 100, hidden: true},
{field: 'login_time', title: '登陆时间', sortable: true, align: 'center', width: 100},
{field: 'out_time', title: '登出时间', sortable: true, align: 'center', width: 100}
]
]
};


但是感觉两种方法都不太好弄,所以想问能不能用css控制,或怎么控制,希望方法不要太复杂。

实现图片如下:

...全文

相关推荐

easyui datagrid标题列宽度自适应

NULL 博文链接:https://wusuobuai.iteye.com/blog/1860496

weixin_38669628

EasyUI中的可编辑DataGrid实现与应用

EasyUI是一个基于jQuery的前端框架,它为开发者提供了一整套丰富的组件,以便快速构建功能强大、界面友好的Web应用程序。本章将带您入门EasyUI,了解其核心理念和如何快速开始使用它。EasyUI的DataGrid组件提供了强大的列定制功能,允许开发者自定义每列的表现形式和功能。通过columns配置项,用户可以定义列的标题、字段映射、宽度、对齐方式、显示内容的模板、是否可编辑、是否可排序等多种属性。除了默认的文本输入框外,EasyUI还支持自定义编辑器类型。

多动镇

EasyUI datagrid、tree右键与window弹出层综合应用

EasyUI 是一套基于 jQuery 的用户界面插件集合,它允许开发者以最小的代价实现各种常见界面的交互效果,而无需复杂的编程。EasyUI 的目标是为 Web 应用提供一套快速、简易、响应式的界面解决方案。它包含了诸如 Datagrid、Tree、Window 等丰富的组件,每个组件都旨在解决特定的用户界面需求。EasyUI的Datagrid组件是一个用于显示和操作数据的强大工具。初始化Datagrid首先需要在HTML页面中定义一个<table>元素,并为其添加属性。

咸鱼cc

EasyUI-1.Datagrid 数据网格

http://blog.csdn.net/gxy1317/article/details/52423825

小糊涂蛋装大神

EasyUI效果参考

在web开发中,非常实用。效果非常好看,做出来的页面非常吸引人的。

奋斗Xing
评论 4
收藏 已收藏
分享
返回顶部
Javon9276
JavaScript 87,983 成员 224,681 内容