折叠表格

最新推荐文章于 2021-05-31 14:37:37 发布
最新推荐文章于 2021-05-31 14:37:37 发布
阅读量168 收藏
点赞数
文章标签： javascript json ViewUI

1、新建Web项目，项目的文件结构如下：



2、ChangeDataGrid.html源码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Aligning Columns in DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../style/easyui.css">
	<link rel="stylesheet" type="text/css" href="../style/icon.css">
	<link rel="stylesheet" type="text/css" href="../style/demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../script/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>可以折叠的表格</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>折叠表格</div>
	</div>
	<div style="margin:10px 0;"></div>
	
	<table class="easyui-datagrid" title="折叠表格" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'../JSON/data.json'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80,halign:'center'">项目编号</th>
				<th data-options="field:'productid',width:100,halign:'center'">产品</th>
				<th data-options="field:'listprice',width:80,align:'right',halign:'center'">总价</th>
				<th data-options="field:'unitcost',width:80,align:'right',halign:'center'">单价</th>
				<th data-options="field:'attr1',width:250,halign:'center'">属性</th>
				<th data-options="field:'status',width:60,align:'center',halign:'center'">地位</th>
			</tr>
		</thead>
	</table>

</body>
</html>


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LayUi 折叠表格
要有梦想，即使遥远
12-13 6044
layui折叠表格 &lt;#include "/common/layout.html"&gt; &lt;@header&gt; &lt;/@header&gt; &lt;style&gt; .layui-tree-head{ cursor: pointer; } &lt;/style&gt; &lt;script src="/plug
html5折叠表格
10-25
html5折叠表格
表格折叠
diaochuanzhi7826的博客
08-05 226
通过改变分段的行数实现分段的折叠与打开。分段处于折叠状态时，设置分段的行数为 0。 1、分段折叠状态数组初始化 // 声明记录折叠状态数组 @property(nonatomic, retain)NSMutableArray *foldStatusArray; // 初始化记录折叠状态数组 foldStatusArray = [[NSMutableArray alloc] init...
html折叠表格,CSS 表格
weixin_39673002的博客
05-31 472
HTML表用于在表格中布置表格数据。使用CSS，我们可以通过添加边框，控制表单元格文本对齐，高亮表行等样式HTML表。表格边框我们可以使用border属性为表，表行和表单元格添加边框。table,th,td{border:1pxsolidblack;}html>table,th,td{border:1pxsolidblack;}ValueItemCSSS...
可以折叠的表格
06-26
可以折叠的表格html的
javascript 实现table展开折叠
10-24
javascript 实现table展开折叠,table的th部分不变，下端的tr折叠
EasyUI折叠表格层次显示detailview详解及实例
08-31
【EasyUI折叠表格层次显示detailview详解】 在Web开发中，EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和简单易用的API，帮助开发者快速构建用户界面。本文将深入探讨EasyUI中的一个特殊功能——折叠表格...
layui树型可折叠表格.zip
05-26
可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
HTML懒加载的折叠表格demo
12-01
首先，折叠表格允许用户按需查看详细信息，只显示基本信息，从而减少页面初始加载时的数据量。在HTML中，我们可以使用`<details>`和`<summary>`标签来创建一个可折叠的元素。`<details>`标签定义了一个可折叠的容器...
jQuery实现表格展开与折叠的方法
12-11
在网页设计中，有时我们需要创建交互式的表格，使得用户可以展开或折叠表格的行来查看或隐藏详细信息。本文将详细讲解如何使用jQuery实现这样的功能，即点击表格的某一行，其下方的相关行会展开显示，再次点击则折叠...
HTML 自动伸缩的表格Table js实现
12-12
下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。【优点】 1、对开发人员指定的表格没有任何影响； 2、使用简单； 3、被定义的表格样式可以随意的定制你的样式，不对你的样式构成影响； 4、移植性好，扩展性好。 【缺点】 目前用IE7测试正常，但不支持FireFox，工作比较忙，没时间更正，希望网友更正，俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中； 2、引入包AutoTableSize
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
html页面实现表格部分折叠,如何用局部视图展开/折叠html表格？
weixin_29197051的博客
05-31 731
#dvExpoByBatchDate .expandExpo {background-image: url("../Images/Expand.gif");background-repeat: no-repeat;background-position: center,center;}#dvExpoByBatchDate .expandExpoDisabled {background-image:...
html 可折叠的表格,html5 – 使用HTML和CSS的可折叠列表
weixin_39603537的博客
05-30 891
我有一个可折叠的列表实现使用HTML和CSS.列表工作正常,但我需要一些修改.每当我点击列表中的一个项目,它将展开.但是当我点击同一列表中的另一个项目时,先前展开的元素会在被点击的元素展开时收缩.请帮助我应用可以同时扩展多个列表项的行为.我希望它只能在HTML和CSS中完成.这是我目前的实现. CSS样式：.row { vertical-align: top; height: auto !impo...
表格折叠的实现
fortunatelx的博客
06-10 492
效果图： function fold(sender){ var dataValue=$(sender).attr("dataValue"); if ($(sender).html() == "+"){ $(sender).html("-"); $("[name="+dataValue+"]").removeClass("fn-hide"); } else { $(sender).html("+"); $("[name.
Html 中表格添加展开（折叠）按钮
Looking的博客
05-12 3504
简易代码： <html> <head> <meta http-equiv="Content-Typecontent="text/html; charset=UTF-8" /> <title>compatibility assessment</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"
html表格折叠三级分类,折叠表HTML(Collapsing table with html)
weixin_42562079的博客
05-30 527
使用jQuery因此新的jsfiddle(更新)： http://jsfiddle.net/5BRsy/3/第一组class和id是那么您可以给他们打电话JS注意我不得不这样做的每一个TD ，因为它不会让我用股利或跨度和隐藏起来。server 1server 2used1gb2gbdrive 10.5gb1gbdrive 20.5gb1gbavailable1gb2gbdrive 10.5gb1g...
web 端展现报表数据时如何实现折叠展开效果？
chaochao52001的博客
07-08 650
1、 如果有报表工具，且报表工具内置了折叠属性设置，那么可以直接通过简单配置实现表格数据的折叠展开效果，具体操作配置可以参考 如何实现伸缩 (折叠) 报表？ 这种实现方式对开发人员技术要求比较低，操作方式也简单；web 端折叠打开的操作不需要刷新计算，性能相对比较高。 2、 如果报表工具没有折叠功能，那么可以通过 jQuery 的 show()、hide() 方法对报表进行 tr 的显示、隐藏操作。 这种实现方式需要开发人员学习 jQuery，对 js 的要求比较高，初次展现大数据量时会相对慢些。
html 表格折叠效果,tableView 的折叠效果
weixin_35762553的博客
05-31 721
在开发中 UITableView 是最常见的布局控件，除了我们熟知的一些使用方式，也有另一些相对常见但不常用的使用方式值得我们去了解，本篇文章只针对其中一种常见的使用方式作简单介绍。废话不多说，先上效果图：tableView 另类简单使用效果图以上效果样式可以说在我们手机中的 app 上非常常见，其实要做这种效果也非常简单，只需要会使用 UITableView 即可。一、分析在效果图中，我们可以...
wpf treeview折叠表格
最新发布
11-11
以下是WPF TreeView折叠表格的示例代码： ```xml <TreeView> <TreeViewItem Header="Parent 1"> <TreeViewItem Header="Child 1"/> <TreeViewItem Header="Child 2"/> </TreeViewItem> <TreeViewItem Header="Parent 2"> <TreeViewItem Header="Child 3"/> <TreeViewItem Header="Child 4"/> </TreeViewItem> </TreeView> ``` 这个示例代码中，我们创建了一个TreeView控件，并在其中添加了两个TreeViewItem作为父节点，每个父节点下面又添加了两个子节点。当我们运行这个代码时，我们可以看到TreeView中的所有节点都是展开的。 如果我们想要让TreeView中的节点可以折叠和展开，我们需要使用TreeViewItem的IsExpanded属性。这个属性用于指定TreeViewItem是否展开。默认情况下，TreeViewItem的IsExpanded属性为false，也就是说，TreeViewItem默认是折叠的。 以下是修改后的示例代码，其中我们将第一个父节点折叠起来： ```xml <TreeView> <TreeViewItem Header="Parent 1" IsExpanded="False"> <TreeViewItem Header="Child 1"/> <TreeViewItem Header="Child 2"/> </TreeViewItem> <TreeViewItem Header="Parent 2"> <TreeViewItem Header="Child 3"/> <TreeViewItem Header="Child 4"/> </TreeViewItem> </TreeView> ``` 在这个示例代码中，我们将第一个父节点的IsExpanded属性设置为false，这样它就会默认折叠起来。当我们运行这个代码时，我们可以看到第一个父节点是折叠的，而第二个父节点是展开的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值