easyUI DataGrid 显示可排序的列

easyUI DataGrid 显示可排序的列

在使用easyui的DataGrid列表时,如果可以标记排序的字段,使用户一看页面就知道哪些是可以点击排序的,则能够很好的提高用户体验。

下面介绍 给可排序的字段添加   图标在列名后面的方法

1、项目中添加一个图标 ,例如命名为:sorter.png;

2、在easyui.css底部添加

  •  
  • 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;
    }
    
    		
  • 3、在easyui.js源码中搜索datagrid-sort-icon找到对应代码部分

    easyui1.3.2 版本

    找到

    $("span",td).html(col.title);
    $("span.datagrid-sort-icon",td).html(" ");
    var cell=td.find("li.datagrid-cell");
    if (opts.sortName == col.field) {
        cell.addClass("datagrid-sort-" + opts.sortOrder);
    }

    给这个if语句添加分支

    else if(col.sortable==true) {
        cell.addClass("datagrid-sort");

    easyui1.4.2 版本

    找到

    $("span",td).html(col.title);
    $("span.datagrid-sort-icon",td).html(" ");
    var cell=td.find("li.datagrid-cell");
    var pos=_584(_5da,col.field);
    if(pos>=0){
    cell.addClass("datagrid-sort-"+_5db[pos]);
    }

    给这个if语句添加分支

    else if(col.sortable==true) {
        cell.addClass("datagrid-sort");

    标签: