[转载]treegrid - Documentation - jQuery EasyUI

[转载]treegrid – Documentation – jQuery EasyUI.

TreeGrid

$(‘#material’).treegrid({
nowrap: false,
rownumbers: true,
animate:true,
collapsible:true,
loadMsg:’数据加载中请稍后……’,
url:'<c:url value=”/jxc/sysinfo/loadMaterialTree.jsps”/>’,
idField:’matCode’,
treeField:’matCode’,
frozenColumns:[[
{title:’料号’,field:’matCode’,width:180}
]],
columns:[[
{field:’matType’,title:’产品类型’,width:120},
{field:’matShow’,title:’产品名称’,width:120},
{field:’matStandard’,title:’产品规格’,width:120},
{field:’matProperties’,title:’产品属性’,width:120}
]],
onBeforeLoad:function(row,param){

// 此处就是异步加载地所在
if (row){
$(this).treegrid(‘options’).url = ‘<c:url value=”/jxc/sysinfo/loadMaterialTree.jsps”/>?matParentId=’+row.matId;
} else {
$(this).treegrid(‘options’).url = ‘<c:url value=”/jxc/sysinfo/loadMaterialTree.jsps?matName=”/>’;
}
},
onClickRow:function(){
/**
** 如果是新建或者修改,以及删除,则清除查询form表单数据
**/
$(‘#materialSearch’).form(‘clear’);
}
});

<table id=”material”></table>

以及树的异步添加、删除、刷新等

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.treegrid.defaults.

Dependencies

  • datagrid

Usage

  1. <table id=“tt”></table>
  1. $(‘#tt’).treegrid({
  2. url:‘treegrid_data.json’,
  3. treeField:‘name’,
  4. columns:[[
  5. {title:‘Task Name’,field:‘name’,width:180},
  6. {field:‘persons’,title:‘Persons’,width:60,align:‘right’},
  7. {field:‘begin’,title:‘Begin Date’,width:80},
  8. {field:‘end’,title:‘End Date’,width:80}
  9. ]]
  10. });

Properties

The properties extend from datagrid, below is the added properties for treegrid.

Name Type Description Default
treeField string Defines the tree node field. null
animate boolean Defines if to show animation effect when node expand or collapse. false

Events

The events extend from datagrid, below is the added events for treegrid.

Name Parameters Description
onClickRow row Fires when user click a node.
onDblClickRow row Fires when user dblclick a node.
onBeforeLoad row, param Fires before a request is made to load data, return false to cancel this load action.
onLoadSuccess row, data Fires when data loaded successfully.
onLoadError arguments Fires when data loaded fail, the arguments parameter is same as the ‘error’ function of JQuery.ajax.
onBeforeExpand row Fires before node is expanded, return false to cancel this expand action.
onExpand row Fires when node is expanded.
onBeforeCollapse row Fires before node is collapsed, return false to cancel this collapse action.
onCollapse row Fires when node is collapsed.
onContextMenu e, row Fires when node is right clicked.
onBeforeEdit row Fires when user start editing a node.
onAfterEdit row,changes Fires when user finish editing.
onCancelEdit row Fires when user cancel editing a node.

Methods

Name Parameter Description
options none Return the options of treegrid.
resize options Set treegrid size, the options contains two properties:
width: the new width of treegrid.
height: the new height of treegrid.
fixRowHeight id fix the specified row height.
loadData data Load the treegrid data.
reload id Reload treegrid data.
reloadFooter footer Reload footer data.
getData none Get the loaded data.
getFooterRows none Get the footer data.
getRoot none Get the root node, return node object
getRoots none Get the root nodes, return node array.
getParent id Get the parent node.
getChildren id Get the children nodes.
getSelected none Get the selected node and return it, if no node selected return null.
getSelections none Get all selected nodes.
getLevel id Get the specified node level.
find id Find the specifed node and return the node data.
select id Select a node.
unselect id Unselect a node.
selectAll none Select all nodes.
unselectAll none Unselect all nodes.
collapse id Collapse a node.
expand id Expand a node.
collapseAll id Collapse all nodes.
expandAll id Expand all nodes.
expandTo id Expand from root to specified node.
toggle id Toggles expanded/collapsed state of the node.
append param Append nodes to a parent node. The ‘param’ parameter contains following properties:
parent: DOM object, the parent node to append to, if not assigned, append as root nodes.
data: array, the nodes data.
remove id Remove a node and it’s children nodes.
refresh id Refresh the specified node.
beginEdit id Begin editing a node.
endEdit id End editing a node.
cancelEdit id Cancel editing a node.
getEditors id Get the specified row editors. Each editor has the following properties:
actions: the actions that the editor can do.
target: the target editor JQuery object.
field: the field name.
type: the editor type.
getEditor options Get the specified editor, the options contains two properties:
id: the row node id.
field: the field name.
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏