普通data中可以设置树形,但是右键直接编辑的数据默认是不支持树形的,如果要加载树形数据需要loadData树形格式的json数据
gridSelect显示树形下拉需要设置option中的appearance为tree或者treeGrid(下拉中显示多列),并且设置expandColumn为要以树形展开显示下拉的option关联的data中的关系
gridSelect的option关联普通data实现树形下拉的具体实现,参考如下:
1.option关联的普通data的定义
<div component="$UI/system/components/justep/data/data" autoLoad="false" xid="treeData5" idColumn="fID" isTree="true">
<column name="fID" type="String" xid="xid15"/>
<column name="fParentID" type="String" xid="xid16"/>
<column name="fName" type="String" xid="xid17"/>
<column name="fKind" type="String" xid="xid19"/>
<treeOption xid="default27" parentRelation="fParentID" nodeKindRelation="fKind"/>
</div>
2.gridSelect的定义
<div class="x-gridSelect" component="$UI/system/components/justep/gridSelect/gridSelect"
xid="gridSelect13" bind-ref="$model.mainData.ref("fName")" bind-labelRef="$model.mainData.ref("fName")"
onShowOption="gridSelect13ShowOption" style="width:181px;">
<option xid="option17" data="treeData5" value="fName" label="fName"
appearance="tree" autoLoad="true" expandColumn="fName"/>
</div>
3.在gridSelect的onShowOption事件中给option关联的普通data通过loadData加载数据
Model.prototype.gridSelect13ShowOption = function(event){
//定义json格式的树形数据
var json = {"rows":[{"fID":"1","fName":"办公用品","fParentID":{},"fKind":"","rows":[{"fID":"2","fName":"记事本","fParentID":"1","fKind":"","rows":[{"fID":"4","fName":"4K记事本","fParentID":"2","fKind":"nkLeaf"},{"fID":"5","fName":"8K记事本","fParentID":"2","fKind":"nkLeaf"}]},{"fID":"3","fName":"笔","fParentID":"1","fKind":"nkLeaf"}]}]};
var treeData = this.comp("treeData5");
treeData.loadData(json);//给data加载数据
var grid = event.source.grid;//获取gridSelect中的grid
grid.refresh()
};

评一波