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