第一步：
1.上官网下载。
2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css
第二步：建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家电</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---电视</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣机</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>
第三步：引入JS
/* 初始化数据 */
$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected")
$(this).toggleClass("selected")
})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>
<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>
1.1.创建一棵树2.使用如下方式
3.var tree=new JsTree('DivId')
4.说明，html的body里面必须事先有id为'DivId'的层。
5.这棵树将在此渲染。
6.2.创建节点
7.var node1=new JsNode("nodeid")
8.树在以一始不能渲染，要渲染必须设置它的根
9.用下面的语法：
10.tree.setRoot(node1)// 这样就将node1设置成了它的根，div已经被渲染。
11.以后只要按照一棵树的形态加入节点就可以了。
12.如下所示：
13.var tree=new JsTree("div1")
14.var root=new JsNode("root")//root为节点的ID
15.root.text="刘u22791 "//设置节点显示的文本，也可以是超链接，html代码 等，要是不设置这个属性，树就显示它的Id
16.root.hasCheckBox=true//设置了这个属性以后，节点就还有一个CheckBox
17.tree.setRoot(root)//根节点的属性设置好以后才能将它给树对象
18.var n1=new JsNode("张u-26402 ")
19.var n2=new JsNode("关u32701 ")
20.var n3=new JsNode("赵u20113 ")
21.var n4=new JsNode("将")
22.var n5=new JsNode("将")
23.var n6=new JsNode("兵")
24.var n7=new JsNode("兵")
25.var n8=new JsNode("兵")
26.root.add(n1)
27.root.add(n2)
28.n2.add(n4)//这些方法，就将1个节点添加它的子节点
29.n2.add(n5)
30.n4.add(n6)
31.n4.add(n7)
32.n1.add(n8)
33.root.add(n3)
34.这样就能动态的构建树了
35.
36.下面提供一些全局API，直接使用这些方法
37.getAllTrees() 获得所有的树对象，一个html上面可能有很多树
38.getTreeByDivId(divid) 通过树注册的divId获得这棵树
39.getNodeById(nid) //通过节点Id，从所有的树中查找一个节点对象，找到就返回，找不到返回null
40.checkCbo(node) 选中这个节点的CheckBox
41.checkCboById(nodeid) 通过节点的Id来选中起CheckBox
42.cancelCbo(node) 取消对Checkbox的选中
43.cancelCboById(nid) 通过节点id取消对Checkbox的选中
44.closeThis(node) 关闭节点
45.openThis(node) 打开
46.closeNodeById(nid) 通过节点Id关闭
47.openNodeById(nid) 通过Id节点打开
48.
49.下面是树对象的API
50.getById(key) // getNodeById
51.removeNode(node) // 核心方法
52.getCheckedNodesXml() /// 对外 API
53.getCheckedNodes() /// 对外 API
54.showText()//////对外 API
55.showId()//对外 API
56.上面的方法 如此使用 var arr=tree.getCheckedNodes()这样就得到了所有的选中节点。
Extjs的grid和树以及几种常用的插件使用详解Ext.onReady(function() {
/**
* 1. Grid
*/
/*Ext.create('Ext.grid.Panel', {
store : Ext.create('Ext.data.ArrayStore', {
fields : [{
name : 'book'
}, {
name : 'author'
}],
data : [['Extjs4:firstBook', 'joms']]
}),
columns : [{
text : 'Book',
flex : 1,
sortable : false,
dataIndex : 'book'
}, {
text : 'Author',
width : 100,
sortable : true,
dataIndex : 'author'
}],
height : 80,
width : 300,
title : 'Simple Grid',
renderTo : 'testG1'
})
// grid2
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : [{
name : 'book'
}, {
name : 'topic',
type : 'string'
}, {
name : 'released',
type : 'boolean'
}, {
name : 'releasedDate',
type : 'date'
}, {
name : 'value',
type : 'number'
}]
})
var store = Ext.create('Ext.data.ArrayStore', {
model : 'Book',
data : [
['Ext JS 4: First Look', 'Ext JS', '4', false, null, 0],
['Learning Ext JS 3.2', 'Ext JS', '3.2', true, '2010/10/01',
40.49],
['Ext JS 3.0 Cookbook', 'Ext JS', '3', true, '2009/10/01',
44.99],
['Learning Ext JS', 'Ext JS', '2.x', true, '2008/11/01', 35.99]]
})
Ext.create('Ext.grid.Panel', {
store : store,
width : 550,
height : 300,
title : 'Extjs Books',
renderTo : 'grid2',
features : [{
groupHeaderTp1 : 'Publisher:{name}'
}],
selModel : Ext.create('Ext.selection.CheckboxModel'),
columns : [Ext.create('Ext.grid.RowNumberer'), {
text : 'Book',
flex : 1,
dataIndex : 'book'
}, {
text : 'Category',
xtype : 'templatecolumn',
width : 100,
tpl : '{topic}{version}'
}, {
text : 'Already Released',
xtype : 'booleancolumn',
width : 100,
dataIndex : 'released',
trueText : 'Yes',
falseText : 'No'
}, {
text : 'Released Date',
xtype : 'datecolumn',
width : 100,
dataIndex : 'releasedDate',
format : 'm-Y'
}, {
text : 'Price',
xtype : 'numbercolumn',
width : 80,
dataIndex : 'value',
renderer : Ext.util.Format.usMoney
}, {
xtype : 'actioncolumn',
width : 50,
items : [{
icon : 'script/checked.gif',
tooltip : 'Edit',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex)
Ext.MessageBox.alert('Edit', rec
.get('book'))
}
}, {
icon : 'script/scroll-left.gif',
tooltip : 'Delete',
handler : function(grid, rowIndex, colIndex) {
var recs = grid.getStore().getAt(rowIndex)
Ext.MessageBox.alert('Delete', recs
.get('book'))
}
}]
}]
})
*/
/**
* 自定义分组 Ext.grid.feature.Grouping
* 分组总结 Ext.grid.feature.GroupingSummary
*总结所有组 Ext.grid.feature.Summary
* 插件使用
*/
// 定义模型
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : ['name', 'topic']
})
// 创建store
var Books = Ext.create('Ext.data.Store', {
model : 'Book',
groupField : 'topic',// 按照主题分组
data : [{
name : 'Learning Ext js',
topic : 'Ext JS'
}, {
name : 'Learning Ext js2.0',
topic : 'Ext JS'
}, {
name : 'Learning Ext js3.0',
topic : 'Ext JS'
}, {
name : 'Learning PHP5 Tools',
topic : 'PHP'
}, {
name : 'NetBeans IDE 7 Cookbook',
topic : 'Java'
}, {
name : 'iReport 3.7',
topic : 'Java'
}, {
name : 'Python Multimedia',
topic : 'Python'
}, {
name : 'NHibernate 3.0 Cookbook',
topic : '.NET'
}, {
name : 'ASP.NET MVC 2 Cookbook',
topic : '.NET'
}]
})
// 填充数据给grid
/* Ext.create('Ext.grid.Panel', {
renderTo : 'div3',
frame : true,
store : Books,
width : 350,
height : 400,
title : 'Books',
features : [Ext.create('Ext.grid.feature.Grouping', {// 使用分组插件
groupHeaderTpl : 'topic:{name}({rows.length}Book{[values.rows.length>1?"s":""]})'
})],
columns : [{
text : 'Name',
flex : 1,
dataIndex : 'name'
}, {
text : 'Topic',
flex : 1,
dataIndex : 'topic'
}]
})*/
/*Ext.create('Ext.grid.Panel', {
renderTo : 'div3',
frame : true,
store : Books,
width : 350,
height : 400,
title : 'Books',
features : [{
groupHeaderTpl : 'Topic: {name}',
ftype : 'groupingsummary'//使用分组总结插件
}],www.2cto.com
columns : [{
text : 'Name',
flex : 1,
dataIndex : 'name',
summaryType : 'count',
summaryRenderer : function(value) {
return Ext.String.format('{0} book{1}', value,
value !== 1 ? 's' : '')
}
}, {
text : 'Topic',
flex : 1,
dataIndex : 'topic'
}]
})*/
Ext.create('Ext.grid.Panel', {
renderTo :'div3',
frame : true,
store : Books,
width : 350,
height : 300,
title : 'Books',
features : [{
ftype : 'summary'//使用总结插件
}],
columns : [{
text : 'Name',
flex : 1,
dataIndex : 'name',
summaryType : 'count',
summaryRenderer : function(value) {
return Ext.String.format('{0} book{1}', value, value !== 1
? 's'
: '')
}
}, {
text : 'Topic',
flex : 1,
dataIndex : 'topic'
}]
})
/**
* tree的使用
*/
Ext.create('Ext.tree.Panel', {
title : 'Simple Tree',
width : 200,
store : Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : "Menu Option 1",
"checked": true,
leaf : true
}, {
text : "Menu Option 2",
//"checked": true,
expanded : true,
children : [{
text : "Sub Menu Option 2.1",
leaf : true,
"checked": true
}, {
text : "Sub Menu Option 2.2",
leaf : true,
"checked": true
}]
}, {
text : "Menu Option 3",
"checked": true,
leaf : true
}]
}
}),
viewConfig : {//树叶拖拽实现
plugins : {
ptype : 'treeviewdragdrop'
}
},
folderSort: true,//排序
sorters: [{
property: 'text',
direction: 'ASC'
}],
rootVisible : false,
renderTo : 'tree1'
})
})
