<table id="tt"></table>
$('#tt').datagrid(options)
②创建表格的列名有两种方式:第一种是直接在table标签中定义,第二种是销慧世在js中定义:
我使用的是第一种方式:
<!-- 表格 -->
<table id="loginInfoTable"
title="用户信息一览"
border="0"
cellspacing="0"
cellpadding="0"
iconCls="icon-edit"
width="98%"
idField="loginId"
pagination="true"
remoteSort="false"
singleSelect="false"亏肢
showFooter="false"
striped="true"
url="<%=root%>/ospm/loginInfo/doLoginInfoSearch.jhtml">
<thead>
<tr align="center">
<th field="ck" width="20" checkbox="true" width="20"></th>
<th field="loginCode" width="200">用户名</th>
<th field="statuValue" width="100">状态</th>
<碧伏th field="opt" formatter='optFormater' width="150"> *** 作</th>
</tr>
</thead>
</table>
datagrid有一个属性叫url,在进入页面后,它会通过ajax方式向后台发送请求,后台封装相应数据(JSON格式)再返回给前台即可显示。注意:datagrid在回调函数中必须获得两项json数据:total表示查询出的总结过,rows表示显示在table中的数据集合。
/**
* 封装Json数据
*/
long total = 0// 符合查询的总条数
List<LoginInfoTableDto>lstTable = null// 查询结果
total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL)
if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) {
lstTable = (List<LoginInfoTableDto>) mapLoginInfo
.get(Constant4Ospm.SEARCH_RESULT)
} else {
//注:如果从数据库查询不出数据,也必须封装一个空的json集合,不然页面就会报js错误
lstTable = new ArrayList<LoginInfoTableDto>()
}
JSONObject datas = new JSONObject()
// 设置总共有多少条记录
datas.put(Constant4Ospm.TOTAL, total)
// 设置当前页的数据
datas.put(Constant4Ospm.PAGE_SIZE, lstTable)
④后台数据与表格关联
后台过来的数据怎么与表格每一列对应呢?其实很简单:后台rows中包含了名叫LoginInfoTableDto的javabean-json集合,datagrid的field和idField对应LoginInfoTableDto中的一个属性(大体上是这样,当然field也可以不对应javabean的属性,你可以进行一些转换)。
可以,和者敏但是数据必须是JSON对象,并且符合以下格式:{"total":总记录数,"rows":数据唤枝行数组}
例如:
{"total":300,"rows":[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]}
这个JSON数据对象可以是你在页面上自己拼凑出来的,也可以是通过AJAX请求从服务器端响应来的等等,从哪里来的无所谓,只要符合以上格式就行,然后通过DataGrid组件的loadData方法加载,如下(假设data变量值是上面举例的那个数据对象):
$("嫌搜#demoDataGrid").datagrid("loadData",data)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)