<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script>
function alertColumn(sort,order){
alert(sort+'-'+order);
}
</script>
</head>
<body>
<h2>Basic DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The DataGrid is created from markup, no JavaScript code needed.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json',onSortColumn:alertColumn">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,sortable:true">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
添加评论
关注(0)
相关推荐
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
特别是在使用如EasyUI Datagrid这样的前端组件时，中文排序成为了开发者面临的一个常见挑战。本文将详细介绍如何解决EasyUI Datagrid中的中文排序问题，并分别从前端和后端两个角度给出具体的实现方案。 #### 二、...
在EasyUI Datagrid中，我们可以利用这些事件来触发特定的行为，例如显示预览窗口。 3. **自定义Datagrid行为**： 由于EasyUI Datagrid的默认行为不包括鼠标悬停弹窗，我们需要通过修改源码或者扩展实现来添加这个...
1. **扩展Datagrid功能**：可以通过扩展EasyUI Datagrid的默认功能来实现打印，这可能涉及到自定义事件监听器，当用户触发打印操作时，将当前视图的数据转换为适合打印的格式。 2. **CSS调整**：由于打印时浏览器...
本话题主要关注如何在EasyUI的datagrid中实现行的动态操作，包括上移、下移、置顶、置底以及通过键盘事件进行交互，并且涉及数据排序和后台绑定。 首先，EasyUI的datagrid允许开发者以直观的方式展示和管理数据。在...
在使用EasyUI框架进行Web应用开发时，DataGrid是一个非常重要的组件，用于展示结构化的数据。DataGrid提供了很多功能，包括分页、过滤、排序等。然而，标题中提到的"easyui datagrid排序图标"是DataGrid的一个关键...
在IT行业中，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如排序、分页、过滤等。在实际工作中，我们经常需要将这些展示的数据导出到Excel文件，以便进行进一步的分析或存储。下面...
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时，针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括datagrid，它是一个用于展示表格数据的...
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
在使用EasyUI框架开发Web应用时，Datagrid组件是一个非常重要的元素，它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地...
easyUI datagrid 自动调整行号大小
EasyUI 是一个基于 jQuery 的 UI 框架，它提供了丰富的组件，包括表格（DataGrid）等，使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid ...
Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件，常用于表格数据的展示和操作，支持分页、排序、过滤、编辑等功能。通过阅读这份文档，我们可以了解 Datagrid 的基本配置和高级特性，以及如何与后端数据源进行...
通过对EasyUI dataGrid组件的深入理解和实践操作，我们可以有效地解决在列较多且无数据时列显示不全的问题。这种方法不仅提高了表格的可用性，还增强了用户体验。当然，实际应用中还需要根据具体情况进行调整优化。
当用户勾选复选框时，触发相应的事件，如`onchange`，并更新datagrid的筛选条件。例如，我们可以创建一个JSON对象存储所有筛选条件，每次复选框状态改变时，更新这个对象，然后调用datagrid的`reload`方法重新加载...
EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的功能，如表格布局、数据分页、排序、过滤等，常用于Web应用的数据展示。在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...
juqery easyui datagrid的排序，当前页面排序。包含数字排序，中文排序，日期排序。
DataGrid 是 EasyUI 中一个非常重要的组件，它可以用来展示大量的表格数据，并且支持分页、排序、搜索等常用功能。DataGrid 不仅可以展示静态数据，还可以动态加载服务器返回的数据。通过使用 DataGrid，开发者能够...