jquery easyUI DataGrid 初始化的时候就显示可排序的字段

标签：

在使用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 初始化的时候就显示可排序的字段

标签：

原文地址：http://www.cnblogs.com/yresu/p/4512119.html