<!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. **...