一、前台:
html代码:
<table id="chartTable" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="chartpager"></div>
js代码:
jQuery("#chartTable").jqGrid({
url : '../dashbord/getAllChart.do',
datatype : "json",
colNames : [ "ID", "视图ID", "图表类型", "标题", "Y坐标显示","X坐标显示","数据SQL","分类名称","刷新时间" ],
colModel : [ {
name : "id",
index : "id",
width : 100,
align : "center"
}, {
name : "pid",
index : "pid",
width : 100,
align : "center",
editable : true
}, {
name : "type",
index : "type",
width : 185,
editable : true,
align : "left",
edittype : "select",
editoptions : {
value : "areaChart:区域图;lineChart:折线图;columnChart:柱状图;panelChart:仪表盘;pieChart:饼图"
}
}, {
name : "title",
index : "title",
editable : true,
align : "left",
width : 130
}, {
name : "valueField",
index : "valueField",
width : 150,
editable : true
},{
name : "categoryField",
index : "categoryField",
width : 100,
editable : true
},{
name : "dataSource",
index : "dataSource",
width : 180,
editable : true,
edittype : "textarea",
editoptions:{rows:"5",cols:"25"}
},{
name : "displayName",
index : "displayName",
width : 150,
editable : true,
edittype : "text"
},{
name : "refreshTime",
index : "refreshTime",
width : 150,
editable : true,
edittype : "text"
},],
height : 400,
width : 915,
rowNum : 10,
rowList : [ 10, 20, 50 ],
viewrecords : true,
forceFit : true,
sortname : 'id',
pager : jQuery('#chartpager'),
jsonReader : {
id : '0'
},
editurl : "../dashbord/editChart.do",
caption : "视图选项配置"
}).navGrid("#chartpager", {
edit : true,
add : true,
del : true
});
二、后台
查询出数据,分页显示的方法
public void getAllChart(HttpServletRequest request,
HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8");
String page = request.getParameter("page");
String rows = request.getParameter("rows");
String req = request.getParameter("searchField");
PrintWriter out = response.getWriter();
List chartList = chartDao.getAllCharts();
int totalRecord = chartList.size();
int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord
/ Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows)
+ 1;
String json = "{total: " + totalPage + ", page: " + page
+ ", records: " + totalRecord + ", rows: [";
int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // 开始记录数
int pageSize = Integer.parseInt(rows);
for (int i = index; i < pageSize + index && i < totalRecord; i++) {
Chart chart = (Chart) chartList.get(i);
json += "{cell:['" + chart.getId() + "','" + chart.getPid() + "','"
+ chart.getType() + "','" + chart.getTitle() + "','"
+ chart.getValueField() + "','" + chart.getCategoryField()
+ "','" + Deal.string2Json(chart.getDataSource()) + "','"
+ chart.getDisplayName() + "','"+chart.getRefreshTime()+"']}";
if (i != pageSize + index - 1 && i != totalRecord - 1) {
json += ",";
}
}
json += "]}";
out.println(json.toString());
out.flush();
}
编辑:删除、修改、添加的方法。这里如果用struts会更简单。
public void editChart(HttpServletRequest request,
HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8");
String oper = request.getParameter("oper");
String id = request.getParameter("id");
String pid = request.getParameter("pid");
String type = request.getParameter("type");
String title = request.getParameter("title");
String valueField = request.getParameter("valueField");
String categoryField = request.getParameter("categoryField");
String dataSource = request.getParameter("dataSource");
String displayName = request.getParameter("displayName");
String refreshTime = request.getParameter("refreshTime");
if(oper.equals("del")){
chartDao.deleteChartById(Integer.parseInt(id));
}else{
Chart chart = new Chart();
chart.setCategoryField("kpiTime");
chart.setDisplayName(displayName);
chart.setPid(Integer.parseInt(pid));
chart.setValueField(valueField);
chart.setTitle(title);
chart.setType(type);
chart.setDataSource(dataSource);
chart.setRefreshTime(Integer.parseInt(refreshTime));
if(oper.equals("edit")){
chartDao.updateChartByObj(chart,Integer.parseInt(id));
}else if(oper.equals("add")){
chartDao.insertNewChart(chart);
}
}
}
分享到:
相关推荐
关于jqGrid 前端框架与后台交互的完整实例 如无下载币可访问本人博客 复制源码
Jqgrid json 自身带的分页功能, 为了减轻数据库压力和提高加载速度,生成了纯JSON文件,想在本地自动分页,找了N多API均没有详细的介绍,最终摸索出来一个属性本身就自带分页功能,与大家分享
现在把找好的分页参数跟大家分享下
jqgrid 编辑表格 一列
jqGrid实例下载(数据交互,统计,时间插件都已实现)
关于jqGrid 前端框架与后台交互及主从表实现的完整实例 如无下载币可访问本人博客 复制源码 http://blog.csdn.net/dfs4df5/article/details/51187065
我这代码是jqgrid后台连接数据库的代码!很实用
该方式是在jqgrid的列基础上进行编辑,为列添加保存事件,文本域和输入框采用blur失去焦点的方式进行保存,该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
jqGrid是典型的B/S架构,服务器端只是提供数据管理,客户端只提供数据显示。换句话说,jqGrid可以以一种更加简单的方式来展现你数据库的信息,而且也可以把客户端数据传回...jqGrid是用ajax来实现对请求与响应的处理。
Jqgrid网上的api很少而且基本上都是英文的,中文的特别少,这个是jqgrid的中文使用说明,上面罗列的jqgrid的说明比较详细
jqGrid完整例子,可以直接下载使用 参考网址http://blog.mn886.net/jqGrid/
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid的表格的每行每列的数据既显示又可以编辑。
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
这是jqgrid分页的后台代码,希望你们能用到
本文是对jqgrid 编辑添加功能进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
jqgrid
jqgrid 表格的增删改查4种操作,以及表格分页,还有修改以及添加时候的modal弹出框。代码是个project项目文件,需要自己建个解决方案将项目包含进去。
jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用