在使用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. java菜鸟篇<四> ZTree入门篇

    今天准备入手ZTree,于是在百度上搜了搜,找到了开源网址和一些大神们的教程,于是乎下午开始了组织树(ZTree)的练习 初步完整的作品是这个样子的: 1.咱们要去这个工具的开源网里找下载的东西: ( ...

  2. Windows 7下 搭建 基于 ssh 的sftp 服务器

    Windows  xp 下 搭建 基于  ssh 的sftp 服务器,服务器端可以用 freesshd,F-secure server等,filezilla server不可用,之前傻乎乎的用file ...

  3. Laravel Packages 开发

    Packages是向Laravel中添加功能最重要的途径.composer.json中require的都是包.关于包的详细说明请查看 API . 下面一起创建一个简单的Package : 1. 环境配 ...

  4. FormSheet式模态视图,点击模态视图外隐藏模态视图的方法

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  5. mysql解压版配置

    2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下,我的解压目录是: "D:\Program Files\MySQL\mysql-5.6.13-win32" ...

  6. KeybMap 键盘映射工具更新至 V1.5(修订)

    KeybMap 更新至 V1.5,主要是增加了对一些多媒体键定义修改功能,也可以将任意一键定义为打开指定的程序. 3月9日略做修订. http://www.mympc.org/down/1/2005- ...

  7. QTDesigner的QVBoxLayout自动随窗口拉伸

    在MainWindow的构造函数中添加如下代码://设置Uiui.setupUi(this); //使Ui可自适应父窗口大小QVBoxLayout* mainLayout = new QVBoxLay ...

  8. QT多重继承的时候,要把QObject放在最前面,否则报错——C++认为人性本恶,默认都是私有的,这点和Delphi的世界观不一样

    在买来的控件(没有源码)的基础上,想加入QObject的一些特性,不得不多继承: class MyProgress : public CProgress, public QObject 但总是报错: ...

  9. MFC 动态创建按钮

    首先在对话框(模式对话框,无模式对话框)中添加一个ADD按钮,通过点击按钮产生的通告消息调用::OnBtnAdd()方法.此方法会在对话框的左上角创建一个按钮. 当然首先要在和次对话框相关联的类中添加 ...

  10. C语言的本质(26)——C标准库之数值字符串转换

    C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串. #include <stdlib.h> int atoi(const char *nptr); a ...