easyUI DataGrid 显示可排序的列

easyUI DataGrid 显示可排序的列

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

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

1、项目中添加一个图标 ，例如命名为：sorter.png；

2、在easyui.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");
}