struts2+easyui datagrid不可编辑列表显示
2014-05-07 11:03
309 查看
//从后台去数据到前台显示
//////////////////js
端
//加载数据
$('#tableContent').datagrid({
title:'不可编辑datagrid列表 ',
width:'auto',
height:'auto',
striped:true,
singleSelect: true,
url:’’,
queryParams:{},
loadMsg:'数据加载中请稍后……',
//开启分页组件
pagination:true,
//初始化每页显示条数
pageSize:10,
//初始化当前页,如果不设置,在已转向其他页码的页面上,点查询,会出现还是查询上次//页面的数据,不能从第一页开始
pageNumber:1,
rownumbers:true,
fitColumns:true,
toolbar:[{
text:'新增',
iconCls:'icon-add',
handler:function(){
//添加操作
}
}],
columns:[[
{field:'id' ,title: ' ID', align: 'center'},
{field:'name',title: '名称',align: 'center'
]],
onLoadSuccess: function(data){
//数据加载成功后操作
}
});
//设置分页控件
此控件在上一页下一页跳转时会向后台传递page和rows俩个参数,分别//代表当前页码和每页包含条数,所以在java端必须getter,setter这俩个参数
var p = $('#tableContent').datagrid('getPager');
p.pagination( {
//pageSize: 10,//每页显示的记录条数,默认为10
//pageList: [5,10,15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页
共 {pages} 页',
displayMsg: '当前显示 {from} - {to}
条记录 共 {total}
条记录',
onBeforeRefresh: function() {
$(this).pagination('loading');
$(this).pagination('loaded');
}
});
/////////////////////////--------html端
<div
id="tableContent"></div>
/////////////JAVA端
private JSONObject result;
private String
page;
private String
rows;
//省略getter,setter
public String queryList()
{
//当前页
int intPage = Integer.parseInt((page ==
null ||
page ==
"0") ? "1":page);
//每页显示条数
int number = Integer.parseInt((rows ==
null ||
rows ==
"0") ? "10":rows);
HashMap hm = new HashMap();
List<HashMap> list=new ArrayList<HashMap>();
HashMap hm = new HashMap();
hm.put("id","1");
hm.put("name","liming");
list.add(hm);
hm = new HashMap();
hm.put("id","2");
hm.put("name","limi");
list.add(hm);
JSONObject
retjson= new JSONObject();
retjson.put("total",
2);
retjson.put("rows", list );
System.out.println(retjson.toString());
//此方式需struts2,json插件支持,
// <result
type="json">
//
<param name="root">result</param>
// </result>
//此中type="json"
需自定义result-type
result =
retjson;
returnSUCCESS;
}
//////////////////js
端
//加载数据
$('#tableContent').datagrid({
title:'不可编辑datagrid列表 ',
width:'auto',
height:'auto',
striped:true,
singleSelect: true,
url:’’,
queryParams:{},
loadMsg:'数据加载中请稍后……',
//开启分页组件
pagination:true,
//初始化每页显示条数
pageSize:10,
//初始化当前页,如果不设置,在已转向其他页码的页面上,点查询,会出现还是查询上次//页面的数据,不能从第一页开始
pageNumber:1,
rownumbers:true,
fitColumns:true,
toolbar:[{
text:'新增',
iconCls:'icon-add',
handler:function(){
//添加操作
}
}],
columns:[[
{field:'id' ,title: ' ID', align: 'center'},
{field:'name',title: '名称',align: 'center'
]],
onLoadSuccess: function(data){
//数据加载成功后操作
}
});
//设置分页控件
此控件在上一页下一页跳转时会向后台传递page和rows俩个参数,分别//代表当前页码和每页包含条数,所以在java端必须getter,setter这俩个参数
var p = $('#tableContent').datagrid('getPager');
p.pagination( {
//pageSize: 10,//每页显示的记录条数,默认为10
//pageList: [5,10,15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页
共 {pages} 页',
displayMsg: '当前显示 {from} - {to}
条记录 共 {total}
条记录',
onBeforeRefresh: function() {
$(this).pagination('loading');
$(this).pagination('loaded');
}
});
/////////////////////////--------html端
<div
id="tableContent"></div>
/////////////JAVA端
private JSONObject result;
private String
page;
private String
rows;
//省略getter,setter
public String queryList()
{
//当前页
int intPage = Integer.parseInt((page ==
null ||
page ==
"0") ? "1":page);
//每页显示条数
int number = Integer.parseInt((rows ==
null ||
rows ==
"0") ? "10":rows);
HashMap hm = new HashMap();
List<HashMap> list=new ArrayList<HashMap>();
HashMap hm = new HashMap();
hm.put("id","1");
hm.put("name","liming");
list.add(hm);
hm = new HashMap();
hm.put("id","2");
hm.put("name","limi");
list.add(hm);
JSONObject
retjson= new JSONObject();
retjson.put("total",
2);
retjson.put("rows", list );
System.out.println(retjson.toString());
//此方式需struts2,json插件支持,
// <result
type="json">
//
<param name="root">result</param>
// </result>
//此中type="json"
需自定义result-type
result =
retjson;
returnSUCCESS;
}
相关文章推荐
- easyui实现可新增不可编辑的datagrid及动态配置列隐藏/显示
- easyui-datagrid行编辑,后台以主表为基表关联从表进行查询数据后,在前台行编辑字段内容的显示
- easyUI的列表控件(datagrid)日期列不能正确显示Json格式数据的解决方法
- Easyui Datagrid 如何实现后台交互显示用户数据列表
- Easyui datagrid 编辑结束时combobox显示value而不显示text
- Easyui Datagrid 如何实现后台交互显示用户数据列表
- easyUI datagrid列表里面显示图片并预览的实现方法
- struts2+easyui datagrid可编辑操作及列表数据提交
- easyUI的列表控件(datagrid)日期列不能正确显示的解决方法
- easyui笔记:datagrid 编辑结束时combobox显示value而不显示text
- 使用jqueryUI插件,easyui-datagrid,列表显示加载两次
- EasyUI DataGrid列表,显示undefined
- easyui datagrid 数据的显示和查询
- easyui在datagrid用formatter添加linkbutton后列表和行号错位
- easyui datagrid 相同列合并/编辑行后保存
- HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中
- 关于list集合传到jsp,在struts的select标签中显示下拉列表问题
- struts下拉列表的几种显示方式
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)