jqGrid:treeGrid配置

  如jqGrid treegrid配置中提到的,treeReader属性很重要。了解分层数据管理-嵌套集合模式的基本概念,将会更容易配置这个属性。

treeReader配置

  默认嵌套集合模型的(nested set model)treeReader配置如下

treeReader : {
    level_field: "level",
    left_field:"lft",
    right_field: "rgt",
    leaf_field: "isLeaf",
    expanded_field: "expanded"
}


  

  treeReader会自动在colModel其他项后面添加这些隐藏字段。从服务器返回的数据需要一起包含这些配置的数据,以便构造树形表格。可以扩展treeReader其他字段用于满足你的需求。左右值详细介绍参考:分层数据管理-嵌套集合

字段名称 类型 描述
level_field number 定义元素所在层级(this field determines the level in the hierarchy of the element.)。根元素level为0。根节点的子元素level为1,依次类推。用于设置元素的缩进
left_field number 此数据行对应的左值
right_field number 此数据行对应的右值
leaf_field boolean 是否为叶子节点,true/false。指定为叶子节点会有不同的图标,不能被展开或收缩
expanded_field boolean (true/false)树加载时指定非叶子节点是否展开。默认为false。注意:这个配置允许为空值,但是一定要包含在数据中,不能删除这个配置项。

  另外一个可修改选项为tree_root_level,默认值为0,配置哪层数据作为根元素。

向服务器提交什么数据

  配置读取器(reader)后需要知道向服务器提交了什么,好知道如何加载子节点。自动加载树节点提交的参数如下,添加到postData中。

postData : {
   ...
   nodeid:rc.id,
   n_left:rc.lft,
   n_right:rc.rgt,
   n_level:rc.level,
   ...
}

  • nodeid :当前展开的数据行id
  • n_left :当前展开行的左值
  • n_right:当前展开行的右值
  • n_level :当前展开行的level值(contain the level value of the currently expanded row)

来源:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:nested_set_model

时间: 2024-10-25 08:47:48

jqGrid:treeGrid配置的相关文章

jqGrid subGrid配置 如何首次加载动态展开所有的子表格

有时候需求需要默认加载表格的时候把子表格的数据也显示出来,经过研究相关SubGrids API配置如下: 属性 类型 描述 默认值 subGrid boolean 设置为true启用子表格.如果启用子表格,在父表格的左边会添加附加的列.此列包含一个“加”图片表示用户可以点击它展开行,默认所有行的子表格是收缩的. false subGridOptions object 子表格的配置,下面为配置的默认值 -收缩JavaScript代码 {plusicon : "ui-icon-plus",

02 jqGrid colModel配置参数

colModel配置语法示例 -收缩JavaScript代码 jQuery("#gridid").jqGrid({//...   colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],//...}); 下表列出了colModel可用的属性.name属性是唯一需要配置.colModel配置可以读写通过getColProp和setColProp方法. 配置项 类型 描述 默认值 align string 定义单元格中内容对齐

jqGrid -treeGrid 按需加载

Load Rows On Demand (AJAX) 参考:http://www.guriddo.net/demo/treegridjs/

jqGrid行编辑配置

jqGrid行编辑配置,方法,事件 行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置colModel来实现.完成修改后,按下"enter"键提交数据到服务器. 软件要求和安装 要使用行编辑功能,需要在jqGrid下载页面勾选Inline Editing和Common modules,然后下载.下载地址:http://www.trirand.c

jqGrid行编辑配置,方法,事件

行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置colModel来实现.完成修改后,按下“enter”键提交数据到服务器. 软件要求和安装 要使用行编辑功能,需要在jqGrid下载页面勾选Inline Editing和Common modules,然后下载.下载地址:http://www.trirand.com/blog/?page_id=6 要看元代

jqGrid 各种参数 详解

JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/             ui.jqgrid.

jqGrid api 中文说明

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/             ui.jqgrid.css    

JqGrid 使用方法详解

JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/ ui.jqgrid.css         

jqGrid API 全

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/             ui.jqgrid.css