JQuery TreeGrid 组件详解

一、TreeGrid组件相关的类

1、TreeGrid(_config)

_config：json格式的数据，组件所需要的数据都通过该参数提供。

2、TreeGridItem(_root, _rowId, _rowIndex, _rowData)

_root：显示组件实例的目标容器对象。

_rowId：选中行的id。

_rowIndex：选中行的索引。

_rowData：json格式的行数据。

二、_config参数详解

id：组件实例的id。

width：组件实例的宽度。

renderTo：用于显示组件实例的容器对象的id。一般用div作为容器。

headerAlign：标题行的对齐方式。

headerHeight：标题行的高度。

dataAlign：数据行的对齐方式。

indentation：层级缩进量。

folderColumnIndex：显示图标的数据列的索引，从0开始。

folderOpenIcon：节点展开时的图标。

folderCloseIcon：节点关闭时的图标。

defaultLeafIcon：叶节点的图标。

hoverRowBackground：鼠标滑过数据行时，背景色是否改变。

itemClick：单击数据行后触发的事件。事件方法包含三个参数，分别是：行的id、行的索引、行数据。

expandLayer：初始展开层数，默认只展开第1层。

columns：值为数组，数组元素为json对象。定义数据栏相关信息。

数组元素的属性：

headerText：栏的标题。

dataField：栏数据对应的字段名。

headerAlign：栏头对齐方式。

dataAlign：栏数据对齐方式。

width：栏的宽度。

handler：通过指定的方法来自定义栏数据。

folderHidden：在文件夹行隐藏单元格值。

data：组件的数据集。

三、TreeGrid的方法

show：显示填充数据后的组件对象。

expandAll：展开、关闭所有节点。该方法有一个参数，参数值为Y时表示展开，参数值为N时表示关闭。

getSelectedItem：获取当前选中的数据行，返回TreeGridItem对象。

四、TreeGridItem组件

1、组件属性

id：数据行的id。

index：数据行的索引。

data：json格式的行数据。

2、组件方法

getParent：获取父数据行。方法返回TreeGridItem对象。

getChildren：获取子数据行集。方法返回一个数组，数组元素为TreeGridItem对象。

五、组件使用范例

Html代码

<input type="button" value="关闭所有节点" onclick="expandAll('N')">
<input type="button" value="展开所有节点" onclick="expandAll('Y')">
<input type="button" value="取得当前行的数据" onclick="selectedItem()"><br>
当前选中的行：<input type="text" id="currentRow" size="110">
<div id="div1"></div>

Js代码

<script language="javascript">
var config = {
id: "tg1",
width: "800",
renderTo: "div1",
headerAlign: "left",
headerHeight: "30",
dataAlign: "left",
indentation: "20",
folderOpenIcon: "images/folderOpen.gif",
folderCloseIcon: "images/folderClose.gif",
defaultLeafIcon: "images/defaultLeaf.gif",
hoverRowBackground: "false",
folderColumnIndex: "1",
itemClick: "itemClickEvent",
expandLayer: 1,
columns:[
{headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
{headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"},
{headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"},
{headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"},
{headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook", folderHidden: true}
],
data:[
{name: "城区分公司", code: "CQ", assignee: "", children:[
{name: "城区卡品分销中心"},
{name: "先锋服务厅", children:[
{name: "chlid1"},
{name: "chlid2"},
{name: "chlid3", children: [
{name: "chlid3-1"},
{name: "chlid3-2"},
{name: "chlid3-3"},
{name: "chlid3-4"}
]}
]},
{name: "半环服务厅"}
]},
{name: "清新分公司", code: "QX", assignee: "", children:[]},
{name: "英德分公司", code: "YD", assignee: "", children:[]},
{name: "佛冈分公司", code: "FG", assignee: "", children:[]}
]
};
/*
单击数据行后触发该事件
id：行的id
index：行的索引。
data：json格式的行数据对象。
*/
function itemClickEvent(id, index, data){
jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
}
/*
通过指定的方法来自定义栏数据
*/
function customCheckBox(row, col){
return "<input type='checkbox'>";
}
function customOrgName(row, col){
var name = row[col.dataField] || "";
return name;
}
function customLook(row, col){
return "<a href='' style='color:blue;'>查看</a>";
}
//创建一个组件对象
var treeGrid = new TreeGrid(config);
treeGrid.show();
/*
展开、关闭所有节点。
isOpen=Y表示展开，isOpen=N表示关闭
*/
function expandAll(isOpen){
treeGrid.expandAll(isOpen);
}
/*
取得当前选中的行，方法返回TreeGridItem对象
*/
function selectedItem(){
var treeGridItem = treeGrid.getSelectedItem();
if(treeGridItem!=null){
//获取数据行属性值
//alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);
//获取父数据行
var parent = treeGridItem.getParent();
if(parent!=null){
//jQuery("#currentRow").val(parent.data.name);
}
//获取子数据行集
var children = treeGridItem.getChildren();
if(children!=null && children.length>0){
jQuery("#currentRow").val(children[0].data.name);
}
}
}
</script>

TreeGrid.rar (25.4 KB)
下载次数: 2107

TreeGrid_1.1.rar (2.8 KB)
下载次数: 559

TreeGrid_支持jquery1.6.2以上版本.rar (33 KB)
下载次数: 867

查看图片附件

JQuery TreeGrid 组件详解相关推荐

Android笔记——四大组件详解与总结
android四大组件分别为activity.service.content provider.broadcast receiver. -------------------------------- ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
ReactNative ViewPageAndroid组件详解
源码传送门在我们开发Android的时候,ViewPage这个控件的使用频率还是很高的,最简单的就是制作引导页,应用程序的主界面等,在ReactNative开发中实现该功能的组件是ViewPageA ...
[zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
Android Lifecycle 生命周期组件详解
转载请标明出处:https://blog.csdn.net/zhaoyanjun6/article/details/99695779 本文出自[赵彦军的博客] 一.Lifecycle简介为什么要引进 ...
Cinder 组件详解 - 每天5分钟玩转 OpenStack（47）
Cinder 组件详解 - 每天5分钟玩转 OpenStack(47) 本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户, ...
Android应用开发—Intent组件详解
转载自:Android中Intent组件详解 Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件. Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的 ...
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
ue4移动到一定距离_UE4移动组件详解（一）——移动框架与实现原理
原文链接(转载请标明):UE4移动组件详解(一)--移动框架与实现原理_Jerish的博客-CSDN博客blog.csdn.net 前言关于UE4的移动组件,我写了一篇非常详细的分析文档.由于篇幅 ...

JQuery TreeGrid 组件详解

JQuery TreeGrid 组件详解相关推荐

最新文章

热门文章