jQuery easyUI表格数字列进行排序

最新推荐文章于 2023-06-17 00:56:27 发布

独孤战天斗神

最新推荐文章于 2023-06-17 00:56:27 发布

阅读量906

点赞数

分类专栏：前端技术文章标签： jQuery easyUI数字列排序

本文链接：https://blog.csdn.net/ygl19920119/article/details/81531139

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery easyUI表格（datagrid）数字列进行排序

一：各个类排序互不影响（排序只排序本列，其他的列没有影响）

示例图如下：

这里写图片描述

HTML代码：

<body style="background-color: #E1ECFF">
    <div style="width: 60%;height:80%;">
        <table id="dg" class="easyui-datagrid" ></table>
    </div>
</body>

js代码：

注：代码说明，int，long类型的数据直接通过sortable:true，就可以实现排序的功能，如英语，数学，综合三列；float，double类型的数据要通过其相应的比较才能实现其排序，写法：如总分列的实现

sortable:true,
sorter:function(a,b){  
    var number1 = parseFloat(a);
    var number2 = parseFloat(b);
    return (number1 > number2 ? 1 : -1);
}

只写sortable:true是实现不了功能的，如语文列的数据；如下图所示：
这里写图片描述

$(function(){
    $('#dg').datagrid({
        url:"${ctx }/easyUI/columOrder.do",//访问路径
        sortOrder:'desc',
        multiSort:false,
        loadMsg:'正在加载，请稍后...',
        singleSelect:true,
        pageSize:50,
        pageNumber:1,
        pageList:[50,100,150,200,500],
        pagination:true,
        fitColumns:true,
        rownumbers: true, 
        fit: true,
        striped:true,
        remoteSort:false,  
        columns:[[
            { field: 'Name',  title: '姓名',width:100,align:'center'},
            { field: 'Chinese',  title: '语文',width:100,align:'center',sortable:true},
            { field: 'English', title: '英语',width:100,align:'center',sortable:true},
            { field: 'Math', title: '数学',width:100,align:'center',sortable:true},
            { field: 'ComprehensiveScience', title: '综合',width:100,align:'center',sortable:true },
            { field: 'TotalPoints', title: '总分',width:100,align:'center',sortable:true,
                sorter:function(a,b){  
                    var number1 = parseFloat(a);
                    var number2 = parseFloat(b);
                    return (number1 > number2 ? 1 : -1);
                } 
            }
        ]],
        onLoadSuccess:function(data){

        }
    });        
    $('#dg').datagrid('getPager').pagination({
        beforePageText:'第',
        afterPageText:'共{pages}页',
        displayMsg:'显示{from}到{to},共{total}记录',
        showPageList:true,
        showRefresh:true,
        onBeforeRefresh:function(pageNumber, pageSize){ 
            $(this).pagination('loading');
            $(this).pagination('loaded'); 
        }
    });
});

后台代码：

@Controller
@RequestMapping("/easyUI")
public class EasyUITestController {

    @RequestMapping("/columOrder.do")
    @ResponseBody
    public DataGridReturn columOrder(HttpServletRequest request, HttpServletResponse response, 
            DataGrid dataGrid) throws Exception{
        List<Map<String,Object>> resultList = new ArrayList<Map<String,Object>>();
        Map<String,Object> map = null;

        for(int i=0;i<500;i++){
            map = new HashMap<String, Object>();
            double chineseRandom = new Random().nextDouble()*150;
            int englishRandom = new Random().nextInt(150);
            int mathRandom = new Random().nextInt(150);
            int comprehensiveScienceRandom = new Random().nextInt(300);

            BigDecimal b = new BigDecimal(chineseRandom); 
            double df = b.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();

            map.put("Name", "学生"+i);
            map.put("Chinese", df+"");
            map.put("English", englishRandom);
            map.put("Math", mathRandom);
            map.put("ComprehensiveScience",comprehensiveScienceRandom);
            map.put("TotalPoints", new BigDecimal(chineseRandom+englishRandom+mathRandom+
                    comprehensiveScienceRandom).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue());
            resultList.add(map);
        }

        int page = dataGrid.getPage();
        int rows = dataGrid.getRows();
//      System.out.println(page+","+rows);
        List<Map<String,Object>> listResultsEnd=new ArrayList<Map<String,Object>>();

        for (int i = (page-1)*rows; i < page*rows; i++) {
            if(resultList.size()>=(i+1)){
                listResultsEnd.add(resultList.get(i));
            }
        }

        return new DataGridReturn(resultList.size(), listResultsEnd);
    }

实体类代码：DataGrid
主要是 easyui的datagrid向后台传递参数，获取相关参数的信息。

/**
 * <b>Application name:</b> DataGrid.java <br>
 * <b>Application describing: easyui的datagrid向后台传递参数使用的model</b> <br>
 * <b>Copyright:</b> Copyright &copy; 2015 zhursh 版权所有。<br>
 * <b>Company:</b> zhursh <br>
 * <b>Date:</b> 2015-6-29 <br>
 * @author <a href="mailto:zhursh133@sina.com"> zhursh </a>
 * @version V1.0
 */
public class DataGrid {
    private int page = 1;// 当前页
    private int rows = 10;// 每页显示记录数
    private String sort = null;// 排序字段名
    private SortDirection order = SortDirection.asc;// 按什么排序(asc,desc)
    private String field;// 字段
    private String treefield;// 树形数据表文本字段
    private List results;// 结果集
    private int total;// 总记录数
    private String footer;// 合计列
    private String sqlbuilder;// 合计列

   下面是set，get方法

}

实体类代码：DataGrid


/**
 * <b>Application name:</b> DataGridReturn.java <br>
 * <b>Application describing: 后台向前台返回JSON，用于easyui的datagrid</b> <br>
 * <b>Copyright:</b> Copyright &copy; 2015 zhursh 版权所有。<br>
 * <b>Company:</b> zhursh <br>
 * <b>Date:</b> 2015-6-29 <br>
 * @author <a href="mailto:zhursh133@sina.com"> zhursh </a>
 * @version V1.0
 */
public class DataGridReturn {

    public DataGridReturn(Integer total, List rows) {
        this.total = total;
        this.rows = rows;
    }
    private Integer total;// 总记录数
    private List rows;// 每行记录    
    private boolean success;    
    private String msg;
    private List footer;

   下面是set，get方法

}