在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的。

给可排序的字段添加 图标在列名后面。不可排序的字段还和原来一样。

步骤:

    1. 你需要一个图标

    2. 你需要给你的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部分为手动添加的。

    3. 最后,给你的项目添加应用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 初始化的时候就显示可排序的字段的更多相关文章

  1. jquery easyui datagrid 将值作为img显示图片时报404 undefined

    原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {}  value = undefined  index = 0 进行一次渲染, 在没有formater情况将数据 ...

  2. jquery easyui DataGrid 动态的改变列显示的顺序

    $.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...

  3. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  4. jquery easyui datagrid 分页 详解

    前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...

  5. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  6. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  7. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  8. JQuery easyUi datagrid 中 editor 动态设置最大值最小值

    前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考.   问题 JQuery easyUi datagri ...

  9. JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

    转自   http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...

随机推荐

  1. 导出Eclipse环境配置

    第一种方法: Eclipse的 File -> Export(导出), 在窗口中展开 General(常规) -> Perferences(首选项)-->Export all(全部导 ...

  2. Xcode5 配置 github

    首先,要在github上,进行如下的操作: 1. github 官网 https://github.com  注册github账号. 2. 创建一个repository,命名为项目的名称,如 Gith ...

  3. 在Red Hat Enterprise Linux 5 64-bit安装oracle11g r2

    网上这种文档一搜就一堆,没别的目的,刚接触oracle为了加深理解记忆.只要是跟我的版本一样操作系统和oracle软件,按照步骤肯定可以成功安装 在虚拟机上安装Red Hat Enterprise L ...

  4. ThinkPHP框架搭建及常见问题(Apache或MySQL无法启动)----简单的初体验

    有一定基础的人勿进,这篇讲的只是零基础入门,都是我刚接触以及我所了解到的人刚开始有疑惑的地方,具体框架介绍会在后面的博客中介绍 这一篇只是为了一个简单的页面显示而介绍的方法,不涉及代码,开发环境,所以 ...

  5. js压缩解压工具

    参看下面链接:http://js.clicki.cc/

  6. How can I get the logical valume by the datafile names and ASM disks?

    Q:We use asmlib to create ASM disk in Oracle rac 11.2.0.3, and how can I get the logical valume by t ...

  7. android 图片合成

    package com.ebensz.eink.demo; import java.io.File; import java.io.FileOutputStream; import android.a ...

  8. RemoteViews的理解和使用

    一.RemoteViews简介 作用:跨进程更新界面                         使用场景:通知栏.桌面小部件 二.在通知栏上的应用 原理:通过RemoteViews加载布局,通过 ...

  9. rsync 安装使用详解

    rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.它的特性如下:可以镜像保存整个目录树和文件系统.可以很容易做到保持原来文件的权限.时间.软硬链接 ...

  10. YUM更换源--yum找不到安装包(转)

    公司提供的CentOS VM中,/etc/yum.repos.d 下 只有一个build.repo,其中提供的yum 源只有公司内部的几个源,很多包在这些源中都找不到.于是要添加别的源,下面的帖子中介 ...