<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Easyui datagrid 行上下移动</title>
<link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<script id="others_jquery_easyui_131" type="text/javascript" class="library" src="/js/sandbox/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h1>
Easyui datagrid 行上下移动
</h1>
<table id="tt"></table>
</body>
</html>
$(function() {
$('#tt').datagrid({
singleSelect: false,
url: '/uploads/rs/233/bkf2ntm7/datagrid_data2.json',
title: 'Easyui datagrid 行上下移动',
width: 800,
height: 'auto',
fitColumns: true,
columns: [[{
field: 'itemid',
title: 'Item ID',
width: 80
},
{
field: 'productid',
title: 'Product ID',
width: 120
},
{
field: 'listprice',
title: 'List Price',
width: 80,
align: 'right'
},
{
field: 'unitcost',
title: 'Unit Cost',
width: 80,
align: 'right'
},
{
field: 'attr1',
title: 'Attribute',
width: 250
},
{
field: 'status',
title: 'Status',
width: 60,
align: 'center'
},
{
field: 'ctr',
title: '操作',
width: 100,
align: 'center',
formatter: function() {
return '<button onclick="move(event,this,true)">上</button><button onclick="move(event,this,false)">下</button>';
}
}]]
});
});
function move(e, target, isUp) {
var $view = $(target).closest('div.datagrid-view');
var index = $(target).closest('tr.datagrid-row').attr('datagrid-row-index');
var $row = $view.find('tr[datagrid-row-index=' + index + ']');
if (isUp) {
$row.each(function() {
$(this).prev().before($(this));
});
} else {
$row.each(function() {
$(this).before($(this).next());
});
}
$row.removeClass('datagrid-row-over');
e.stopPropagation();
}
相关推荐
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
easyUI datagrid 行上移，下移，置顶，置底的方法
本话题主要关注如何在EasyUI的datagrid中实现行的动态操作，包括上移、下移、置顶、置底以及通过键盘事件进行交互，并且涉及数据排序和后台绑定。 首先，EasyUI的datagrid允许开发者以直观的方式展示和管理数据。在...
EasyUI datagrid提供了上下移动行的功能，这通常是通过拖拽或点击按钮实现的。在.NET后端，需要维护一个反映数据顺序的字段，如“序号”或“排序权重”，当用户改变行位置时，更新该字段并保存到数据库。 **Test....
列拖动=页面分页=更新单元格列值=添加列合计=列头添加提示(鼠标悬停显示文字)=编辑框键点击事件(暂时实现上下左右控件焦点移动)=设置DataGrid复制右键菜单 默认有复制功能
在本文中，我们将探讨如何使用jQuery Easyui的Datagrid组件实现单行的上移和下移功能，并且在操作后保存这些移动的结果。jQuery Easyui Datagrid是一个强大的数据展示工具，它提供了丰富的交互性和自定义选项，使得...
通过以上分析，我们可以看出，实现 EasyUI Datagrid 中点击按钮后数据行上下移动的功能，主要涉及 JavaScript 事件处理、数据操作以及 Datagrid 组件的 API 使用。理解和掌握这些知识点，有助于我们更好地利用 ...
"datagrid键盘操作.zip"这个压缩包文件显然是针对如何在EasyUI的DataGrid上实现键盘监听事件进行的示例讲解。 EasyUI是一个轻量级的JavaScript库，它基于jQuery，为开发者提供了一系列的UI组件，如DataGrid、Form、...
2. **实现方式**：jQuery Easy UI 的排序功能是通过其内置的`datagrid`或`treegrid`组件提供的。这些组件具有自动排序的能力，只需在初始化时设置相应的参数，或者通过调用特定方法触发排序。 二、`datagrid`组件的...
在实例中，可以通过CSS类`easyui-accordion`来替代JS初始化部分，实现相同的效果。这种方式更加简洁，适合快速原型设计。 #### 三、DateBox（日期框） **1. 实例** DateBox提供了选择日期的功能，可以通过设置...
- **实例**: 介绍如何实现一个带有上下调整按钮的数字输入框，并可以设置最大值、最小值等。 - **参数**: 配置NumberBox的参数，例如步长、最小/最大值等。 - **方法**: 提供获取和设置NumberBox值的方法。 ###...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它提供了一系列组件，帮助开发者快速构建用户界面。这个中文文档详细介绍了各种组件的使用，包括其实例、参数、事件和方法。下面将对这些组件进行深入的解释。 1....
在 "01easyDemo.rar" 文件中，我们可以通过一个实际的小案例来深入理解 EasyUI 在实现表格操作和树形结构方面的应用，包括表格记录的上下移动、树节点的新增与删除、表字段的排序以及树与表格数据的同步。...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列组件，帮助开发者快速构建用户界面。这个框架使用简单，功能丰富，适用于开发Web应用程序。以下是对标题和描述中提及的几个主要组件的详细解释： 1. **...