jqGrid TreeGrid 加载数据 排序 扩展
- 发现 jqGrid TreeGrid 加载的数据必须要排序
- 给了两种平滑数据模式尽然不内部递归
- 所以改了下源码加了个数据二次过滤器扩展
数据本该是这样的
结果没排序成这样了 (而且还得是从根节点到子节点整体排序)
1. loadFilters: 数据过滤器扩展 (顺带把ParentId为非字符串类型导致初始化后没闭合bug解决了)
- $.extend($.jgrid.defaults, {
- loadFilter: function (d) {
- function compare(name, minor) {
- return function (o, p) {
- var a, b;
- if (o && p && typeof o === 'object' && typeof p === 'object') {
- a = o[name];
- b = p[name];
- if (a === b) {
- return typeof minor === 'function' ? minor(o, p) : 0;
- }
- if (typeof a === typeof b) {
- return a < b ? -1 : 1;
- }
- return typeof a < typeof b ? -1 : 1;
- } else {
- thro("error");
- }
- }
- }
- function rawdata(r, parentField) {
- if (!(r instanceof Array)) {
- r[parentField] = r[parentField].toString(); //转string初始化才会闭合
- r['isLeaf'] = true;
- return r;
- }
- var datatmp = [];
- for (var i = 0; i < r.length; i++) {
- var children = r[i]['children'];
- r[i]['children'] = null;
- r[i][parentField] = r[i][parentField].toString(); //转string初始化才会闭合
- r[i]['isLeaf'] = !children;
- datatmp.push(r[i]);
- if (children) datatmp = datatmp.concat(rawdata(children, parentField));
- }
- return datatmp;
- }
- var data = d.rows;
- var idField, treeField, parentField, seqField, level_field;
- idField = this.p.treeReader.id_field || 'id';
- parentField = this.p.treeReader.parent_id_field || 'pid';
- levelField = this.p.treeReader.level_field || idField//'level'
- seqField = this.p.treeReader.seq_field || idField//'seq' // 注意:绑定上是显示字段用 treeField
- if(seqField != idField) data.sort(compare(levelField, compare(seqField)));
- else data.sort(compare(seqField) );
- var i, l, treeData = [], tmpMap = [];
- for (i = 0, l = data.length; i < l; i++) {
- tmpMap[data[i][idField]] = data[i];
- }
- for (i = 0, l = data.length; i < l; i++) {
- if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
- if (!tmpMap[data[i][parentField]]['children'])
- tmpMap[data[i][parentField]]['children'] = [];
- tmpMap[data[i][parentField]]['children'].push(data[i]);
- } else {
- data.sort(function (a, b) { return a[seqField] - b[seqField]; }); //从小到大排序
- treeData.push(data[i]);
- }
- }
- d.rows = rawdata(treeData, parentField);
- return d;
- }
- });
xxoo
2. TreeGrid配置数据
- "treeGrid": true,
- "ExpandColumn": "Title",
- "treedatatype": "json",
- "treeGridModel": "adjacency", //选adjacency模式 (nested模式真zz,怎么会有这种数据格式)
- "treeReader": {
- "id_field": "Id", //Id 非空
- "parent_id_field": "ParentId", //父节点Id 非空
- "level_field": "Level", //层级 非空
- "seq_field": "seq", //层级排序 可选字段 默认Id排序
- //"leaf_field": "isLeaf", //叶节点过滤内已处理
- },
- jQuery(document).ready(function($) {
- jQuery('#jqGrid').jqGrid({
- "url": '@Url.Action("GetMenu", "Setup")',
- "datatype": "json", //json", //data: jsondata,
- "colModel":[
- { name: 'Id', "key": true, "width": 50 }, // "hidden": true,
- { lable:'PId' , name: 'ParentId', width: 70 },
- { label: '名称', name: 'Title', width: 180, },
- { label: '图标', name: 'img', width: 180 },
- { label: '地址', name: 'href', width: 300 },
- { label: '排序', name: 'seq', width: 80 },
- { label: '打开方式', name: 'Target', width: 80 },
- { label: '层级', name: 'Level', width: 80 },
- { label: '删除', name: 'IsDel', width: 80 }
- ],
- "hoverrows":false,
- "viewrecords":false,
- "gridview":true,
- "height":"auto",
- "rowNum":100,
- "scrollrows": true,
- //"loadonce": true,
- "treeGrid": true,
- "ExpandColumn": "Title",
- "treedatatype": "json",
- "treeGridModel": "adjacency", //选adjacency模式 (nested模式真zz,怎么会有这种数据格式)
- "treeReader": {
- "id_field": "Id", //Id 非空
- "parent_id_field": "ParentId", //父节点Id 非空
- "level_field": "Level", //层级 非空
- "seq_field": "seq", //层级排序 可选字段 默认Id排序
- //"leaf_field": "isLeaf", //叶节点过滤内已处理
- },
- "pager": "#jqGridPager"
- });
- });
完整绑定
3.jsGrid.js源码修改 2处
- //>1 注册过滤器扩展方法
- $.fn.jqGrid = function( pin ) {
- if (typeof pin === 'string') {
- ........
- }
- return this.each( function() {
- ........
- var p = $.extend(true, {
- loadFilter: null, //就加这一行 ajax加载数据后二次过滤
- url: "",
- height: 150,
- //>2 调用过滤器 搜索 case "script" 或 $.ajax
- case "script":
- $.ajax($.extend({
- url:
- ........
- success: function (data, st, xhr) {
- if ($.isFunction(ts.p.loadFilter)) {
- //添加这个if块即可 加载数据后二次过滤
- data = ts.p.loadFilter.call(ts,data);
- }
- if ($.isFunction(ts.p.beforeProcessing)) {
- .......
- }
jqGrid TreeGrid 加载数据 排序 扩展的更多相关文章
- jqGrid 重新加载数据
参考:https://blog.csdn.net/u012746051/article/details/52949353 $("#列表区域id").jqGrid('clearGri ...
- MiniUI treeGrid 动态加载数据与静态加载数据的区别
说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...
- jqGrid首次加载时不加载任何数据
1. 首次加载时候设置 jqGrid 属性 datatype: 'local' $("#grid").jqGrid({ url:"#", datatype:&q ...
- thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势
在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sq ...
- DevExpress的GridControl的实时加载数据解决方案(取代分页)
http://blog.csdn.net/educast/article/details/4769457 evExpress是一套第三方控件 其中有类似DataGridView的控件 今天把针对Dev ...
- ListView用法及加载数据时的闪烁问题和加载数据过慢问题
ListView介绍及添加数据时的闪烁问题 1. ListView类 1.1 ListView常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示 ...
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- 学习笔记TF049:TensorFlow 模型存储加载、队列线程、加载数据、自定义操作
生成检查点文件(chekpoint file),扩展名.ckpt,tf.train.Saver对象调用Saver.save()生成.包含权重和其他程序定义变量,不包含图结构.另一程序使用,需要重新创建 ...
- ML.NET Cookbook --- 1.如何从文本文件中加载数据?
使用ML.NET中的TextLoader扩展方法从文本文件中加载数据.你需要知道在文本文件中数据列在那里,它们的类型是什么,在文本文件中什么位置可以找到它们. 请注意:对于ML.NET只读取文件的某些 ...
随机推荐
- Windows 10 搭建Python3 安装使用 protobuf
Protobuf对比XML.Json等其他序列化的优势 protobuf 不管是处理时间上,还是空间占用上都优于现有的其他序列化方式.内存暂用是java 序列化的1/9,时间也是差了一个数量级,一次操 ...
- sparkStream---1
1.本地scala版 import org.apache.spark._ import org.apache.spark.streaming._ import org.apache.spark.str ...
- CentOS7.2环境下安装Nginx
目录 1.下载安装包 2.安装nginx 3.配置nginx开机启动 4.测试 1.下载安装包 官网下载 wget http://nginx.org/download/nginx-1.16.0.tar ...
- Unity3d 烘培lightingmap 注意的2点.
1.在Qulity里面设置合适的灯光数量.否则,你会发现烘培出来的场景,有些灯光没有起作用. 2.在导入模型时候,注意勾选:Generate Lightingmap . 否则,模型没办法烘培. 3. ...
- [Tensorflow] 使用 tf.keras.utils.get_file() 下载 MS-COCO 2014 数据集
import argparse import tensorflow as tf tf.enable_eager_execution() def main(args): ""&quo ...
- centos7安装过程中的安装源设置
centos7的安装源设置:http://mirrors.aliyun.com/centos/7/os/x86_64/
- 最新 房多多java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.房多多等10家互联网公司的校招Offer,因为某些自身原因最终选择了房多多.6.7月主要是做系统复习.项目复盘.LeetCo ...
- container_of宏
title: container_of宏 date: 2019/7/24 15:49:26 toc: true --- container_of宏 解析 在linux链表结构中有这样一个宏,通过成员变 ...
- mui mui-control-item获得选中的标签
function getActiveControl() { var segmentedControl = document.getElementById("top-scroll") ...
- java SerialPort串口通讯的使用
api文档 http://fazecast.github.io/jSerialComm/javadoc/com/fazecast/jSerialComm/package-summary.html ma ...