jquery的easyUI里的datagrid是erp系统中常用到的表格展示工具,在java项目中,我使用struts与jquery的前台页面程序进行数据交互,由于easyUI中有一些固定名称的变量,于是我便想做一个数据模型方便进行使用。主要是在继承的Action中加入一些固定的变量,Action程序如下:
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.regex.Pattern;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.JSONObject;
/**
* 封装了与easyUI datagrid对接的数据模型<br/>
* 1:返回数据中不允许有null的value,所以对null进行了转化(转化为空字符)<br/>
* 2:对数据中以time结尾的字段的时间格式进行了转化(默认将unix时间转为yyyy-MM-dd HH:mm:ss)
*/
public class BaseViewAction extends ActionSupport{
private static final long serialVersionUID = 1L;
private JSONObject resultObj;
public int page;
public int rows;
public String sort;
public String order;
private int total;
private String time_pattern = "yyyy-MM-dd HH:mm:ss";
private List<Map<String, Object>> dataList;
public JSONObject getResultObj() {
for(Map<String, Object> data : dataList) {
for(Map.Entry<String, Object> entry : data.entrySet()) {
String key = entry.getKey();
// datagrid中不允许出现值为null的字段,在这里进行转化
if(entry.getValue() == null) {
data.put(key, "");
}
if(key.endsWith("time")) {
data.put(key, getTimeVal(entry.getValue().toString()));
}
}
}
Map<String, Object> parameter = new HashMap<String, Object>();
parameter.put("total", total);
parameter.put("rows", dataList);
resultObj =JSONObject.fromObject(parameter);
return resultObj;
}
private static Pattern pattern = Pattern.compile("^[1-9][0-9]{9}$");
SimpleDateFormat sdf = new SimpleDateFormat(time_pattern);
/**
* 由于数据库中的时间格式是unix时间,所以转化为用户可视的时间格式
* @param unix时间字符串
*/
private String getTimeVal(String value) {
if("0".equals(value))
return "";
if(!pattern.matcher(value).find())
return value;
long time = Long.valueOf(value);
return sdf.format(new Date(time*1000L));
}
public void setResultObj(JSONObject resultObj) {
this.resultObj = resultObj;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public String getOrder() {
return order;
}
public void setOrder(String order) {
this.order = order;
}
public void setDataList(List<Map<String, Object>> dataList) {
this.dataList = dataList;
}
public void setTotal(int total) {
this.total = total;
}
public String getTime_pattern() {
return time_pattern;
}
/**
* 这里允许改变时间字段返回的格式
* @param time_pattern 默认yyyy-MM-dd HH:mm:ss
*/
public void setTime_pattern(String time_pattern) {
this.time_pattern = time_pattern;
}
}
在实际应用中,我们需要在Action中继承此Action,实用(实际应用)代码如下:
1.Action代码
public class ManagerViewAction extends BaseViewAction{
private static final long serialVersionUID = 1L;
private Map<String, Object> filters = new HashMap<String, Object>();
public void setName(String name) {
this.filters.put("name", name);
}
public void setType(String type) {
this.filters.put("type", type);
}
@Override
public String execute() throws Exception {
return SUCCESS;
}
public String dataList() throws Exception {
BaseManagerServiceI service = (BaseManagerServiceI)SpringManager.getBean(BaseManagerServiceI.class.getName());
List<Map<String, Object>> dataList = service.queryDataList(page, rows, sort, order, filters);
int totalNum = service.queryDataCount(filters);
/** 主要是下面的2行代码,这里需要设置返回的数据以及总行数 */
this.setDataList(dataList);
this.setTotal(totalNum);
return SUCCESS;
}
}
2.struts.xml配置:
<package name="json" extends="json-default">
<action name="ManagerViewAction" class="app.order.action.ManagerViewAction">
<result type="json">
<param name="root">resultObj</param>
</result>
</action>
</package>
3.前台:
$(function(){
$("input[type=button]").button();
var xx = top.document.getElementById('result');
curGridObj = $('#dataList').datagrid({
title:'基础管理',
width:$("#content").width()-2,
height:$(xx).height()-60,
nowrap: false,
striped: true,
url:'/ManagerViewAction!dataList.do',
sortName: 'add_time',
sortOrder: 'desc',
idField:'id',
pagination:true,
pageSize:15,
pageNumber:1,
pageList:[15,20,30],
loadMsg:'正在加载数据......',
columns:[[
{title:'id',field:'id',hidden:true},
{title:'列1',field:'column1',width:60,align:'center'},
{title:'列2',field:'column2',width:150,align:'center',sortable:true},
{title:'列3',field:'column3',width:150,align:'center',sortable:true},
]],
rownumbers:true,
toolbar:[]
});
var p = $('#dataList').datagrid('getPager');
p.pagination({
pageSize:15,
pageList:[15,20,30],
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
});
<body style="font-size:9pt;margin:0;overflow:hidden;">
<table id="content" width="100%" cellspacing="0" cellpadding="3">
<tr>
<td colspan="6">
<table id="dataList" style="width:100%;"></table>
</td>
</tr>
</table>
</body>
以上代码是根据项目中的更改后的,如不能直接运行,请调试,另外别忘了加入
struts-json的lib包
分享到:
相关推荐
JS EasyUI DataGrid动态加载数据
EasyUI DataGrid过滤用法实例
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
解决EasyUIdataGrid列比较多,无数据,列展现不全
easyUI datagrid 自动调整行号大小
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
easyui的datagrid的数据渲染
easyUI datagrid 行上移,下移,置顶,置底的方法
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
一个update扩展方法 文档中一种是比较笨的方法 一次只能修改一个列而且受列编辑类型影响(比如number datetime)扩展一次编辑多列,不受编辑类型影响,没有编辑属性也可以。
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
easyUI datagrid 实现行上移,下移,置顶,置底,绑定键盘事件 键盘“↑”表示上移,键盘“↓”表示下移,键盘Ctrl+“↑”表示置顶,键盘Ctrl+“↓”表示置底。
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
EasyUI Datagrid 中文排序的问题 解决了WEB端和后台(Oracle、MySQL)中文排序问题
easyui datagrid 导出到excel,图解
NULL 博文链接:https://skyfar666.iteye.com/blog/1840145
easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据