1.以往介绍的树，都是需要有多个排序列才能呈现多层. 而下面的树仅需要一列(代码列)，树的层次级别是由代码本身的规则决定的；
2.若修改了科目代码，其级别会立即自动更新；
3.若修改了明细科目的余额和发生额，会自动向上级科目汇总；

有一种常见的场景是不希望看到代码，将代码列隐去即可：
树的另一种显示样式：

1.查看创建该TreeList的XML描述文件，以及加载的JSON数据；
2.这个JSON数据中, 没有上级科目的余额和发生额，也没有任何“期末余额”数据，因为硕正套件会自动根据XML描述文件中定义的规则计算出这些数据的；
3.源码分析：
　　页面中并没有多少 js 源码，功能都是由XML描述文件中设定的，下面就是这个 XML 文件中关键的部分：

<TreeList>
 <!-- treeformat="byId" 是关键，表示树的上下级是按代码创建的 -->
 <Properties Title="科目余额表" editAble="true" isTree="true" treeformat="byId" >
  <Expresses>
   <!-- 让期末的“方向” 自动等于 期初的“方向” -->
   <Express>jd2=jd</Express>
   <!-- 期末余额 和 期初余额、发生额的逻辑关系 -->
   <Express>qmye = if(jd==2, qcye + dfe - jfe, qcye + jfe - dfe)</Express>
  </Expresses>
 </Properties>
 
 <!-- 余额 和 发生额都定义了suntotalExpress: 分类汇总，即自动逐级向上汇总 -->
 <Cols>
  <Col name="kmdm"  width="150">科目代码</Col>
  <Col name="kmmc"  width="180">科目名称</Col>
  <group name="期初">
    <Col name="jd"    width="40" align="center" editType="droplist" droplistID="jdList">方向</Col>
    <Col name="qcye"  width="100" dataType="double" decimal="2" subTotalExpress="@sum">余额</Col>
  </group>
  <group name="本期发生">
    <Col name="jfe"   width="100" dataType="double" decimal="2" subTotalExpress="@sum">借方</Col>
    <Col name="dfe"   width="100" dataType="double" decimal="2" subTotalExpress="@sum">贷方</Col>
  </group>
  <group name="期末">
    <Col name="jd2"   width="40" align="center" editType="droplist" droplistID="jdList">方向</Col>
    <Col name="qmye"  width="100" dataType="double" decimal="2" subTotalExpress="@sum">余额</Col>
  </group>
 </Cols>
 
 <!-- “方向”的字典 -->
 <Droplists>
  <Droplist id="jdList">
   <item key="1">借</item>
   <item key="2">贷</item>
   <item key="3">平</item>
  </Droplist>
 </Droplists>
</TreeList>

　　可见，subTotalExpress就是纵向的逐级汇总计算逻辑、<Expresses>中的就是横向的计算逻辑；

4.完善计算逻辑：
　　修改了期初余额，能自动计算期末余额。如果您想让它反过来自动计算期初余额，只要再加一行Express表达式就行，这个表达式就留给您自己写吧。

5.树的图标
　　可以通过SetTreeImage函数、或displayMask属性为每行单独设置图标，也可以采用TreeImageLeaf、 TreeImageNodeExpand、 TreeImageNodeCollapse设置统一的树叶、树杈图标。
　　请点击：，查看上面树的图标.