`
hewei870723
  • 浏览: 61818 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqGrid 编辑传参 与后台交互

阅读更多

一、前台:

  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 前端框架 连接后台实例 java servlet+jsp+mysql

    关于jqGrid 前端框架与后台交互的完整实例 如无下载币可访问本人博客 复制源码

    JqGrid 纯Json自带分页功能

    Jqgrid json 自身带的分页功能, 为了减轻数据库压力和提高加载速度,生成了纯JSON文件,想在本地自动分页,找了N多API均没有详细的介绍,最终摸索出来一个属性本身就自带分页功能,与大家分享

    jqgrid分页参数

    现在把找好的分页参数跟大家分享下

    jqgrid 编辑表格 一列

    jqgrid 编辑表格 一列

    jqGrid实例下载(数据交互,统计,时间插件都已实现)

    jqGrid实例下载(数据交互,统计,时间插件都已实现)

    jqGrid jsp+servlet+mysql+tomcat 主从表设计实现

    关于jqGrid 前端框架与后台交互及主从表实现的完整实例 如无下载币可访问本人博客 复制源码 http://blog.csdn.net/dfs4df5/article/details/51187065

    jqgrid后台连接数据库

    我这代码是jqgrid后台连接数据库的代码!很实用

    jqgrid行编辑+动态为其他列赋值

    该方式是在jqgrid的列基础上进行编辑,为列添加保存事件,文本域和输入框采用blur失去焦点的方式进行保存,该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。

    jqGrid 各种参数详解

    jqGrid是典型的B/S架构,服务器端只是提供数据管理,客户端只提供数据显示。换句话说,jqGrid可以以一种更加简单的方式来展现你数据库的信息,而且也可以把客户端数据传回...jqGrid是用ajax来实现对请求与响应的处理。

    jqgrid参数中文说明

    Jqgrid网上的api很少而且基本上都是英文的,中文的特别少,这个是jqgrid的中文使用说明,上面罗列的jqgrid的说明比较详细

    jqGrid完整实例

    jqGrid完整例子,可以直接下载使用 参考网址http://blog.mn886.net/jqGrid/

    jqGrid4.6.0 jqgrid_demo40

    jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...

    jqGrid的表格数据呈编辑转态

    jqGrid的表格的每行每列的数据既显示又可以编辑。

    jqGrid手册教程一本通

    jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...

    jqgrid分页代码

    这是jqgrid分页的后台代码,希望你们能用到

    jqgrid 编辑添加功能详细解析

    本文是对jqgrid 编辑添加功能进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    jqgrid序列

    jqgrid

    jqgrid 表格的增删改查以及modal弹出框

    jqgrid 表格的增删改查4种操作,以及表格分页,还有修改以及添加时候的modal弹出框。代码是个project项目文件,需要自己建个解决方案将项目包含进去。

    jqGrid表格应用——新增与删除数据

    jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用

Global site tag (gtag.js) - Google Analytics