简介

  数据表格组件,可编辑行、可拖拽排序、可调整列宽,提供了分页、双击编辑、右键菜单、导出Excel等功能。

 

属性说明

名称

参数类型

是否必填

默认值

描述

method

String

false

 

返回数据的后台方法

sql

String

false

 

获取数据的sql查询语句

id

String

true

 

规定元素的唯一 id

page

boolean

false

true

是否分页

size

int

false

 

每页显示记录数

multiSelect

boolean

false

true

是否允许多选

autoFill

boolean

false

true

是否自动调整高度,以适应界面显示,默认为true

autoPageSize

boolean

false

false

每页的数据条数是否自适应容器

scroll

boolean

false

true

是否允许有滚动条,默认为true

lazy

boolean

false

false

是否默认加载数据,即是否在单独调用loadData方法前,不载入数据

cacheSize

int

false

 

允许缓存的数据大小

详细介绍:

method属性

  为一个Java类的方法,当用户访问这个页面时,该Java类的方法被执行,为表格填充数据。

 

size属性

  为数据表格显示的记录条数。

 

page属性

  当属性值为true的时候,列表进行分页处理。为false则不进行分页处理。分页处理的时候需要加入pagebar标签来显示分页导航条,并且对DataGrid标签进行size属性设置来控制表格分页显示信息的条数。

 

模块说明

  DataGrid标签包含的内容主要分为四个部分:表头(行属性ztype="head")、数据行、编辑行(行属ztype=“edit”)、分页行(行属性ztype=“pagebar”)

  表头主要显示表格的列名称,列属性ztype参数允许值:RowNo 行号;selector:多选框;如果需要排序,请通过sortfield属性指定排序字段, direction指定排序方式(ascdesc

  数据行循环显示数据,通过${字段名}显示指定字段的名称,可以进行随意组合,如${tel}/${mobile}

  编辑行提供双击编辑功能。2.x里面实现起来比较麻烦,并不提倡这种行内编辑,而是选择在数据行添加onDblClick响应的函数来处理。

  分页行提供分页条显示。

示例

页面示例:

 

<z:datagrid id=”advdg1” method=”Advertise.getAdvertiseGrid” size=”15”>

    <table width=”100%” cellpadding=”0” cellspacing=”0” class=”z-datagrid” sortEnd=”afterRowSortEnd”>

        表头 à

        <tr ztype=”head” class=”dataTableHead”>

            <td width=”5%” ztype=”RowNo” drag=”true”><img src=”../framework/images/icon_drag.gif” width=”16” height=”16”>td>

            <td width=”5%” ztype=”selector” field=”id”>td>

            <td width=”35%”><z:lang id=”Advertise.AdvertiseList.DataListADName”>广告名称z:lang>td>

            <td width=”10%”><z:lang id=”Advertise.AdvertiseDataList.DatalistADType”>广告类型z:lang>td>

            <td width=”5%”><z:lang id=”Advertise.AdvetiseList.DataListIsEnabled”>活动z:lang>td>

            <td width=”10%”><z:lang id=”Advertise.Weight”>权重z:lang>td>

        tr>

        数据行 通过onDblClick函数弹出编辑对话框对数据行进行编辑,并处理保存逻辑 à

        <tr onDblClick=”editAD();” class1=”dg_tr_odd” class2=”dg_tr_even”>

            <td> td>

            <td> td>

            <td>${AdName}td>

            <td>${AdTypeName}td>

            <td><b>${IsOpenName}b>td>

            <td>${Weight}td>

        tr>

        分页条 à

        <tr ztype=”pagebar”>

            <td colspan=”9”>${PageBar}td>

        tr>

    table>

z:datagrid>

后台代码示例:AdvertiseUI.java

 

       @Priv(AdvertisePriv.MenuID)

    public void getAdvertiseGrid(DataGridAction dga) {

        String PosID = $V("ID");

        if (StringUtil.isEmpty(PosID) || "null".equals(PosID)) {

            dga.bindData(new DataTable());

            return;

        }

        ZCAdPosition positionDAO = new ZCAdPosition();

        positionDAO.setID(PosID);

        if (!positionDAO.fill()) {

            dga.bindData(new DataTable());

            return;

        }

        String SearchContent = (String) dga.getParam("SearchContent");

        Q qb = new Q("select zcadvertisement.*,(select b.PositionName from zcadposition b where b.id=zcadvertisement.positionid) PositionName,case isopen when 'Y' then '√' else '' end isopenName from zcadvertisement ");

        qb.append(" where PositionID=?", Long.parseLong(PosID));

        if (StringUtil.isNotEmpty(SearchContent)) {

            qb.append(" and AdName like ?", "%" + SearchContent.trim() + "%");

        }

        qb.append(" order by OrderFlag");

        dga.setTotal(qb);

        DataTable dt = qb.fetch(dga.getPageSize(), dga.getPageIndex());

        dt.decodeColumn("ADType", PlatformUtil.getCodeMap("AdvertiseType"));

        LangUtil.decode(dt, "ADTypeName");

        dga.bindData(dt);

    }

页面参考:advertiseList.zhtml。

显示效果

显示效果

 

弹出编辑框效果

弹出编辑框效果

 

前后台数据交互

  DataGrid提供了对外获取数据的接口,常见的如:

  DataGrid.getSelectedValue("dg1") 获取所有选中行的多选框的值,返回值为数组

  DataGrid.selectAll("dg1") 选中全部

  DataGrid.unselectAll("dg1") 全部选中取消

  DataGrid.getSelectedRows返回所有被选中的行

  DataGrid.getSelectedData("dg1") 全部选中行的数据集合DataTable

      

  查询数据:

  DataGrid.setParam("dg1",Constant.PageIndex,0);

  DataGrid.setParam("dg1","CatalogID",cid);

  DataGrid.loadData("dg1");

      

  导出excel

  DataGrid.toExcel("dg1")