经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jqGrid TreeGrid 加载数据 排序 扩展
来源:cnblogs  作者:cl@cnblog  时间:2019/5/8 9:23:30  对本文有异议
  • 发现 jqGrid TreeGrid 加载的数据必须要排序
  • 给了两种平滑数据模式尽然不内部递归
  • 所以改了下源码加了个数据二次过滤器扩展

 

数据本该是这样的

结果没排序成这样了 (而且还得是从根节点到子节点整体排序)

 

1. loadFilters: 数据过滤器扩展 (顺带把ParentId为非字符串类型导致初始化后没闭合bug解决了) 

  1. $.extend($.jgrid.defaults, {
  2. loadFilter: function (d) {
  3. function compare(name, minor) {
  4. return function (o, p) {
  5. var a, b;
  6. if (o && p && typeof o === 'object' && typeof p === 'object') {
  7. a = o[name];
  8. b = p[name];
  9. if (a === b) {
  10. return typeof minor === 'function' ? minor(o, p) : 0;
  11. }
  12. if (typeof a === typeof b) {
  13. return a < b ? -1 : 1;
  14. }
  15. return typeof a < typeof b ? -1 : 1;
  16. } else {
  17. thro("error");
  18. }
  19. }
  20. }
  21. function rawdata(r, parentField) {
  22. if (!(r instanceof Array)) {
  23. r[parentField] = r[parentField].toString(); //转string初始化才会闭合
  24. r['isLeaf'] = true;
  25. return r;
  26. }
  27. var datatmp = [];
  28. for (var i = 0; i < r.length; i++) {
  29. var children = r[i]['children'];
  30. r[i]['children'] = null;
  31. r[i][parentField] = r[i][parentField].toString(); //转string初始化才会闭合
  32. r[i]['isLeaf'] = !children;
  33. datatmp.push(r[i]);
  34. if (children) datatmp = datatmp.concat(rawdata(children, parentField));
  35. }
  36. return datatmp;
  37. }
  38. var data = d.rows;
  39. var idField, treeField, parentField, seqField, level_field;
  40. idField = this.p.treeReader.id_field || 'id';
  41. parentField = this.p.treeReader.parent_id_field || 'pid';
  42. levelField = this.p.treeReader.level_field || idField//'level'
  43. seqField = this.p.treeReader.seq_field || idField//'seq' // 注意:绑定上是显示字段用 treeField
  44.  
  45. if(seqField != idField) data.sort(compare(levelField, compare(seqField)));
  46. else data.sort(compare(seqField) );
  47. var i, l, treeData = [], tmpMap = [];
  48. for (i = 0, l = data.length; i < l; i++) {
  49. tmpMap[data[i][idField]] = data[i];
  50. }
  51. for (i = 0, l = data.length; i < l; i++) {
  52. if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
  53. if (!tmpMap[data[i][parentField]]['children'])
  54. tmpMap[data[i][parentField]]['children'] = [];
  55. tmpMap[data[i][parentField]]['children'].push(data[i]);
  56. } else {
  57. data.sort(function (a, b) { return a[seqField] - b[seqField]; }); //从小到大排序
  58. treeData.push(data[i]);
  59. }
  60. }
  61. d.rows = rawdata(treeData, parentField);
  62. return d;
  63. }
  64. });
xxoo

 

2. TreeGrid配置数据

  1. 1 "treeGrid": true,
  2. 2 "ExpandColumn": "Title",
  3. 3 "treedatatype": "json",
  4. 4 "treeGridModel": "adjacency", //选adjacency模式 (nested模式真zz,怎么会有这种数据格式)
  5. 5 "treeReader": {
  6. 6 "id_field": "Id", //Id 非空
  7. 7 "parent_id_field": "ParentId", //父节点Id 非空
  8. 8 "level_field": "Level", //层级 非空
  9. 9 "seq_field": "seq", //层级排序 可选字段 默认Id排序
  10. 10 //"leaf_field": "isLeaf", //叶节点过滤内已处理
  11. 11 },
  1. jQuery(document).ready(function($) {
  2. jQuery('#jqGrid').jqGrid({
  3. "url": '@Url.Action("GetMenu", "Setup")',
  4. "datatype": "json", //json", //data: jsondata,
  5. "colModel":[
  6. { name: 'Id', "key": true, "width": 50 }, // "hidden": true,
  7. { lable:'PId' , name: 'ParentId', width: 70 },
  8. { label: '名称', name: 'Title', width: 180, },
  9. { label: '图标', name: 'img', width: 180 },
  10. { label: '地址', name: 'href', width: 300 },
  11. { label: '排序', name: 'seq', width: 80 },
  12. { label: '打开方式', name: 'Target', width: 80 },
  13. { label: '层级', name: 'Level', width: 80 },
  14. { label: '删除', name: 'IsDel', width: 80 }
  15. ],
  16. "hoverrows":false,
  17. "viewrecords":false,
  18. "gridview":true,
  19. "height":"auto",
  20. "rowNum":100,
  21. "scrollrows": true,
  22. //"loadonce": true,
  23. "treeGrid": true,
  24. "ExpandColumn": "Title",
  25. "treedatatype": "json",
  26. "treeGridModel": "adjacency", //选adjacency模式 (nested模式真zz,怎么会有这种数据格式)
  27. "treeReader": {
  28. "id_field": "Id", //Id 非空
  29. "parent_id_field": "ParentId", //父节点Id 非空
  30. "level_field": "Level", //层级 非空
  31. "seq_field": "seq", //层级排序 可选字段 默认Id排序
  32. //"leaf_field": "isLeaf", //叶节点过滤内已处理
  33. },
  34. "pager": "#jqGridPager"
  35. });
  36. });
完整绑定

 

3.jsGrid.js源码修改 2处

  1. //>1 注册过滤器扩展方法
  2. $.fn.jqGrid = function( pin ) {
  3. if (typeof pin === 'string') {
  4. ........
  5. }
  6. return this.each( function() {
  7. ........
  8. var p = $.extend(true, {
  9. loadFilter: null, //就加这一行 ajax加载数据后二次过滤
  10. url: "",
  11. height: 150,

 

  1.   //>2 调用过滤器 搜索 case "script" 或 $.ajax
  2.   case "script":
  3. $.ajax($.extend({
  4. url:
  5. ........
  6. success: function (data, st, xhr) {
  7. if ($.isFunction(ts.p.loadFilter)) {
  8. //添加这个if块即可 加载数据后二次过滤
  9. data = ts.p.loadFilter.call(ts,data);
  10. }
  11. if ($.isFunction(ts.p.beforeProcessing)) {
  12. .......
  13. }

 

原文链接:http://www.cnblogs.com/cl-blogs/p/10829279.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号