在使用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. Oracle查询指定某一天数据,日期匹配

    在做一个功能的时候,需要在oracle数据库中查询指定某一天的数据. 如果是简单的当前日期前后几天,也好办 AND TO_CHAR(Rct.Creation_Date, 'YYYY-MM-DD')=t ...

  2. Sublime Text 3中使用正则表达式删除空行

    Sublime Text 3 中使用正则表达式删除空行 Ctrl+H Find What: \n\n+ Replace With:\n

  3. T - 阿牛的EOF牛肉串(第二季水)

    Description          今年的ACM暑期集训队一共有18人,分为6支队伍.其中有一个叫做EOF的队伍,由04级的阿牛.XC以及05级的COY组成.在共同的集训生活中,大家建立了深厚的 ...

  4. c++STL之sort排序

    排序算法为竞赛中最常用的算法之一,我们可以利用C++自带的库函数进行排序.                                                                ...

  5. Bluestacks视窗界面调整及内存调整经验

    本文将分享bluestacks视窗界面调整及内存调整的经验,可以有效解决Bluestacks缓慢.卡的问题! 一.bluestacks视窗界面调整 1.进入注册表: 2.找到下图中的键值: 3.修改键 ...

  6. ComboGrid 行内点击编辑内容

    最近easyui需要在行内编辑选中项,但是编辑的内容出了当前选中列值,还有其他的,比较麻烦, 先看下这段代码 columns: [[ { field: 'GuestID', title: '编号', ...

  7. sublime远程连接到linux主机

    sublime远程连接到linux主机 sublime远程连接到linux主机 微信开发,直接使用sublime的sftp功能修改wx_sample.php 1.为sublime安装安装包管理插件Pa ...

  8. win32 调用多媒体函数PlaySound()

    必须引入此头文件 #include <mmsystem.h>#pragma comment(lib, "WINMM.LIB") /*------------------ ...

  9. java学习一目了然——异常必知

    java学习一目了然--异常必知 我们只要学java,异常肯定非常熟悉,该抛的时候抛一下就行.但是这其中还有点小细节需要注意.就用这个小短篇来说一下异常处理中的小细节吧. 异常处理 RuntimeEx ...

  10. C语言--关键字、标识(zhi)符、注释

    一.关键字 1. 关键字 是C语言中提供的有特殊含义的符号,同时也叫做保留字,在C语言中关键字一共有32个,它们分别被赋予了特殊的含义.如:main.int.struct等等. 2. 关键字的特征 1 ...