EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
来源:互联网 发布:雄鹰1911走淘宝暗语 编辑:程序博客网 时间:2024/06/04 17:46
说明一下:
当点击 datagrid
表头某一列的小三角图标时,easyui
本身是有排序的,但是在当我们对 datagrid
进行了分页的情况下,点击排序只是对当前页的数据进行排序,而需求需要我对数据库里面的所有数据进行排序,这样的话只能从后台先排好序再返回了。
看了一下文档,发现点击小三角图标时会触发 onSortColumn
事件,于是我们只要在触发这个事件的时候重新向后台请求一遍 datagrid
的数据好了。
那就直接上代码吧~~
var sortOrder = "asc"; // 排序方式,asc:正序,desc:倒序var sortField = "NickName"; // 要排序的列名称// 初始化数据列表function initDatagrid() { $('#dg').datagrid({ url: '/api/Member', method: "get", striped: true, border: true, selectOnCheck: false, checkOnSelect: false, remoteSort: true, // 定义是否从服务器排序数据,要设置为true singleSelect: false, idField: 'MemberId', pagination: true, rownumbers: false, pageSize: 20, fitColumns: true, columns: [[ ... ]], // 把要排序的列名称与正序/倒序这两个参数也传到后台进行处理 onBeforeLoad: function (params) { params.nickName = $("#nickName").val(); params.phone = $('#phone').val(); params.sortField = sortField; params.sortOrder = sortOrder; }, // 点击某一列进行排序时触发的事件 onSortColumn: function (sort, order) { sortField = sort; // 要排序的列名称 sortOrder = order; // 正序or倒序 $('#dg').datagrid('reload'); } });}
不过这样还没完善,在 easyui
里本来点击 onSortColumn
就是请求了一次后台的,这一点可以打断点测试一下。
所以,我们需要把原来的那次请求屏蔽掉,否则会请求两次后台。
具体的做法,就是修改 jquery.easyui.js
/ jquery.easyui.min.js
文件。
在 jquery.easyui.js
/ jquery.easyui.min.js
文件中搜 remoteSort
,找到下面这段代码
if(opts.remoteSort){_646(_63c);}else{_647(_63c,$(_63c).datagrid("getData"));}opts.onSortColumn.call(_63c,opts.sortName,opts.sortOrder);};
把 if
里面执行的代码注释掉就好了。(在上图中是 _646(_63c);
,有可能不一样??)。
PS:datagrid
和 treegrid
都有 remoteSort
这个东东,别搞错了!!
End.
阅读全文
0 0
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- EasyUI 中datagrid 点击表头进行排序
- Asp.net中,点击GridView表头实现数据的排序
- java前端easyui中datagrid表格点击表头排序
- jquery easyUI 的datagrid 表头排序
- easyui datagrid 点击表头排序问题
- easyUI的datagrid实现分页
- EasyUi中DataGrid的点击列标头进行排序
- easyui下的datagrid后台数据加载和分页
- 点击图标实现table数据的排序
- [问题解决] JTable没数据情况下,点击表头排序异常
- C# ListView中点击表头ColumnClick实现对相应列的排序
- C# ListView中点击表头ColumnClick实现对相应列的排序
- C# ListView中点击表头ColumnClick实现对相应列的排序
- 《EasyUI》——给DataGrid动态绑定表头和数据,实现表头与数据的真正解耦
- 对xml+xsl实现分页排序的改进,使支持对所有数据进行排序
- 修改easyui中datagrid表头和数据不能分开对齐的BUG。
- 《EasyUI + MVC + EF +WCF》——实现对Datagrid中数据的批量修改或保存
- laravel实现于语言包的完美切换
- 深入理解javascript原型和闭包(4)——隐式原型
- “XXX.app” couldn’t be opened问题解决
- 轮播和Xlistview
- radiobutton+viewpager滑动
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- 设计栈,在O(1)的时间复杂内实现push,pop,min
- Android开发知识(五)消息处理机制Handler+Looper+MessageQueue的原理分析(上)
- Velocity.js的使用
- C语言中字符数组和指向字符数组的指针的区别
- Servlet配置
- IntelliJ 常用快捷键
- 多条件查询数据库Dao
- C++ 基础技术再深入(模板)template parameter和template argument(10)---《C++ Templates》