# hlsTreeList 树状列表

hlsTreeList 需要一个数据源，数据源可使用 
```xml
<h:dataSource dataType="tree"  id="dataSource">

```
**需注意的是,dataType要指定为tree，和普通的数据源区别开来**


<br/>
### 一个完整的例子
```html
    <script><![CDATA[
    // 点击编辑里面的按钮就会触发
    function onEdit(arg) { 
        var model = arg.model;
        alert("TreeList edit: " + model.accountName + " " + model.accountCode);
    }
    
    // 保存同步（请求）之前触发
    function onSave(arg) { 
        alert("TreeList save");
    }
    
    // 删除同步（请求）之前触发
    function onRemove(arg) {
        alert("TreeList remove");
    }

 

    function parameterMap(options, type){
        if (type !== "read") {
            if (type == 'create' || type == 'update') {
                options['__status'] = (type == 'create' ? 'add' : 'update');
            }else if(type==="destroy") {
                options['__status'] = 'delete';
            }
            return kendo.stringify([options]);
        } else if (type === "read") {
            return {
                accountSetId:10006
            };
        }
    }
     ]]><</script>

	<h:dataSource dataType="tree"  id="dataSource">
		<h:transport parameterMap="parameterMap">
			<h:read url="${base.contextPath}/gld/account/tree" type="POST"
					dataType="json" contentType="application/x-www-form-urlencoded"/>
			<h:create url="${base.contextPath}/gld/account/submit" dataType="json" type="POST"
					  contentType="application/json" />
			<h:update url="${base.contextPath}/gld/account/submit" dataType="json" type="POST"
					  contentType="application/json" />
			<h:destroy url="${base.contextPath}/gld/account/remove" dataType="json"  type="POST"
					   contentType="application/json" />
		</h:transport>

		<h:schema data="rows" >
			<h:model id="accountId" expanded="true" parentId="parentId">
				<h:fields>
					<h:item name="accountName" type="string">
						<h:validation required="true"/>
					</h:item>
					<h:item name="accountCode" type="string"/>
					<h:item name="accountSetId" defaultValue="10006"/>
				</h:fields>
			</h:model>
		</h:schema>
	</h:dataSource>



    	<h:hlsTreeBox hlsTreeId="treeList"  hlsBtnType="add"  title="科目层次">
		<h:hlsTreeList id="treeList"
					   columnMenu="true"
					   filterable="true"
					   sortable="true"
					   editable="popup"
					   dataSource="dataSource"
					   height="400"
					   edit="onEdit"
					   save="onSave"
					   remove="onRemove"
					   >
			<h:columns>
				<h:column field="parentId" hidden="true" format="{0:#}" title='<@spring.message "父节点"/>'>
					<h:headerAttributes style="text-align:center;" />
					<h:attributes style="text-align:center;" />
				</h:column>
				<h:column field="accountCode" expandable="true" title='<@spring.message "科目代码"/>'>
					<h:headerAttributes style="text-align:center;" />
					<h:attributes style="text-align:center;" />
				</h:column>
				<h:column field="accountName"  title='<@spring.message "科目名称"/>'>
					<h:headerAttributes style="text-align:center;" />
					<h:attributes style="text-align:center;" />
				</h:column>
				<h:column  title="编辑" command='edit,destroy,createChild'  >
					<h:headerAttributes style="text-align:center;" />
					<h:attributes style="text-align:center;" />
				</h:column>
			</h:columns>
		</h:hlsTreeList>
	</h:hlsTreeBox>
```

### **注意**
*  数据源中指定的read查询的结果集中需要包含parentId字段（kendo UI TreeList部件所要求的）
*  达到分层显示的效果需要在数据源的<h:model>加上 parentId="parentId" 
*  hlsBtnType指定的add为根节点添加兄弟节点，需要给指定节点添加子节点，请点击行记录上的新增按钮

### **主要属性说明**

| 属性名 | 类型 | 描述 |
| --- | --- | --- |
|expanded | String | 控制子节点是否自动展开 |
|dataType | String | 指定数据源类型 |
|editable| String | editable="true"控制数据行可编辑，editable="popup"指定编辑状态的是弹框编辑 |
| editable | String | 文字说明 | 
| edit | fn | 指定点击编辑按钮时调用的函数 |
| save | fn | 指定点击保存（发送请求之前）调用的函数|
| remove | fn | 指定点击确认删除（发送请求之前）调用的函数 |
| columnMenu | Boolean | 给TreeList加上列显示隐藏的功能 |
| sortable | Boolean | 给TreeList加上列排序的功能 |
| filterable | Boolean | 给TreeList加上检索功能 |
| commands | String | 一般使用edit,destroy,createChild分别对应编辑、删除、创建子节点 |

