首页 > 代码库 > EXTJS 4 树形表格组件使用示例
EXTJS 4 树形表格组件使用示例
一、整体效果图
二、使用说明及效果图
2.1、程序代码及说明:
2.1.1、表格存储部分的代码说明
//开启tooltip工具 Ext.QuickTips.init(); //定义model Ext.define('partModel', { extend: 'Ext.data.Model', fields: [ {name: 'partNo', type: 'string'}, {name: 'partName', type: 'string'}, {name: 'partVer', type: 'string'} ] }); //创建一个TreeStore var store = Ext.create('Ext.data.TreeStore', { model: 'partModel', root:treeGridData, //在其他文件中定义的静态树型数据 folderSort: true });
属性 | 说明 |
---|---|
root | Ext.data.Model/Ext.data.NodeInterface/Object 根节点,当使用store是静态数据时,使用该属性指定数据.若需要从服务器上动态获取,则可以使用proxy属性 proxy属性的使用可参见extjs 官方 api |
folderSort | Boolean 默认为 false 当设置为true时,叶子节点总是会在非叶子节点后面. |
treeGridData的具体内容请参见http://download.csdn.net/detail/shui878412/7994009
2.1.2、树节点MODEL说明
TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向TreeStore的model增加一些属性,这些属性是在展示树时必须使用的.这些属性详见如下:
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
parentId | idType | null | 父节点ID,计算出来model中ID的类型 |
index | int | null | 可用于排序 |
depth | int | 0 | |
expanded | bool | false | 是否展开 |
expandable | bool | false | 是否可以展开 |
checked | auto | null | |
leaf | bool | false | |
cls | string | null | 样式 |
iconCls | string | null | 图标样式 |
icon | string | null | 图标路径 |
root | boolean | false | 是否为根节点 |
isLast | boolean | false | |
isFirst | boolean | false | |
allowDrop | boolean | true | 是否可以被删除 |
allowDrag | boolean | true | 是否可以被拖动 |
loaded | boolean | false | |
loading | boolean | false | |
href | string | null | |
hrefTarget | string | null | |
qtip | string | null | tooltip内容 |
qtitle | string | null | tooltip标题 |
children | auto | null | 子节点,一般是数组 |
在有需要的时候可以设置这些属性以达到我们想要的结果.如可以在store中通过指定icon/iconcls的值来设置树节点中的图片等.
2.1.3、表格显示部分的代码说明
var tree = Ext.create('Ext.tree.Panel', { title: 'Ext树型表格使用示例', width: 400, height: 300, renderTo: 'treeGridDiv', useArrows: true, rootVisible: false, store: store, multiSelect: true, defaults:{ sortable: true }, columns: [{ xtype: 'treecolumn', text: '部件编号', flex:2, dataIndex: 'partNo' },{ text: '部件名称', flex:1, dataIndex: 'partName' },{ text: '版本', width: 70, dataIndex: 'partVer' }] });
属性 | 说明 |
---|---|
useArrows | Boolean 默认为false true时使用箭头()样式,false是使用的是加号()样式 |
rootVisible | Boolean 默认为true 是否显示根节点 |
multiSelect | Boolean 默认为false 是否可以选中多行 |
详细代码参见
http://download.csdn.net/detail/shui878412/7994009EXTJS 4 树形表格组件使用示例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。