• 发现 jqGrid TreeGrid 加载的数据必须要排序
  • 给了两种平滑数据模式尽然不内部递归
  • 所以改了下源码加了个数据二次过滤器扩展

数据本该是这样的

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

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

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

xxoo

2. TreeGrid配置数据

  1. "treeGrid": true,
  2. "ExpandColumn": "Title",
  3. "treedatatype": "json",
  4. "treeGridModel": "adjacency", //选adjacency模式 (nested模式真zz,怎么会有这种数据格式)
  5. "treeReader": {
  6. "id_field": "Id", //Id 非空
  7. "parent_id_field": "ParentId", //父节点Id 非空
  8. "level_field": "Level", //层级 非空
  9. "seq_field": "seq", //层级排序 可选字段 默认Id排序
  10. //"leaf_field": "isLeaf", //叶节点过滤内已处理
  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.  
  23. //"loadonce": true,
  24. "treeGrid": true,
  25. "ExpandColumn": "Title",
  26. "treedatatype": "json",
  27. "treeGridModel": "adjacency", //选adjacency模式 (nested模式真zz,怎么会有这种数据格式)
  28. "treeReader": {
  29. "id_field": "Id", //Id 非空
  30. "parent_id_field": "ParentId", //父节点Id 非空
  31. "level_field": "Level", //层级 非空
  32. "seq_field": "seq", //层级排序 可选字段 默认Id排序
  33. //"leaf_field": "isLeaf", //叶节点过滤内已处理
  34. },
  35. "pager": "#jqGridPager"
  36. });
  37. });

完整绑定

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. }

jqGrid TreeGrid 加载数据 排序 扩展的更多相关文章

  1. jqGrid 重新加载数据

    参考:https://blog.csdn.net/u012746051/article/details/52949353 $("#列表区域id").jqGrid('clearGri ...

  2. MiniUI treeGrid 动态加载数据与静态加载数据的区别

    说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...

  3. jqGrid首次加载时不加载任何数据

    1. 首次加载时候设置 jqGrid 属性 datatype: 'local' $("#grid").jqGrid({ url:"#", datatype:&q ...

  4. thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势

    在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sq ...

  5. DevExpress的GridControl的实时加载数据解决方案(取代分页)

    http://blog.csdn.net/educast/article/details/4769457 evExpress是一套第三方控件 其中有类似DataGridView的控件 今天把针对Dev ...

  6. ListView用法及加载数据时的闪烁问题和加载数据过慢问题

    ListView介绍及添加数据时的闪烁问题 1.     ListView类 1.1 ListView常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示 ...

  7. jquery easyui easyui-treegrid 使用异步加载数据

    jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...

  8. 学习笔记TF049:TensorFlow 模型存储加载、队列线程、加载数据、自定义操作

    生成检查点文件(chekpoint file),扩展名.ckpt,tf.train.Saver对象调用Saver.save()生成.包含权重和其他程序定义变量,不包含图结构.另一程序使用,需要重新创建 ...

  9. ML.NET Cookbook --- 1.如何从文本文件中加载数据?

    使用ML.NET中的TextLoader扩展方法从文本文件中加载数据.你需要知道在文本文件中数据列在那里,它们的类型是什么,在文本文件中什么位置可以找到它们. 请注意:对于ML.NET只读取文件的某些 ...

随机推荐

  1. Windows 10 搭建Python3 安装使用 protobuf

    Protobuf对比XML.Json等其他序列化的优势 protobuf 不管是处理时间上,还是空间占用上都优于现有的其他序列化方式.内存暂用是java 序列化的1/9,时间也是差了一个数量级,一次操 ...

  2. sparkStream---1

    1.本地scala版 import org.apache.spark._ import org.apache.spark.streaming._ import org.apache.spark.str ...

  3. CentOS7.2环境下安装Nginx

    目录 1.下载安装包 2.安装nginx 3.配置nginx开机启动 4.测试 1.下载安装包 官网下载 wget http://nginx.org/download/nginx-1.16.0.tar ...

  4. Unity3d 烘培lightingmap 注意的2点.

    1.在Qulity里面设置合适的灯光数量.否则,你会发现烘培出来的场景,有些灯光没有起作用. 2.在导入模型时候,注意勾选:Generate Lightingmap .  否则,模型没办法烘培. 3. ...

  5. [Tensorflow] 使用 tf.keras.utils.get_file() 下载 MS-COCO 2014 数据集

    import argparse import tensorflow as tf tf.enable_eager_execution() def main(args): ""&quo ...

  6. centos7安装过程中的安装源设置

    centos7的安装源设置:http://mirrors.aliyun.com/centos/7/os/x86_64/

  7. 最新 房多多java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.房多多等10家互联网公司的校招Offer,因为某些自身原因最终选择了房多多.6.7月主要是做系统复习.项目复盘.LeetCo ...

  8. container_of宏

    title: container_of宏 date: 2019/7/24 15:49:26 toc: true --- container_of宏 解析 在linux链表结构中有这样一个宏,通过成员变 ...

  9. mui mui-control-item获得选中的标签

    function getActiveControl() { var segmentedControl = document.getElementById("top-scroll") ...

  10. java SerialPort串口通讯的使用

    api文档 http://fazecast.github.io/jSerialComm/javadoc/com/fazecast/jSerialComm/package-summary.html ma ...