Jquery 查询数据库记录进行显示在FlexiGrid 以及前后台的值传递、对象传递

来源：互联网发布：npm 淘宝镜像失败编辑：程序博客网时间：2024/05/16 06:28

1、index.jsp

2、jquery_1.js

$(function() {
   /**
    * 1:样例一
    */
   $("#submit").click(function() {
    var param = "json.id=" + $("#json_id").val() + "&json.name="
      + $("#json_name").val();
    // 提交的参数，name和id是和struts action中对应的接收变量(非表单提交，无法进行对象传值)
    $.ajax({
       type : "post",
       url : "jsonAjax.action",
       cache : false,
       data : param,
       // dataType : "text",
       dataType : "json",
       success : function(response) {
        // var obj = $.parseJSON(response);
        // 解析后台出来的json对象
        // var result=obj.result;
        // json对象的result变量（和action中定义的result变量的get方法对应）
        alert(response.result);
        // var jsonList = response.jsonList;//
        // 接收后台的jsonList对象，在前台进行遍历
        // $.each(jsonList, function(i, obj) {
        // // 得到对象的属性的值
        // alert(obj.id + "=" + obj.name);
        // });
       },
       error : function(response) {
        alert("responseText = " + response);
        return false;
       }
      });
   });
   /**
    * 2:样例二
    */
   $(".flexme3").flexigrid({
      url : 'flexiGrid.action',
      dataType : 'json',
      colModel : [{
         display : 'ID',
         name : 'id',
         width : 40,
         sortable : true,
         align : 'center'
        }, {
         display : 'Name',
         name : 'name',
         width : 180,
         sortable : true,
         align : 'left'
        }],
      buttons : [{
         name : 'Add',
         bclass : 'add',
         onpress : test
        }, {
         name : 'Delete',
         bclass : 'delete',
         onpress : test
        }, {
         separator : true
        }],
      // 查询下拉列表中的选项设置
      searchitems : [{
         display : 'ID',
         name : 'id'
        }, {
         display : 'Name',
         name : 'name',
         isdefault : true
        }],
      sortname : "id",
      errormsg : '发生错误', // 错误提示信息
      nomsg : '没有符合条件的记录存在', // 无结果的提示信息
      blockOpacity : 0.5, // 透明度设置
      sortorder : "asc",
      usepager : true,// 是否分页
      pagestat : '显示记录从{from}到{to}，总数 {total} 条', // 显示当前页和总页面的样式
      procmsg : '正在处理数据，请稍候 ...', // 正在处理的提示信息
      title : 'Jquery Test',
      useRp : true,// 用户自定义分页
      rp : 15,// 每页显示数据条数
      showTableToggleBtn : true,
      width : 700,
      height : 200
     });
   function test(com, grid) {
    if (com == 'Delete') {
     confirm('Delete ' + $('.trSelected', grid).length
       + ' items?')
    } else if (com == 'Add') {
     alert('Add New Item');
    }
   }
   /**
    * 3:样例三
    */
   // 绑定’myForm’并定义一个简单的回调函数
   $('#myForm').ajaxForm(function() {
      alert("评论提交完成!");
     });

});

3、JsonAction.java

public class JsonAction extends ActionSupport {
@Resource
private JsonService jsonService;
private static final long serialVersionUID = 1L;
private List<Json> jsonList;
private Json json;
private String result;

// 添加json记录
public String jsonAjax() {
  try {
   boolean flag = jsonService.addJson(json);
   if (flag) {
    result = "Json name: " + json.getName() + " 添加成功！";
   } else {
    result = "添加记录失败，请重新操作";
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  return SUCCESS;
}

// 以下为JQuery与Struts2结合必须的属性值
private int page;// 当前页
private int rp;// 每页显示记录数
private int start;
private Long total;// 总记录数
private List<Map<String, Object>> rows;// 表格数据

// 分页查询所有记录
public String flexiGrid() {
  try {
   List<Json> jsonList = new ArrayList<Json>();
   Map map = new HashMap<String, Object>();
   Map mapTemp;
   start = (page - 1) * rp;
   map = jsonService.queryJsonByPage(start, rp);
   rows = new ArrayList<Map<String, Object>>();
   total = (Long) map.get("count");
   jsonList = (List<Json>) map.get("jsonList");
   for (int i = 0; i < jsonList.size(); i++) {
    mapTemp = new HashMap<String, Object>();
    mapTemp.put("id", i);
    mapTemp.put("cell", jsonList.get(i));
    rows.add(mapTemp);
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  return SUCCESS;
}