普通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(&quot;fName&quot;)" bind-labelRef="$model.mainData.ref(&quot;fName&quot;)"
            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()
	};

下拉显示效果如下:
gridSelect