谁有EasyUI treegrid具体实例 包含分页代码
谁有EasyUI treegrid具体实例 包含分页代码
[解决办法]
treegrid.html
<!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/html; charset=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=0; i<nodes.length; i++){ 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>
[解决办法]
页面怎么写我想你应该 懂得 treegrid 要求返回数据的格式为：
{"total":117,"rows":[ {"id":1,"code":"code1","name":"name1","addr":"address1"}, {"id":11,"code":"code11","name":"name11","addr":"address11","_parentId":1}, {"id":12,"code":"code12","name":"name12","addr":"address12","_parentId":1}, {"id":2,"code":"code2","name":"name2","addr":"address2","state":"closed"}, {"id":21,"code":"code21","name":"name21","addr":"address21","_parentId":2}, {"id":22,"code":"code22","name":"name22","addr":"address22","_parentId":2}, {"id":3,"code":"code3","name":"name3","addr":"address3","state":"closed"}, {"id":31,"code":"code31","name":"name31","addr":"address31","_parentId":3}, {"id":32,"code":"code32","name":"name32","addr":"address32","_parentId":3}, {"id":4,"code":"code4","name":"name4","addr":"address4","state":"closed"}, {"id":41,"code":"code41","name":"name41","addr":"address41","_parentId":4}, {"id":42,"code":"code42","name":"name42","addr":"address42","_parentId":4}, {"id":5,"code":"code5","name":"name5","addr":"address5"}, {"id":51,"code":"code51","name":"name51","addr":"address51","_parentId":5}, {"id":52,"code":"code52","name":"name52","addr":"address52","_parentId":5}, {"id":6,"code":"code6","name":"name6","addr":"address6","state":"closed"}, {"id":61,"code":"code61","name":"name61","addr":"address61","_parentId":6}, {"id":62,"code":"code62","name":"name62","addr":"address62","_parentId":6}, {"id":7,"code":"code7","name":"name7","addr":"address7","state":"closed"}, {"id":71,"code":"code71","name":"name71","addr":"address71","_parentId":7}, {"id":72,"code":"code72","name":"name72","addr":"address72","_parentId":7}, {"id":8,"code":"code8","name":"name8","addr":"address8","state":"closed"}, {"id":81,"code":"code81","name":"name81","addr":"address81","_parentId":8}, {"id":82,"code":"code82","name":"name82","addr":"address82","_parentId":8}, {"id":9,"code":"code9","name":"name9","addr":"address9","state":"closed"}, {"id":91,"code":"code91","name":"name91","addr":"address91","_parentId":9}, {"id":92,"code":"code92","name":"name92","addr":"address92","_parentId":9}, {"id":10,"code":"code10","name":"name10","addr":"address10","state":"closed"}, {"id":110,"code":"code110","name":"name110","addr":"address110","_parentId":10}, {"id":120,"code":"code120","name":"name120","addr":"address120","_parentId":10}]}