轻松学习jQuery插件易用户界面易用户界面实现树形网络基本操作(2)

一、易居树形网格动态加载动态加载树形网格有助于从服务器上加载部分的行数据，避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid)。

创建树形网格(TreeGrid)

table title=' Products ' class=' measuri-tree grid ' style=' width :700 px；高度：300 px ' URL='树网格3 _ getdata。PHP '行号=' true ' idField=' id ' tree字段=' Name '和tr th字段=' Name ' width=' 250 ' Name/th字段=' quantity ' width=' 100 ' align=' right ' quantity/th字段=' price ' width=' 150 ' align=' right ' format dollar ' price/th字段=' total ' width=' 150 ' align='服务器端代码treegrid3_getdata.php

$id=isset($_POST['id'])？int val($ _ POST[' id ']): 0；包括”conn . PHP”；$ result=array()；$rs=mysql_query('从parentId=$id '的产品中选择*);while($ row=MySQL _ fetch _ array($ RS)){ $ row[' state ']=has _ child($ row[' id '])？关闭' : '打开；$ row[' total ']=$ row[' price ']* $ row[' quantity ']；array_push($result，$ row)；} echo JSON _ encode($ result)；函数具有_child($id){ $rs=mysql_query('从parentId=$id '的产品中选择计数(*)；$ row=MySQL _ fetch _ array($ RS)；是否返回$row[0] 0？真：假；}二、易居树形网格添加分页第二部分教大家如何向带有动态加载特性的树形网格(TreeGrid)添加分页。

创建树形网格(TreeGrid)

启用树形网格(TreeGrid)的分页特性，必须添加"分页：路径"属性，这样页面加载时就会向服务器发送页面和行参数。

table title=' Products ' class=' measuri-tree grid ' style=' width :700 px；高度：300 px '数据-选项=' URL : '树网格4 _ getdata。PHP '，rownumbers: true，pagination: true，pageSize: 2，pageList: [2，10，20]，idField: 'id '，treeField: 'name '，onBeforeLoad:函数(行，参数){ if(！行){ //加载顶级行帕拉姆。id=0；//设置id=0，指示加载新的页面行} } '第一个字段='name '宽度='250 '名称/第一个字段='数量'宽度='100 '对齐='右侧'数量/第一个字段='价格'宽度='150 '对齐='右'格式化程序='格式化美元'价格/第一个字段='总计'宽度='150 '对齐='右'格式化程序='格式美元'合计/th/tr/表服务器端代码

treegrid4_getdata.php

$page=isset($_POST['page'])？int val($ _ POST[' page ']): 1；$rows=isset($_POST['rows'])？int val($ _ POST[' row ']): 10；$ offset=($ page-1)* $ row；$id=isset($_POST['id'])？int val($ _ POST[' id ']): 0；包括”conn . PHP”；$ result=array()；if ($id==0){ $rs=mysql_query('从parentId=0的产品中选择计数(*))；$ row=MySQL _ fetch _ row($ RS)；$ result[' total ']=$ row[0]；$rs=mysql_query('从parentId=0的产品中选择* limit $ offset，$ rows’)；$ items=array()；while($ row=MySQL _ fetch _ array($ RS)){ $ row[' state ']=has _ child($ row[' id '])？关闭' : '打开；array_push($items，$ row)；} $ result[' row ']=$ items；} else { $rs=mysql_query('从parentId=$id '的产品中选择*);while($ row=MySQL _ fetch _ array($ RS)){ $ row[' state ']=has _ child($ row[' id '])？关闭' : '打开；$ row[' total ']=$ row[' price ']* $ row[' quantity ']；array_push($result，$ row)；} } echo JSON _ encode($ result)；函数具有_child($id){ $rs=mysql_query('从parentId=$id '的产品中选择计数(*)；$ row=MySQL _ fetch _ array($ RS)；是否返回$row[0] 0？真：假；}发送到服务器的参数包括：页面：要加载的当前页面行：页面尺寸大小id:父行的编号值，从服务器返回的行将被添加。当展开一个行节点时，' id '值是大于0 的。当改变页码时，' id '值应该被设置为0 来放置加载子行。三、易居树形网格惰性加载节点有时我们已经得到充分的分层树形网格(TreeGrid)的数据。我们还想让树形网格(TreeGrid)按层次惰性加载节点。首先，只加载顶层节点。然后点击节点的展开图标来加载它的子节点。本教程展示如何创建带有惰性加载特性的树形网格(TreeGrid)。

创建树形网格(TreeGrid)

表id=' test ' title=' Folder Browser ' class=' measuri-tree grid ' style=' width :700 px；高度：300 px '数据-选项=' URL : '数据/树grid _ data。' JSON '，method: 'get '，rownumbers: true，idField: 'id '，treeField: 'name '，load filter : my load filter ' the and tr th field=' Name ' width=' 220 ' Name/th field=' size ' width=' 100 ' align=' right ' size/th field='为了放置加载子节点，我们需要为每个节点重命名儿童的属性。正如下面的代码所示，'孩子'属性重命名为儿童1 .当展开一个节点时，我们调用追加方法来加载它的子节点数据"加载过滤器"代码

函数myLoadFilter(数据，ParentID){ 0函数setDATa(){ var todo=[]；for(var I=0；idata . LengTii){ todo。推送(数据[I])；} while(todo。length){ var node=todo。shift()；if(节点。children){ node。状态='关闭'；节点。子节点1=节点。儿童；node.children=undefinedtodo=todo。concat(节点。儿童1名)；} } } setData(数据);var TG=$(this)；var opts=TG。树网格('选项')；选择。onbeforeexpand=函数(行){ if(行。儿童1){ TG。树网格(' append '，{ parent: row[opts.idField]，data : row。儿童1 })；row.children1=未定义；tg.treegrid('expand '，row[opts。idfield])；}返回row . children 1==undefined }；返回数据；}以上就是针对树形网络的相关操作，希望对大家的学习有所帮助，大家可以结合前一篇文章进行学习，会有意想不到的收获。

相关文章阅读： 《轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）》