jeesite datagrid双击表头当前页面排序

时间: 2023-08-12 14:17:41 浏览: 102
JeeSite的DataGrid控件默认是在后台进行排序的,如果需要在前台实现双击表头当前页面排序,可以在DataGrid的onHeaderContextMenu事件中添加双击表头事件的处理函数。 下面是一个示例代码: ```javascript $('#datagrid').datagrid({ url: '...', // 在onHeaderContextMenu事件中添加双击表头事件处理函数 onHeaderContextMenu: function(e, field) { e.preventDefault(); if (e.originalEvent.detail == 2) { // 判断是否双击事件 // 获取DataGrid对象 var grid = $(this); // 获取当前排序的字段和排序方式 var sortField = grid.datagrid('options').sortName; var sortOrder = grid.datagrid('options').sortOrder; // 切换排序方式并重新加载数据 if (sortOrder == 'asc') { grid.datagrid('sort', { sortName: field, sortOrder: 'desc' }); } else { grid.datagrid('sort', { sortName: field, sortOrder: 'asc' }); } } } }); ``` 在上面的代码中,我们在DataGrid的onHeaderContextMenu事件中添加了双击表头事件处理函数。在该处理函数中,我们首先判断当前事件是否为双击事件,然后获取当前排序的字段和排序方式。最后根据当前排序方式切换排序方式并重新加载数据。
阅读全文

相关推荐

js
点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加 3、排序的内容加 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; $$A.forEach([ ["idNum", { type: "int" }],//排序对象(对应列的id) ["idTitle", { index: 1 }], ["idExt", { index: 1, property: "_ext" }], ["idAddtime", { index: 2, type: "date" }], ["idSize", { index: 3, property: "_order", type: "int" }], ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], ["idRadio", { index: 5, type: "bool", value: SetCheck }] ], function (arr){ var o = $$(arr[0]), order = to.creat(arr[1]); order.onBegin = function(){ ClearCss(); odID.desc = this.desc; } order.onEnd = function(){ o.className = this.desc ? "desc" : "asc";//设置样式 this.desc = !this.desc;//取反排序 } o.onclick = function(){ to.sort(order, odID); } arrOrder.push(o);//记录排序项目(这里主要用来设置样式) }); [removed] 7、【排序对象】 属性 默认值//说明 index: 0,//td索引 property: "innerHTML",//获取数据的属性 type: "string",//比较的数据类型 desc: true,//是否按降序 compare: null,//自定义排序函数 value: null,//自定义取值函数 repair: this._repair,//是否解决checkbox和radio状态恢复bug onBegin: function(){},//排序前执行 onEnd: function(){}//排序后执行 */ //完整的示例 //<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //<html> //<head> //<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //<title>Table 排序</title> //[removed][removed] //</head> //<body> //<style type="text/css"> //.odTable {width:500px;border:1px solid #ebebeb;line-height:20px;font-size:12px;background:#FFF;} //.odTable thead {background-color:#ebebeb;} //.odTable span {color:#333;padding-right:15px;cursor:pointer;} //.odTable .desc, .odTable .asc {background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;} //.odTable .desc {background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);} //</style> // // // // ID //  名称 / 类型 // 上传时间 // 大小 // // // // // // // 1 // new.htm // 2008/9/12 // 423.09 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 2 // Scroller.js // 2008/9/23 // 2.5 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 3 // AlertBox.js // 2008/9/23 // 3.48 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 4 // 1.xml // 2008/10/4 // 11.13 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 5 // 4.xml // 2008/10/4 // 108 b // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 6 // news.htm // 2008/10/4 // 13.74 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 7 // function.js // 2008/10/4 // 2.78 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 8 // 神秘园 - Nocturne.mp3 // 2008/9/20 // 2.97 M // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 9 // 详细功略+剧情流程(一).doc // 2009/2/2 // 62 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // 10 // 详细功略+剧情流程(二).doc // 2009/2/2 // 160.5 K // <input type="checkbox"/></td> // <input name="c" type="radio"/></td> // // // //
//有中文的先排前面,再按时间倒序,ID倒序排序: //<input name="" type="button" value="Sort" id="idBtn" /> //[removed] //var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; //$$A.forEach([ // ["idNum", { type: "int" }], // ["idTitle", { index: 1 }], // ["idExt", { index: 1, property: "_ext" }], // ["idAddtime", { index: 2, type: "date" }], // ["idSize", { index: 3, property: "_order", type: "int" }], // ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], // ["idRadio", { index: 5, type: "bool", value: SetCheck }] //], function (arr){ // var o = $$(arr[0]), order = to.creat(arr[1]); // order.onBegin = function(){ ClearCss(); odID.desc = this.desc; } // order.onEnd = function(){ // o.className = this.desc ? "desc" : "asc";//设置样式 // this.desc = !this.desc;//取反排序 // } // o.onclick = function(){ to.sort(order, odID); } // arrOrder.push(o);//记录排序项目(这里主要用来设置样式) //}); //$$("idNum").onclick(); //////////////////////////////////////////////////////////////////////// //var od1 = to.creat({ index: 1, onEnd: ClearCss, // compare: function(value1, value2) { // var re = /[\u4E00-\u9FA5]/, v1 = re.test(value1), v2 = re.test(value2); // return v1 == v2 ? 0 : (v1 ? 1 : -1); // } // }) // ,od2 = to.creat({ index: 2, type: "date" }) ,od3 = to.creat({ type: "int" }); //$$("idBtn").onclick = function(){ to.sort(od1, od2, od3); } //[removed] //</body> //</html>

最新推荐

recommend-type

C#实现给DataGrid单元行添加双击事件的方法

在C#编程中,DataGrid控件是一种常用的用于展示数据集合的UI元素,它允许用户交互,例如排序、选择和编辑。在这个特定的场景中,我们关注的是如何为DataGrid的每一行添加双击事件,以便在用户双击某一行时触发特定的...
recommend-type

jQuery EasyUI编辑DataGrid用combobox实现多级联动

在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
recommend-type

GridView或DataGrid 固定表头,滚动数据的例子学习心得

1. 创建一个新的table(复制当前的表头),并将其显示在Datagrid或GridView的前面,这样即使数据区域滚动,表头也会保持可见。 2. 在调用时,需要确保Datagrid或GridView的样式设置为`style="table-layout:fixed"`,...
recommend-type

easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

3. 使用服务器端排序和过滤:避免在客户端对大量数据进行排序和过滤,将这些操作交给服务器处理,减少前端的数据处理量。 4. 减少列宽和列数:过多的列和过宽的列会导致更多的计算和渲染,适当减少可以提升性能。 ...
recommend-type

c#datagrid操作,解决datagridView加载慢.docx

在上面的代码中,我们使用 DataGrid 控件代替 DataGridView 控件,并使用 DataGridTableStyle 对象来设置 DataGrid 的样式。我们还使用了 DataGridColumnStyle 对象来设置每一列的样式。在加载数据时,我们使用了 ...
recommend-type

CentOS 6下Percona XtraBackup RPM安装指南

### Percona XtraBackup RPM安装知识点详解 #### 一、Percona XtraBackup简介 Percona XtraBackup是一个开源的MySQL数据库热备份工具,它能够进行非阻塞的备份,并支持复制和压缩功能,大大降低了备份过程对数据库性能的影响。该工具对MySQL以及衍生的数据库系统(如Percona Server和MariaDB)都非常友好,并广泛应用于需要高性能和备份安全性的生产环境中。 #### 二、Percona XtraBackup安装前提 1. **操作系统环境**:根据给出的文件信息,安装是在CentOS 6系统环境下进行的。CentOS 6已经到达其官方生命周期的终点,因此在生产环境中使用时需要考虑到安全风险。 2. **SELinux设置**:在安装Percona XtraBackup之前,需要修改`/etc/sysconfig/selinux`文件,将SELinux状态设置为`disabled`。SELinux是Linux系统下的一个安全模块,通过强制访问控制保护系统安全。禁用SELinux能够降低安装过程中由于安全策略造成的问题,但在生产环境中,建议仔细评估是否需要禁用SELinux,或者根据需要进行相应的配置调整。 #### 三、RPM安装过程说明 1. **安装包下载**:在安装Percona XtraBackup时,需要使用特定版本的rpm安装包,本例中为`percona-xtrabackup-24-2.4.5-1.el6.x86_64.rpm`。RPM(RPM包管理器)是一种在Linux系统上广泛使用的软件包管理器,其功能包括安装、卸载、更新和查询软件包。 2. **执行安装命令**:通过命令行执行rpm安装命令(例如:`rpm -ivh percona-xtrabackup-24-2.4.5-1.el6.x86_64.rpm`),这个命令会安装指定的rpm包到系统中。其中,`-i`代表安装(install),`-v`代表详细模式(verbose),`-h`代表显示安装进度(hash)。 #### 四、CentOS RPM安装依赖问题解决 在进行rpm安装过程中,可能会遇到依赖问题。系统可能提示缺少某些必要的库文件或软件包。安装文件名称列表提到了一个word文档,这很可能是解决此类依赖问题的步骤或说明文档。在CentOS中,可以通过安装`yum-utils`工具包来帮助解决依赖问题,例如使用`yum deplist package_name`查看依赖详情,然后使用`yum install package_name`来安装缺少的依赖包。此外,CentOS 6是基于RHEL 6,因此对于Percona XtraBackup这类较新的软件包,可能需要从Percona的官方仓库获取,而不是CentOS自带的旧仓库。 #### 五、CentOS 6与Percona XtraBackup版本兼容性 `percona-xtrabackup-24-2.4.5-1.el6.x86_64.rpm`表明该安装包对应的是Percona XtraBackup的2.4.5版本,适用于CentOS 6平台。因为CentOS 6可能不会直接支持Percona XtraBackup的最新版本,所以在选择安装包时需要确保其与CentOS版本的兼容性。对于CentOS 6,通常需要选择专门为老版本系统定制的软件包。 #### 六、Percona XtraBackup的高级功能 Percona XtraBackup不仅支持常规的备份和恢复操作,它还支持增量备份、压缩备份、流式备份和传输加密等高级特性。这些功能可以在安装文档中找到详细介绍,如果存在word文档说明解决问题的过程,则该文档可能也包含这些高级功能的配置和使用方法。 #### 七、安装后配置与使用 安装完成后,通常需要进行一系列配置才能使用Percona XtraBackup。这可能包括设置环境变量、编辑配置文件以及创建必要的目录和权限。关于如何操作这些配置,应该参考Percona官方文档或在word文档中查找详细步骤。 #### 八、维护与更新 安装后,应定期检查Percona XtraBackup的维护和更新,确保备份工具的功能与安全得到保障。这涉及到查询可用的更新版本,并根据CentOS的包管理器(如yum或rpm)更新软件包。 #### 总结 Percona XtraBackup作为一款强大的MySQL热备份工具,在生产环境中扮演着重要角色。通过RPM包在CentOS系统中安装该工具时,需要考虑操作系统版本、安全策略和依赖问题。在安装和配置过程中,应严格遵守官方文档或问题解决文档的指导,确保备份的高效和稳定。在实际应用中,还应根据实际需求进行配置优化,以达到最佳的备份效果。
recommend-type

【K-means与ISODATA算法对比】:聚类分析中的经典与创新

# 摘要 聚类分析作为数据挖掘中的重要技术,用于发现数据中的自然分布模式。本文首先介绍了聚类分析的基本概念及其意义,随后深入探讨了两种广泛使用的聚类算法:K-means和ISODATA。文章详细解析了这两个算法的原理、实现步骤及各自的优缺点,通过对比分析,展示了它们在不同场景下的适用性和性能差异。此外,本文还讨论了聚类算法的发展趋势,包括算法优化和新兴领域的应用前景。最
recommend-type

jupyter notebook没有opencv

### 如何在Jupyter Notebook中安装和使用OpenCV #### 使用`pip`安装OpenCV 对于大多数用户而言,最简单的方法是通过`pip`来安装OpenCV库。这可以通过运行以下命令完成: ```bash pip install opencv-python pip install opencv-contrib-python ``` 上述命令会自动处理依赖关系并安装必要的组件[^3]。 #### 利用Anaconda环境管理工具安装OpenCV 另一种推荐的方式是在Anaconda环境中安装OpenCV。这种方法的优势在于可以更好地管理和隔离不同项目的依赖项。具体
recommend-type

QandAs问卷平台:基于React和Koa的在线调查工具

### 知识点概述 #### 标题解析 **QandAs:一个问卷调查平台** 标题表明这是一个基于问卷调查的Web平台,核心功能包括问卷的创建、编辑、发布、删除及统计等。该平台采用了现代Web开发技术和框架,强调用户交互体验和问卷数据处理。 #### 描述详细解析 **使用React和koa构建的问卷平台** React是一个由Facebook开发和维护的JavaScript库,用于构建用户界面,尤其擅长于构建复杂的、数据频繁变化的单页面应用。该平台的前端使用React来实现动态的用户界面和组件化设计。 Koa是一个轻量级、高效、富有表现力的Web框架,用于Node.js平台。它旨在简化Web应用的开发,通过使用async/await,使得异步编程更加简洁。该平台使用Koa作为后端框架,处理各种请求,并提供API支持。 **在线演示** 平台提供了在线演示的链接,并附有访问凭证,说明这是一个开放给用户进行交互体验的问卷平台。 **产品特点** 1. **用户系统** - 包含注册、登录和注销功能,意味着用户可以通过这个平台进行身份验证,并在多个会话中保持登录状态。 2. **个人中心** - 用户可以修改个人信息,这通常涉及到用户认证模块,允许用户查看和编辑他们的账户信息。 3. **问卷管理** - 用户可以创建调查表,编辑问卷内容,发布问卷,以及删除不再需要的问卷。这一系列功能说明了平台提供了完整的问卷生命周期管理。 4. **图表获取** - 用户可以获取问卷的统计图表,这通常需要后端计算并结合前端可视化技术来展示数据分析结果。 5. **搜索与回答** - 用户能够搜索特定的问卷,并进行回答,说明了问卷平台应具备的基本互动功能。 **安装步骤** 1. **克隆Git仓库** - 使用`git clone`命令从GitHub克隆项目到本地。 2. **进入项目目录** - 通过`cd QandAs`命令进入项目文件夹。 3. **安装依赖** - 执行`npm install`来安装项目所需的所有依赖包。 4. **启动Webpack** - 使用Webpack命令进行应用的构建。 5. **运行Node.js应用** - 执行`node server/app.js`启动后端服务。 6. **访问应用** - 打开浏览器访问`http://localhost:3000`来使用应用。 **系统要求** - **Node.js** - 平台需要至少6.0版本的Node.js环境,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它使JavaScript能够在服务器端运行。 - **Webpack** - 作为现代JavaScript应用程序的静态模块打包器,Webpack可以将不同的模块打包成一个或多个包,并处理它们之间的依赖关系。 - **MongoDB** - 该平台需要MongoDB数据库支持,MongoDB是一个面向文档的NoSQL数据库,它使用易于理解的文档模型来存储数据,并且能够处理大量的数据和高并发读写。 #### 标签解析 - **React** - 应用的前端开发框架。 - **Redux** - 可能用于管理应用的状态,尽管在描述中没有提及,但标签的存在暗示了它可能被集成在项目中。 - **nodejs** - 表明整个平台是基于Node.js构建的。 - **koa** - 应用的后端开发框架。 - **questionnaire** - 强调该平台的主要用途是处理问卷。 - **KoaJavaScript** - 这个标签可能表明整个项目用JavaScript和Koa框架开发。 #### 压缩包子文件的文件名称列表 **QandAs-master** 这个文件名说明,这是该问卷平台项目的源代码仓库的主分支。在Git中,“master”通常是指主分支,包含了所有已经发布或准备发布的代码版本。 ### 结语 通过以上分析,QandAs这个问卷调查平台具备了完整的问卷生命周期管理功能,并使用了现代的前端和后端技术构建。它提供了一个便捷的在线问卷制作和数据分析平台,并且可以完全通过Git进行版本控制和源代码管理。开发者可以利用这个平台的标签和描述信息来理解项目结构和技术栈,以便进行学习、扩展或维护。
recommend-type

RLE编码与解码原理:揭秘BMP图像处理的关键步骤,提升解码效率

# 摘要 本文深入探讨了RLE(Run-Length Encoding)编码与解码的基础知识、原理和实现,以及其在BMP图像处理中的应用。RLE作为一种简单的无损数据压缩技术,通过识别数据中重复出现的序列来减少文件大小。本文详细解释了RLE的编码和解码原