名称 |
参数类型 |
是否必填 |
默认值 |
描述 |
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指定排序方式(asc、desc)
数据行循环显示数据,通过${字段名}显示指定字段的名称,可以进行随意组合,如${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");
所有评论仅代表网友意见