EasyUi中的$('#grid').datagrid表头排序显示可排序图标

版权声明：博主最近都在，有不懂疑惑的，可以一起交流，也希望能有高人指点一二，谢啦！本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_40295575/article/details/81974900

第一步：设置datagrid可排序的表头，关键代码附上（以下是自定义投票项目代码的一小节）

{
		field : 'average',
		title : '平均分数',
		width : 120,
		align : 'center',
		sortable:true,//这个
		formatter:function(value,rowData,rowIndex){
			if(value==null)
				return "未有评委评分";
			else
				return value;
		}
	}]];



$('#grid').datagrid( {
			iconCls : 'icon-forward',
			fit : true,
			border : false,
			rownumbers : true,
			striped : true,
			pageList: [100,200],
			pagination : true,
			toolbar : toolbar,
			remoteSort:false,//这个
			url : "${pageContext.request.contextPath}/adminVote_pageQueryBpfrDetail.action",
			idField : 'id',
			columns : columns
		});

第二步：找到你想要的图标，这里就给你们附上一个常用的小图标吧。自己下载保存命名为sorter.png，其实名字跟到时候改的样式一致即可。图片需要需要放在easyUI的文件里面。

第三步：看你用的是什么主题，我用的是默认的，所以在easyui/themes/defaut/easyui.css中修改，Ctrl+F寻找.datagrid-sort-desc，加上以下代码，图标名一致即可

/**这里是需要你添加的**/
.datagrid-sort .datagrid-sort-icon {
    display: inline;
    padding: 0 13px 0 0;
    margin-left:4px;
    background: url('images/sorter.png') no-repeat 0 center;
}
/**这里是需要你添加的**/
.datagrid-sort-asc .datagrid-sort-icon,.datagrid-sort-desc .datagrid-sort-icon {
    display: inline;
    margin-left:0;
}
.datagrid-sort-desc .datagrid-sort-icon {
  padding: 0 13px 0 0;
  background: url('images/datagrid_icons.png') no-repeat -16px center;
}
.datagrid-sort-asc .datagrid-sort-icon {
  padding: 0 13px 0 0;
  background: url('images/datagrid_icons.png') no-repeat 0px center;
}

第四步：修改jquery.easyui.min.js文件

var cell=td.find("div.datagrid-cell");
if(col.sortable==true) {//加上这个if
cell.addClass("datagrid-sort");
}
if(col.resizable==false){
cell.attr("resizable","false");
}

第五步：效果图