Add new file

前端组件/hlsTreeList.md

+# hlsTreeList 树状列表
+
+hlsTreeList 需要一个数据源，数据源可使用 <h:dataSource dataType="tree"  id="dataSource"> 需注意的是,dataType要指定为tree，和普通的数据源区别开来。 
+
+
+
+一个完整的例子
+```xml
+    <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分别对应编辑、删除、创建子节点 |
+