jquery easyUI DataGrid 初始化的时候就显示可排序的字段
在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的。
给可排序的字段添加
图标在列名后面。不可排序的字段还和原来一样。
步骤:
你需要一个图标
,你需要给你的easy ui源码添加如下代码
$("span",td).html(col.title);
$("span.datagrid-sort-icon",td).html(" ");
var cell=td.find("div.datagrid-cell");
if (opts.sortName == col.field) {
cell.addClass("datagrid-sort-" + opts.sortOrder);
} else if(col.sortable==true) {
cell.addClass("datagrid-sort");
}其中最后一个else if部分为手动添加的。
最后,给你的项目添加应用css即可
.datagrid-sort .datagrid-sort-icon {
padding: 0 13px 0 0;
margin-left:4px;
background: url('images/sorter.png') no-repeat 0px center;
}
.datagrid-sort-asc .datagrid-sort-icon,.datagrid-sort-desc .datagrid-sort-icon {
margin-left:0px;
}备注:图片可自由选用,其次,样式名字可自由选用(“datagrid-sort”为我自定义的),最后,我的easy ui是压缩版1.3.2的,搜索“datagrid-sort-icon”可找到对应代码部分,找到
if (opts.sortName == col.field) {
cell.addClass("datagrid-sort-" + opts.sortOrder);
}给这个if语句添加分支else if(col.sortable==true) {
cell.addClass("datagrid-sort");
}最后上一张效果图

jquery easyUI DataGrid 初始化的时候就显示可排序的字段的更多相关文章
- jquery easyui datagrid 将值作为img显示图片时报404 undefined
原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {} value = undefined index = 0 进行一次渲染, 在没有formater情况将数据 ...
- jquery easyui DataGrid 动态的改变列显示的顺序
$.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- jquery easyui datagrid 分页 详解
前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- JQuery easyUi datagrid 中 editor 动态设置最大值最小值
前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagri ...
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
随机推荐
- windows驱动编程(目录)
目录 第一章 入门 配置开发环境 第一个程序 应用程序调用内核函数的流程
- activity的生命周期详解
刚在看mars老师的视频,看到activity的生命周期,就看了一下,总结了一下.下面是各函数的调用时机 为了更清楚的看清楚工作的具体过程,举例如下: ,建立两个activity,一个main,一个a ...
- MySql优化方案
mysql优化方案总结 u Mysql数据库的优化技术 对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索 ...
- 手机触摸屏的JS事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...
- SQL Server dbcc shrinkfile 不起作用
方法 1.重建聚集索引. 方法 2.重建堆表. ---------------------------------------------------------------------------- ...
- MFC连接ftp服务器
CInternetSession* m_pInetSession; CFtpConnection* m_pFtpConnection; //连接服务器的函数 BOOL CftpClientDlg: ...
- 通过HOOK控制进程的创建
一. 简介 最近,我了解到一个叫做Sanctuary的相当有趣的安全产品.它能够阻止任何程序的运行-这些程序没有显示在软件列表中-该表中的程序被允许在一个特定的机器上运行.结果,PC用户得到保护而免于 ...
- 在 Inno Setup 中实现倒数N秒后激活按钮
原文 http://restools.hanzify.org/article.asp?id=67 timectrl.dll 为一个 6.5 KB 的按钮激活时间控制插件. 引用来自 Example1 ...
- Android Activity跳转动画,让你的APP瞬间绚丽起来
我们都知道绚丽的APP总会给用户耳目一新的感觉,为了抓住用户更大网络公司使出浑身解数让自己的产品更绚丽,而绚丽最简单的效果就是Activity跳转效果,不仅可以让用户看起来舒服,而且实现起来也特别简单 ...
- Unix/Linux环境C编程入门教程(25) C/C++字符测试那些事儿
isalnum isalpha isascii iscntrl isdigit isgraph isislower isprint isspace ispunct isupper isxdigit介绍 ...