普通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() };
评一波