HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').treegrid({
title:'TreeGrid',
iconCls:'icon-save',
width:500,
height:350,
nowrap: false,
rownumbers: true,
animate:true,
collapsible:true,
url:'treegrid_data.json',
idField:'code',
treeField:'code',
pagination:true,
frozenColumns:[[
{title:'code',field:'code',width:150}
]],
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
onBeforeLoad:function(row,param){
if (row){
$(this).treegrid('options').url = 'treegrid_subdata.json'
} else {
$(this).treegrid('options').url = 'treegrid_data.json'
}
}
})
})
function reload(){
$('#test').treegrid('reload')
}
function getChildren(){
var node = $('#test').treegrid('getSelected')
if (node){
var nodes = $('#test').treegrid('getChildren', node.code)
} else {
var nodes = $('#test').treegrid('getChildren')
}
var s = ''
for(var i=0i<nodes.lengthi++){
s += nodes[i].code + ','
}
alert(s)
}
function getSelected(){
var node = $('#test').treegrid('getSelected')
if (node){
alert(node.code+":"+node.name)
}
}
function collapse(){
var node = $('#test').treegrid('getSelected')
if (node){
$('#test').treegrid('collapse', node.code)
}
}
function expand(){
var node = $('#test').treegrid('getSelected')
if (node){
$('#test').treegrid('expand', node.code)
}
}
function collapseAll(){
$('#test').treegrid('collapseAll')
}
function expandAll(){
$('#test').treegrid('expandAll')
}
function expandTo(){
$('#test').treegrid('expandTo', '02013')
$('#test').treegrid('select', '02013')
}
</script>
</head>
<body>
<h1>TreeGrid</h1>
<div style="margin:10px">
<a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChildren()">getChildren</a>
<a href="#" onclick="getSelected()">getSelected</a>
<a href="#" onclick="collapse()">collapse</a>
<a href="#" onclick="expand()">expand</a>
<a href="#" onclick="collapseAll()">collapseAll</a>
<a href="#" onclick="expandAll()">expandAll</a>
<a href="#" onclick="expandTo()">expandTo</a>
</div>
<table id="test"></table>
</body>
</html>
Extjs treeGrid分页实例，项目中用到，拿出来跟大家分享一下，主要是通过两个store实现。[javascript] view plaincopy
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : '项目立项',
isShow : 'true',
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {}
Ext.apply(this, _config)
this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : 'ajax',
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : 'json',
root : 'rows',
totalProperty : "totalCount"
}
},
model : 'ProInfo'
})
this.store = Ext.create('Ext.data.TreeStore', {
model : 'ProInfo',
proxy : {
type : 'ajax',
url : 'xmgl/pro-info-manage.action'
},
folderSort : true,
listeners : {
'beforeload' : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT
_s.proxy.extraParams = this._baseParam
},
scope : this
}
}
})
this['selModel'] = Ext.create('Ext.selection.TreeModel', {
mode : 'SINGLE',
listeners : {
'selectionchange' : {
fn : this.selectionChangeHandler,
scope : this
}
}
})
this['columns'] = [ {
xtype : 'treecolumn',
text : '项目性质',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : '项目名称',
flex : 2.5,
dataIndex : 'proName',
sortable : true
}, {
text : '流程状态',
flex : .75,
dataIndex : 'process',
sortable : true
}, {
text : '项目时间',
xtype : 'datecolumn',
format : 'Y-m-d',
dataIndex : 'crTime',
sortable : true,
flex : .85
}, {
text : '项目编号',
flex : 1,
dataIndex : 'proNo',
sortable : true
}, {
text : '项目单位',
flex : 1,
dataIndex : 'unit',
sortable : true
}, {
text : '优先级',
flex : .6,
dataIndex : 'priority',
sortable : true
}, {
text : '项目类型',
flex : .75,
dataIndex : 'proType',
sortable : true
}, {
text : '项目内容',
flex : 2,
dataIndex : 'proContent',
sortable : true
}, {
text : '附件数',
flex : .6,
dataIndex : 'fileCount',
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : 'pagingtoolbar',
id : 'PROTREEGRID_PAGEBAR',
store : this.store1,
dock : 'bottom',
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return
this._treeGrid._baseParam.start = pdata.fromRecord
this._treeGrid._baseParam.limit = basicConstant.LIMIT
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
})
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == '收入项目') {
return 'srcss'
} else if (record.get("proClass") == '支出项目') {
return 'zccss'
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : 'TBAR_PROTREEGRID',
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), '-', '项目名称：', {
xtype : 'textfield',
width : 70
}, '无分项总体项目显示：', {
xtype : 'checkbox',
checked : true,
width : 70
}, {
text : "查询",
icon : 'images/icons/search.gif',
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : 'images/icons/del.gif',
handler : this.onReset,
scope : this
}, {
text : "高级查询",
icon : 'images/icons/search.gif',
handler : this.onAdvSearch,
scope : this
} ]
})
})
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
})
this.store1.load( {
params : this._baseParam
})
},
onSearch : function() {
var _param = {}
var _tbar = Ext.getCmp('TBAR_PROTREEGRID')
_param.process = _tbar.items.items[0].value
_param.proClass = _tbar.items.items[2].value
_param.proName = _tbar.items.items[5].value
_param.isShow = _tbar.items.items[7].value
// this.store1.load(1)
this._baseParam = _param
this.reLoadData()
},
onReset : function() {
var _tbar = Ext.getCmp('TBAR_PROTREEGRID')
_tbar.items.items[0].setValue('项目立项')
_tbar.items.items[2].setValue('')
_tbar.items.items[5].setValue('')
this._baseParam = {
process : '项目立项',
isShow : 'false'
}
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : '项目立项'
}).show()
}
})
.tree-node-hover{text-decoration:nonecolor:#555555background: #fae8bd
}自己写个css 要在easyui tree.css之后
