问题引入:
近期在折腾学习EasyUI的用法,最近碰到一个需求:
一、 对表格数据进行列排序。
官方给出了两种的排序方法:
1. 本地排序,不向后台发送请求直接根据本地数据排序。
方法:在表格设置
remoteSort=”false”,在对应排序列sortable:true
2. 发送请求后台执行再返回排序好的数据
这种http://www.jeasyui.net/tutorial/29.html是发送请求传参到服务器,再根据参数在服务器执行查询返回,然而我一开始想法是想偷懒,既然本地已经实现排序功能,为什么要等服务器执行返回呢?
因此采取第2种方案,经过一段时间的折腾,发现只有部分列可以实现本地排序。
Jsp部分代码如下:
<table id="dg" class="easyui-datagrid" title="订单项管理"
style="width: 100%; height: auto" remoteSort="false"
data-options="
loadMsg: '正在加载,请稍候...',
rownumbers:true,
pagination:true,
pageList: [5, 10, 50],
striped: true,
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: '${ pageContext.request.contextPath }/orderItems_findByPage.action',
method: 'get',
onClickRow: onClickRow">
<thead>
<tr>
<!-- 各列 -->
<!-- 自增主键隐藏 -->
<th data-options="field:'ori_id',align:'center',hidden:'true'">订单项ID</th>
<!-- Todo .....$#%#$% 排序( sortable:true) -->
<th data-options="field:'ord_username',align:'center', width:'12%',
formatter:function(value,row){
value = row.orders.user.user_name;
return value;
}" >订单用户</th>
<th data-options="field:'orders',align:'center', width:'13%',
formatter:function(value,row){
value = row.orders.ord_number;
return value;
}">所属订单号</th>
<th data-options="field:'goods_id',align:'center',width:'4%',sortable:true">商品id</th>
<%-- <th data-options="url: '${ pageContext.request.contextPath }/orders_findById.action',
field:'goods_name',align:'center',width:'30%'">商品名称</th> --%>
<th data-options="field:'goods_num',align:'center',width:'8%',sortable:true">商品项数量</th>
<th data-options="field:'ori_address',align:'center',width:'25%',sortable:true">收货地址</th>
<th data-options="field:'ori_state',align:'center',width:'8%',sortable:true,
formatter:function(value,row){
if(value=='1'){
value=