jquery easyui treegrid demo

zhangmingming 2013-07-11

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>jQueryEasyUI</title>

<linkrel="stylesheet"type="text/css"href="../../themes/default/easyui.css">

<linkrel="stylesheet"type="text/css"href="../../themes/icon.css">

<linkrel="stylesheet"type="text/css"href="../demo.css">

<scripttype="text/javascript"src="../../jquery.min.js"></script>

<scripttype="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/demo.json',

idField:'code',

treeField:'code',

pagination:true,

frozenColumns:[[

{title:'code',field:'code',width:150}

]],

columns:[[

{field:'name',title:'Name',width:120},

{field:'size',title:'Size',width:120,rowspan:2},

{field:'date',title:'date',width:150,rowspan:2}

]]

});

});

functionreload(){

$('#test').treegrid('reload');

}

functiongetChildren(){

varnode=$('#test').treegrid('getSelected');

if(node){

varnodes=$('#test').treegrid('getChildren',node.code);

}else{

varnodes=$('#test').treegrid('getChildren');

}

vars='';

for(vari=0;i<nodes.length;i++){

s+=nodes[i].code+',';

}

alert(s);

}

functiongetSelected(){

varnode=$('#test').treegrid('getSelected');

if(node){

alert(node.code+":"+node.name);

}

}

functioncollapse(){

varnode=$('#test').treegrid('getSelected');

if(node){

$('#test').treegrid('collapse',node.code);

}

}

functionexpand(){

varnode=$('#test').treegrid('getSelected');

if(node){

$('#test').treegrid('expand',node.code);

}

}

functioncollapseAll(){

$('#test').treegrid('collapseAll');

}

functionexpandAll(){

$('#test').treegrid('expandAll');

}

functionexpandTo(){

$('#test').treegrid('expandTo','02013');

$('#test').treegrid('select','02013');

}

</script>

</head>

<body>

<h1>TreeGrid</h1>

<divstyle="margin:10px;">

<ahref="#"onclick="reload()">reload</a>

<ahref="#"onclick="getChildren()">getChildren</a>

<ahref="#"onclick="getSelected()">getSelected</a>

<ahref="#"onclick="collapse()">collapse</a>

<ahref="#"onclick="expand()">expand</a>

<ahref="#"onclick="collapseAll()">collapseAll</a>

<ahref="#"onclick="expandAll()">expandAll</a>

<ahref="#"onclick="expandTo()">expandTo</a>

</div>

<tableid="test"></table>

</body>

</html>

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>Treegrid分页-jQueryEasyUIDemo</title>

<linkrel="stylesheet"type="text/css"href="themes/metro/easyui.css">

<linkrel="stylesheet"type="text/css"href="themes/icon.css">

<scripttype="text/javascript"src="jquery-1.8.0.min.js"></script>

<scripttype="text/javascript"src="jquery.easyui.min.js"></script>

<script>

$(function(){

$("#tt").treegrid({

url:'treegrid-data.php',

idField:'areaid',

treeField:'name',

rownumbers:true,

pagination:true,

fitColumns:true,

autoRowHeight:false,

onLoadSuccess:function(){

delete$(this).treegrid('options').queryParams['id'];

}

});

});

</script>

</head>

<body>

<h1>Treegrid分页演示</h1>

<p>Treegrid分页的分页其实就是tree的顶级节点分页,下面的子节点其实是不分页的...</p>

<tableid="tt"title="Treegrid分页"style="width:550px;height:300px">

<thead>

<tr>

<thdata-options="field:'name'"width="200">

名称

</th>

<thdata-options="field:'vieworder'"width="200">

排序

</th>

</tr>

</thead>

</table>

</body>

</html>

相关推荐