树型控件
属性说明
参数名 |
含义 |
是否必须 |
说明 |
mode |
树型控件类型 |
Y |
值:radio:单选树型控件,check:多选树型控件 |
parent-prop |
父结点名称 |
Y |
表示结点的父级字段名 |
id-prop |
数据项的主键名称 |
Y |
数据项的主键名称,与parent-prop字段对应 |
display-express |
显示字段名称 |
Y |
树结点显示的字段名称 |
value-prop |
结点存储值字段 |
N |
树结点保留的值对应的字段名称 |
data-source-name |
数据源名称 |
Y |
使用<g-data-source>标签配置的数据源名称 |
async |
是否为异步数据源 |
Y |
数据源是否为异步数据源,true:是;false:不是 |
has-child-prop |
是否存在子结点字段名 |
Y |
async=true时,数据项中说明是否存在子结点的字段名。 |
is-expand-all |
是否全部展开 |
N |
初始打开时,是否全部展开,true:全部展开,false:只展开根结点。默认:false |
show-select |
是否显示勾选框 |
N |
可以是表达式,或者函数。如id>3,其中id为数据的字段名称;函数为controller中自定义的函数,参数为数据项。默认为显示 |
allow-choose-parent |
是否可以勾选父结点 |
N |
是否可以选择父结点,true:可选择树枝结点,false:不可选树枝结点(只能选择叶子结点),默认为true |
allow-cascade-select |
是否可以级联勾选 |
N |
true:选中树技结点时,自动选中所有子孙结点。取消选中时,自动取消所有子孙结点.只有mode=check,async=true时设置有效。默认为false |
ng-model |
双向绑定 |
N |
双向绑定,绑定的是数据项,为数组类型。 |
choose-items |
选中项 |
N |
为选中的项,类型为数组类型 |
current-row |
当前行 |
N |
树型控件上的当前行数据(为数据源中的数据) |
width |
设置控件的宽度 |
N |
|
height |
设置控件的高度 |
N |
|
ng-show |
显示隐藏 |
N |
值:true:显示,false:隐藏 |
使用方式
<g-data-tree
mode="check"
parent-prop="parent"
id-prop="id"
display-express="display"
value-prop="value"
data-source-name="asyncTreeSource"
async="true"
has-child-prop="hasChild"
is-expand-all="true"
show-select="id!=='4'&&id.parent!=='4'"
allow-choose-parent="true"
allow-cascade-select="true"
ng-model="checkValues"
choose-items="checkedItems"
current-row="test.currentRow"
width="500px"
height="500px"
ng-show="true"
>
</g-data-tree>