easyui grid 本地排序

0 0

easyui grid 本地排序10

请教大家一个问题：我希望easyui grid 本地的数据排序，在column中设置了sortable:true;在表格设置中设置了remoteSort:false。但是点击表头的时候数据消失了。
代码如下：
//jsp 代码
<table id="staffContact-grid" style="width:'100%';height:'100%';padding: 0px;margin: 0px;" border="false" data-options="">
        <thead>
            <tr>
                <th data-options="field:'name',width:100,align:'center'"><fmt:message key="name"/></th>
                <th data-options="field:'number',width:100,align:'center'" sortable="true"><fmt:message key="number"/></th>
                <th data-options="field:'sex',width:80,align:'center'" formatter="onGenderRD"><fmt:message key="sex"/></th>
                <th data-options="field:'orgName',width:100,align:'center'"><fmt:message key="department"/></th>
                <th data-options="field:'duty',width:100,align:'center'"><fmt:message key="duty"/></th>
                <th data-options="field:'telephone',width:100,align:'center'"><fmt:message key="telephone"/></th>
                <th data-options="field:'mobilePhone',width:100,align:'center'"><fmt:message key="mobilePhone"/></th>
                <th data-options="field:'alternatePhone',width:100,align:'center'"><fmt:message key="alternatePhone"/></th>
            </tr>
        </thead>
    </table>

//javascript 代码
$("#staffContact-grid").datagrid({
            url:"../../contact/contact/getStaffContactByCondition.action",
            rownumbers:true,
            singleSelect:true,
            nowrap:false,
            remoteSort:false,
            autoRowHeight:true,
            pagination:true,
            pageSize:30,
            //pageList : [ 30 ],
            toolbar:'#toolbar',
            idField:'id',
            striped: true,
            fitColumns: true,
            fit: true,
            loadFilter: function(data){
            var total = 0,rows = [];
                if(data != null && data.data != null){
                    total = data.data.pagination.totalCount;
                    rows = data.data.result == null ? [] : data.data.result;
                }
                return {
                    total: total,
                    rows: rows
                }
            },
            onBeforeLoad:function(param){
                param.limit = $("#staffContact-grid").datagrid("options").pageSize;
                return true;
            }
        });

非常感谢大大们的帮助，谢谢！

问题补充：如果我加了onSortColumn:getStaffContact，getStaffContact（）方法是再次请求后台数据，那么可以正常显示排序。按常理，排序本地的数据不需要再次请求后台数据的吧。请求优化的答案，谢谢。

2013年9月02日 09:53

sfot_zhinly
22
0 0 3

4个答案按时间排序按投票排序

0 0

采纳的答案

不应该啊，本地排序应该在column中设置了sortable:true;在表格设置中设置了remoteSort:false这样就可以了，我一直都是这么做的

2013年9月03日 12:15

malie0
4
1 1 11

3条评论

0 0

如果表格里有总计行的话那么总计行也会参与排序的，如何将总计行固定在最底下一行？

2014年4月28日 18:05

Mistake1992
30
0 0 1

添加评论

0 0

如果表格里有总计行的话那么总计行也会参与排序的，如何将总计行固定在最底下一行？

2014年4月28日 18:05

Mistake1992
30
0 0 1

添加评论

0 0

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>The DataGrid is created from markup, no JavaScript code needed.</div>
	</div>
	<div style="margin:10px 0;"></div>
	
	<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="remoteSort:false,singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>

</body>
</html>

2013年9月02日 11:07