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