Grid组件

Grid组件是APL中非常重要的一个数据UI组件,它支持锁定,复合表头,排序等特性.

我们通过<a:grid>标签来定义一个grid对象.

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    <a:toolBar>
        <a:button icon="../../images/add.gif" text="HAP_NEW" click="addUserInfo"/>
    </a:toolBar>
    <a:columns>
        <a:column width="117" name="user_name" sortable="true"/>
        <a:column width="150" name="description" sortable="true"/>
        <a:column width="80" align="center" name="start_date" renderer="Aurora.formatDate" sortable="true"/>
        <a:column width="80" align="center" name="end_date" renderer="Aurora.formatDate" sortable="true"/>
        <a:column width="80" align="center" name="frozen_flag_display" sortable="true"/>
        <a:column width="80" align="center" name="frozen_date" renderer="Aurora.formatDate" sortable="true"/>
        <a:column width="70" name="edit" align="center" prompt="HAP_EDIT" renderer="editUser"/>
    </a:columns>
</a:grid>

生成的界面如下:

数据绑定

Grid的数据来源是通过DataSet来获取的,所以Grid需要绑定到一个DataSet上才能正常显示数据.

在grid上我们配置bindTarget属性来指定grid的数据源,bindTarget的值对应到一个具体的dataset的id.

在grid上我们可以配置多个显示列,在列上指定name值,对应到dataset中field的name.

列对齐

column上的align属性,可以指定为center,left,right,对应列中的文字排列方式分别为居中,靠左,靠右.默认值是center

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column width="117" name="user_name" align="center"/>
        <a:column width="150" name="description"/>
        ...
    </a:columns>
</a:grid>

列锁定

column上的lock属性,可以指定为true或者false,当指定为true的时候当前列将会被锁定.默认值是false

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column width="117" name="user_name" lock="true"/>
        <a:column width="150" name="description"/>
        ...
    </a:columns>
</a:grid>

调整列宽

column上的resizable属性,可以指定为true或者false,当指定为true的时候当前列可以动态改变宽度.默认值是true

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column width="117" name="money" resizable="false"/>
        ...
    </a:columns>
</a:grid>

排序

column上的sortable属性,我们可以指定为true或者false来指定当前列是否可以排序.默认值是false

注意:当点击表头栏的时候会进行排序,这里是通过ajax重新进行了一次查询,是对所有数据的排序.

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column width="117" name="user_name" sortable="true"/>
        ...
    </a:columns>
</a:grid>

复合表头

很多情况下我们需要对表头进行组合,这个时候我们可以通过嵌套column列来实现

注意:当点击表头栏的时候会进行排序,这里是通过ajax重新进行了一次查询,是对所有数据的排序.

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column prompt="复合表头">
            <a:column width="117" name="user_name" prompt="列1"/>
            <a:column width="117" name="user_name" prompt="列2"/>
            ...
        </a:column>
        ...
    </a:columns>
</a:grid>

显示效果:

列渲染

渲染函数(renderer)

很多情况下我们并不需要直接显示数据,而是需要对数据进行一下加工,例如对于大于0的金额显示绿色,小于0的金额显示红色.这个时候我们就需要在column上指定renderer渲染函数来实现.

首先我们需要实现一个renderer函数,来判断当前金额,然后返回一段html代码.

                
function moneyRenderer(value,record, name){    
    if(value >=0){
       return '<font color="green">'+value+'</font>'
    }else{
        return '<font color="red">'+value+'</font>'
    }
}

接下来在column上指定renderer属性为moneyRenderer.

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column width="117" name="money" renderer="moneyRenderer"/>
        ...
    </a:columns>
</a:grid>

汇总列

grid提供了汇总的功能,我们可以通过在列上配置footerRenderer来实现.

例如:我们需要对金额列进行汇总.首先需要实现一个汇总的函数summaryRenderer

                
function summaryRenderer(datas,name){
    var sum = 0;
    for(var i=0;i<datas.length;i++){
        var r = datas[i];
        var d = r.get(name);
        var n = parseFloat(d);
        if(!isNaN(n)){                        
            sum +=n;
        }
    }
    return '合计金额: <font color="red">' + Aurora.formatNumber(sum) + '</font>';
}

接下来在column上指定footerRenderer属性为summaryRenderer.

                
<a:grid bindTarget="sys_user_result_ds" navBar="true" width="800" id="sys_user_define_grid" height="400">
    ...
    <a:columns>
        <a:column width="117" name="money" footerRenderer="summaryRenderer"/>
        ...
    </a:columns>
</a:grid>

注意:这里的summaryRenderer的数据范围只能局限在当前页.无法统计到所有数据.换句话说无法统计到下一页的数据

工具栏

在Grid组件上提供了一个工具栏,Grid本身提供了内置的几个按钮,我们还可以自定义新的按钮.

                
<a:grid id="grid" bindTarget="sys_function_result_ds" height="300" navBar="true" width="500">
    <a:toolBar>
        <a:button type="add"/>
        <a:button type="delete"/>
        <a:button type="save"/>
    </a:toolBar>
    <a:columns>
        ...
    </a:columns>
</a:grid>

我们可以看到在grid上我们添加了3个按钮.通过指定type值可以确定这个按钮的逻辑.

Grid组件默认提供了3种类型的按钮.

add -- 在当前grid中新增一条记录.
delete -- 删除当前选中的记录.
save -- 保存修改过的记录.

除了Grid内置的按钮,我们还可以自定义按钮

                
<a:grid id="grid" bindTarget="sys_function_result_ds" height="300" width="500">
    <a:toolBar>
        <a:button icon="../../images/add.gif" text="HAP_NEW" click="addUserInfo"/>
    </a:toolBar>
    <a:columns>
        ...
    </a:columns>
</a:grid>

icon代表按钮的图标,text表示按钮的文本内容,click指定当前按钮的动作.

编辑器

大部分情况下我们需要对数据进行编辑,APL的Grid组件可以集成编辑器,只需要在列中配置editor.

                
<a:grid id="grid" bindTarget="sys_function_result_ds" height="300" width="500">
    <a:toolBar>
        <a:button type="add"/>
        <a:button type="delete"/>
        <a:button type="save"/>
    </a:toolBar>
    <a:columns>
        <a:column name="function_code" editor="sys_function_result_grid_tf" width="100"/>
        <a:column name="function_name" editor="sys_function_result_grid_tf" width="120"/>
        <a:column name="parent_function_name" editor="sys_function_result_grid_lv" width="120"/>
        ...
    </a:columns>
    <a:editors>
        <a:textField id="sys_function_result_grid_tf"/>
        <a:lov id="sys_function_result_grid_lv"/>
    </a:editors>
</a:grid>

这里我们可以看到Grid中增加了一个editors子标签,在editors标签下定义了几个编辑器.我们可以把ediotrs理解为grid下的一个组件库. 每一个编辑器需要指定一个唯一的id,然后在列上配置editor指定你所需要的编辑器id.这样当你点击grid的某一个单元格的时候,grid 首先回去找列中对应的editor值,然后再去组件中根据id来查找,最后显示到指定的单元格上.