| 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设置统一的树叶、树杈图标。
请点击： ，查看上面树的图标.