jquery easyUI DataGrid 初始化的时候就显示可排序的字段
在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的。
给可排序的字段添加 图标在列名后面。不可排序的字段还和原来一样。
步骤:
-
你需要一个图标 ,
-
你需要给你的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部分为手动添加的。
-
最后,给你的项目添加应用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");
}最后上一张效果图
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。