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生 ...
随机推荐
- NSDictionary初始化,使用@{}方法,插入nil时会报空指针异常
由于今天在NSDictionary初始化的时候出现Crash异常,故记录一下,避免下次再犯. 在Objective-C中,NSDictionary初始化的方法有很多种 方法1: [NSDictiona ...
- Octet string 解析
百度百科的 ASN.1 http://baike.baidu.com/view/26378.htm 什么是 octet string 结构化字节 怎么解析,这里有微软的解析方法 If the byte ...
- SQL Server T-SQL基础
--数据库:数据库软件:mssqlserver,oracle,db2, ACCESS,SQLITE --数据库文件:分数据文件(MDF)和日志文件(log) 班级名称:(四期班训练营)长度可变,有中文 ...
- hdu2317Nasty Hacks
Problem Description You are the CEO of Nasty Hacks Inc., a company that creates small pieces of mali ...
- VS2010 配置 DirectX 开发环境
1.首先下载 DXSDK 并安装 http://download.microsoft.com/download/A/E/7/AE743F1F-632B-4809-87A9-AA1BB3458E31/D ...
- C语言--C语言程序
一.代码的编写 1.程序结构 1> C语言程序的结构:由函数构成 *任何一个c语言程序都是由一个或者多个程序段(小程序)构成的,每个程序段都有自己的功能,我们一般称这些程序段为“函数”.所以,我 ...
- Oracle EBS-SQL (PO-15):检查不能审批的PO.sql
SELECT PHA.SEGMENT1, PHA.WF_ITEM_KEY, PHA.* FROM PO.PO_HEADERS_ALL PHA WHERE PHA.AUTHORIZATION_STA ...
- 一道C语言面试题:判断字串是否可以通过重新排列字母使之对称
题目:输入一个字符串,如“adcaeceeed”,判断是否可以通过重新排列使之可以输出对称字符串,如本例可以输出“adceeeecda”,返回True. 来源:某500强企业面试题目 思路:扫描字串, ...
- 实用的PHP正则表达式
正则表达式是程序开发中一个重要的元素,它提供用来描述或匹配文本的字符串,如特定的字符.词或算式等.但在某些情况下,用正则表达式去验证一个字符串比较复杂和费时.本文为你介绍10种常见的实用PHP正则表达 ...
- 实测Eclipse连接小米2S调试问题
小米2S手机在Eclipse真机调试时,设备选择列表无法显示手机,DDMS也连接不上设备,解决步骤: 1.打开手机设置中开发者选项 - USB调试开启: 2.保证小米2S手机Windows下设备驱动已 ...