easyUI入门《三十、datagrid案例：表格的加载，奇偶不同色，显示行号，单选，排序》

最新推荐文章于 2022-05-11 23:46:12 发布
最新推荐文章于 2022-05-11 23:46:12 发布
阅读量366 收藏 1
点赞数
分类专栏： easyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leijiahui/article/details/82667643
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>

		<table id="dg" style="width: 400px;height: auto;">

		</table>
		<script type="text/javascript">
			$("#dg").datagrid({
				url: 'http://localhost:8080/category',
				method: 'post',
				loadMsg: "正在加载，请稍后。。。",
				striped: true, //奇偶行不同色
				rownumbers: true, //显示行号
				singleSelect: true, //单选

				columns: [
					[{
							field: "id",
							title: "ID",
							sortable: true //排序：传入参数
							//order	asc
							//sort	id
						},
						{
							field: "name",
							title: "分类",
							formatter: function(value, row, index) {
								return value + '<span style="color:red">[' + row.id + ']</span>'
							}
						}
					]
				]

			})
		</script>

		<br /><br /><br /><br /><br />

		<table class="easyui-datagrid" data-options="url:'http://localhost:8080/category',method:'post'">
			<thead>
				<tr>
					<th field="id">ID</th>
					<th field="name">分类</th>
				</tr>
			</thead>
		</table>

		<br /><br /><br /><br /><br /><br />
		<table class="easyui-datagrid" style="width: 600px;height: auto;">
			<thead>
				<tr>
					<th field="name1">col 1</th>
					<th field="name2">col 2</th>
					<th field="name3">col 3</th>
					<th field="name4">col 4</th>
					<th field="name5">col 5</th>
					<th field="name6">col 6</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>

			</tbody>
		</table>

		<br /><br /><br /><br /><br />
		<table class="easyui-datagrid" style="width: 400px;height: auto;">
			<thead>
				<tr>
					<th field="name1" rowspan="2">col 1</th>
					<th field="name2" rowspan="2">col 1</th>
					<th field="name3" rowspan="2">col 1</th>
					<th colspan="3">col 6</th>
				</tr>
				<tr>
					<th field="name4">col 4</th>
					<th field="name5">col 5</th>
					<th field="name6">col 6</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>
				<tr>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 3</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
				</tr>

			</tbody>
		</table>
	</body>

</html>

 

leijiahui
关注
专栏目录
Easyui Datagrid使用小例
火雨(Nick)
10-18 2359
Easyui Datagrid使用小例     写一个 Easyui Datagrid的使用小例子供大家参考：    废话不多说，直接贴代码：    1. 页面部分代码：techInfoList.jsp pageEncoding="UTF-8"%> //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
jquery ui和easyui的区别是什么？
dawuyou的博客
12-15 319
区别：1、jquery ui是由jQuery官方维护的UI方向的插件；而easyui是第三方维护的插件。2、jquery ui是免费的界面库；easyui是商业应用要钱的界面库。 相关推荐：《jQuery教程》 jQuery自带的一个可选ＵＩ库，但是非常可惜，一些关键的组件没有包含进去，如TreeView, DataGrid，还需要寻找第三方的插件。 EasyUI是某公司开发的一套对私免费，对公收费的ＵＩ库，基于ＧＮＵ开源协议，不过只有付费了才能买到他们的源代码。是目前枯人接触过最优秀的一款基于jQuery
java easyui 实例_easyui-datagrid个人实例
weixin_36060412的博客
02-12 131
pageEncoding="UTF-8"%>String path = request.getContextPath();%>Insert title herehref="/easyui/themes/default/easyui.css">href="/easyui/themes/icon.css">src="/easyui/jquery.easyui.min.js">$...
datagrid中奇偶行颜色区分，自定义偶数行颜色。
weixin_33690963的博客
01-05 870
striped: true 这个属性是设置奇偶行颜色区分的。 这个属性会修改偶数行颜色。在css文件中 .datagrid-row-alt{background:#EEEEFF;} 如对偶数行颜色不满意。可以修改css文件。 转载于:https://www.cnblogs.com/zhenmingliu/archive/2012/01/05/2312911.html...
EasyUI——DataGrid数据显示
weixin_65975275的博客
05-11 1947
DataGrid数据显示
jQuery EasyUI API 中文文档 - DataGrid数据表格
10-28
- pagination、rownumbers、singleSelect等属性控制分页栏的显示、行号的显示和单选行为。 - pageNumber、pageSize、loadMsg等属性则分别用于设置分页栏的初始页码、页面尺寸和加载数据时的提示信息。 - query...
EasyUI可编辑表格(Editable DataGrid)关联数据库进行增删改查
like的博客
06-04 917
EasyUI 可编辑表格(editable datagrid) 关联数据库进行增删改查（实用）。 先上图： 增加：增加一行数据 删除：删除选中的行 修改： 双击表格栏，然后点其他栏让它失去焦点自动调方法 修改后点击上方保存按钮 HTML页面： <!DOCTYPE html> <html> <head&gt
easyui-dataGrid单元格显示全部内容
komi的博客
02-13 3226
dataGrid基本用法 <table id="dataGridId" name="dataGridName" class="easyui-datagrid" fit="true" fitColumns="true" //单元格是否不换行（false=换行，必须有中文或者符合才会自动换行，纯英文字母不会换行） nowrap="false" //属性 data-options= //分页，可选20条每页/40条每页
EasyUI DataGrid使用示例
diehe5608的博客
11-05 412
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx.cs" Inherits="C_EasyUIDemo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
EasyUI实例小Demo(一)
零俗
10-31 8035
一：easyui的datagrid 页面部分：
easyui_datagrid数据表格的增删改案例
m0_46699799的博客
06-28 427
datagrid数据表格的增删改案例增加案例代码效果修改案例代码效果删除案例代码效果遇到的各种bug解决 之前我们做增加或修改都是另外写一个界面，然后跳转到那个界面进行数据输入然后在去处理业务逻辑，但是这样的话，就比较麻烦，而且页面太多也比较混乱，所以今天的增加，修改案例我们利用dialog模态框组件配合form表单进行增加，修改 增加案例 代码 首先我们先把后台写好 Dao UserDao add方法 利用自定义MVC框架 然后是一个用来判断是否成功的工具类（泛型），这个工具类的构造方法都是私有的，不可
easyui datagrid隔行变色
热门推荐
O'lean技术之路
06-30 1万+
属性striped设置为true，即striped:true。
c#dataGridView奇偶数行变色
dikaitao5065的博客
09-15 1575
dataGridView_Performance.RowsDefaultCellStyle.BackColor = Color.Bisque; dataGridView_Performance.AlternatingRowsDefaultCellStyle.BackColor = Color.Beige; 转载于:https://www.cnblogs.com/dotNetLover...
Datagrid布局与样式（居中，单元格颜色，排序）
MaFeng
12-31 1324
<Page x:Class="Lx.Pages.Page_bkzj_gn" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://sc...
EasyUI DataGrid组件：数据加载与分页详解
总结来说，第32章DataGrid(数据表格)组件的学习重点在于掌握如何通过不同的方式加载数据，配置分页和排序功能，以及如何灵活运用EasyUI提供的API进行组件的个性化定制。这对于前端开发人员在构建具有高效数据处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值