jqury-easyui DataGrid 整合struts2增删查改入门实例（四）----可编辑表格

好了，什么也先别说，还是先看效果........

 
添加




删除

查询





由于这个事例比上个难度大一点，所以也参考别人的一点布局和代码，不足之处还是多。DEMO做好了，关键就是靠大家进一步开发个性化的UI.

easyDemo3.jsp代码如下:
<h2>datagrid入门之四</h2>
      <table id="tt">
      </table>
      <div id="query" class="easyui-window" title="查询" style="padding: 10px;width: 360px;height:100;"
    iconCls="icon-search" closed="true" maximizable="false" minimizable="false" collapsible="false">
        <div>
            <table>
                <tr>
                    <td>
                        <select name="select" id="ss">
                            <option value="id">学号</option>
                            <option value="name">姓名</option>
                            <option value="qq">QQ</option>
                        </select>
                    </td>
                    <td><input type="text" name="id" id="qq"  required="true"></td>
                    <td><a class="easyui-linkbutton" iconCls="icon-search" href="javascript:void(0);" onclick="query()">查询</a></td>
                </tr>
            </table>
        </div>
    </div>

easyInfo.js代码如下:

$(function(){
    $('#tt').datagrid({
        title:'CRUD小例子',
        iconCls:'icon-ok',
        width:650,
        height:350,
        pageSize:5,
        pageList:[5,10,15,20],
        striped: true,
        collapsible:true,
        url:'stuInfo.action',
        singleSelect:true,
        columns:[[
            {field:'id',title:'学号',width:50,rowspan:2,align:'center',editor:'numberbox'},
            {field:'name',title:'姓名',width:50,rowspan:2,align:'center',editor:'text'},
            {field:'email',title:'邮箱',width:120,rowspan:2,align:'center',editor:{
                type:'validatebox',
                options:{
                    validType:'email'
                }
            }},
            {field:'qq',title:'QQ',width:80,rowspan:2,align:'center',editor:'numberbox'},
            {field:'birthday',title:'出生日期',width:120,rowspan:2,align:'center',editor:{
                type:'datebox',
            }},
            {field:'address',title:'居住地',width:70,rowspan:2,align:'center',editor:'text'},
            {field:'operator',title:'操作列',width:70,rowspan:2,align:'center',
                formatter:function(value,row,index){
                    if(row.editing){
                        var s ='<a href="javascript:void(0);" onclick="saveRow('+index+')" style="text-decoration: none;color: #800080;">保存</a>  ';
                        var c ='<a href="javascript:void(0);" onclick="cancelRow('+index+')" style="text-decoration: none;color: #800080;">取消</a>';
                    return s+c;
                    }else{
                        var e = '<a href="javascript:void(0);" onclick="editRow('+index+')" style="text-decoration: none;color: #800080;">编辑</a> ';
                         var d = '<a href="javascript:void(0);" onclick="deleteRow('+index+')" style="text-decoration: none;color: #800080;">删除</a>';
                    return e+d;
                    }
                }
            }
        ]],
        pagination:true,
        rownumbers:true,
        toolbar:[{
             text:'增加',
             iconCls:'icon-add',
             handler:addRow
          },'-',{
              text:'查询',
              iconCls:'icon-search',
              handler:function(){
                  $('#query').window('open');
              }
          }
        ],
        onBeforeEdit:function(index,row){
            row.editing = true;
            $('#tt').datagrid('refreshRow',index);
            count++;
        },
        onAfterEdit:function(index,row){
            row.editing = true;
            $('#tt').datagrid('refreshRow',index);
            count--;
        },
        onCancelEdit:function(index,row){
            row.editing = false;
            $('#tt').datagrid('refreshRow',index);
            count--;
        }
    });
});
    var count = 0;
    function editRow(index){
        $('#tt').datagrid('beginEdit',index);
    }
    function deleteRow(index){
        var selected = $('#tt').datagrid('getSelected');
        if(selected){
        $.messager.confirm('删除','确认删除吗?',function(d){
            if(d){
            /*将数据删除
             * $('#tt').datagrid('deleteRow',index);
             * */    
             $.ajax({
                      type:"POST",
                     url:"delInfo.action",
                      data:"id="+selected.id,
                     success:function(){}
                });
                $('#tt').datagrid('reload');
            }
        });
        }
    }
    function saveRow(index){
        $('#tt').datagrid('endEdit',index);
        /*
         * 将数据保存到数据库
         * */
        var select = $('#tt').datagrid('getSelected');
        var arr =new Array(); //将信息保存在数组中
        arr[0]= select.id;
        arr[1]= select.name;
        arr[2]= select.email;
        arr[3]= select.qq;
        arr[4]= select.birthday;
        arr[5]=select.address;
        if(select){
            $.ajax({
            type:'POST',
            url:'queryId.action',
            data:'id='+select.id,
            success:function(data){
                if(data=='0'){
                    $.messager.alert('error','学号'+select.id+'已存在,请重新编辑','error',function(){
                        $('#tt').datagrid('beginEdit', index);
                    });
                }else{
                    save(arr,index);
                }
            }
        });
        }
    }
    function cancelRow(index){
        $('#tt').datagrid('cancelEdit',index);
    }
    function addRow(){
       if(count>0){
        $.messager.alert('warning','当前还有'+count+'记录正在编辑,请保存','warning');
        return ;
        }else{
         $('#tt').datagrid('appendRow',{
             id:'',
             name:'',
             email:'',
             qq:'',
             birthday:'',
             address:'',
             action:''
         });    
        }
        var lastIndex = $('#tt').datagrid('getRows').length-1;
        $('#tt').datagrid('beginEdit', lastIndex);
    }
    
    function save(arr,index){
        $.ajax({
            type:'POST',
            url:'saveInfo.action',
            data:'arr='+arr,
            success:function(data){
                if(data){
                    $.messager.alert('warning',data,'warning',function(){
                        $('#tt').datagrid('beginEdit', index);
                    })
                }else{
                    $('#tt').datagrid('reload');
                }
            }
        });
    }
    function query(){
        var queryParams = $('#tt').datagrid('options').queryParams;
        queryParams.queryWord = $('#qq').val();
        queryParams.queryType = $('#ss').val();
        $('#tt').datagrid({
            url:'queryInfo.action'
        });
        $('#query').window('close');
    }
   

Action层
  StudentInfoAction.java代码如下：
    package org.easyui;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.easyui.dao.EasyDao;
import org.easyui.dao.EasyDaoImpl;
import org.easyui.model.StudentInfo;

import com.opensymphony.xwork2.ActionSupport;

public class StudentInfoAction extends ActionSupport implements ServletRequestAware,ServletResponseAware {

    private static final long serialVersionUID = -4583025314633553684L;
    private HttpServletRequest request;
    private HttpServletResponse response;
    private static EasyDao dao = new EasyDaoImpl();
    private int total;
    private List<Object> rows;
    
    public int getTotal() {
        return total;
    }
    public List<Object> getRows() {
        return rows;
    }
    public void setTotal(int total) {
        this.total = total;
    }
    public void setRows(List<Object> rows) {
        this.rows = rows;
    }
    public void setServletRequest(HttpServletRequest request) {
        this.request = request;
    }
    @Override
    public String execute() throws Exception {
        return super.execute();
    }
    public String  list(){
        int page = Integer.parseInt(request.getParameter("page"));
        int pageSize =Integer.parseInt(request.getParameter("rows"));
        
        this.total = dao.getStuTotal();
        this.rows = new ArrayList<Object>();
        List<StudentInfo> stus = dao.getStuInfo(page, pageSize);
        for(StudentInfo stu:stus){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("id", stu.getId());
            map.put("name", stu.getName());
            map.put("email", stu.getEmail());
            map.put("qq",stu.getQq());
            map.put("birthday", stu.getBirthday());
            map.put("address", stu.getAddress());
            this.rows.add(map);
        }
        return SUCCESS;
    }
    public String queryStuInfo(){
        String type = request.getParameter("queryType");
        String keyword = request.getParameter("queryWord");
        System.out.println(type+"  "+keyword);
        this.total = dao.getStuTotal(type, keyword);
        List<StudentInfo> stus = dao.queryStuInfo(type, keyword);
        this.rows = new ArrayList<Object>();
        for(StudentInfo stu:stus){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("id", stu.getId());
            map.put("name", stu.getName());
            map.put("email", stu.getEmail());
            map.put("qq",stu.getQq());
            map.put("birthday", stu.getBirthday());
            map.put("address", stu.getAddress());
            this.rows.add(map);
        }
        return SUCCESS;
    }
    public void setServletResponse(HttpServletResponse response) {
        this.response = response;
    }
    
}

EasyuiCRUD.java代码如下：
package org.easyui;

import java.io.IOException;
import java.util.Date;
import java.text.ParseException;
import java.text.SimpleDateFormat;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.easyui.dao.EasyDao;
import org.easyui.dao.EasyDaoImpl;
import org.easyui.model.Student;
import org.easyui.model.StudentInfo;

import com.opensymphony.xwork2.ActionSupport;

public class EasyuiCRUD extends ActionSupport implements ServletRequestAware,ServletResponseAware {
    /**
     *
     */
    private static final long serialVersionUID = 1L;
    private  HttpServletRequest request;
    private HttpServletResponse response;
    private static     EasyDao dao = new EasyDaoImpl();
    public void setServletRequest(HttpServletRequest request) {
        this.request = request;
    }
    @Override
    public String execute() throws Exception {
        return SUCCESS;
    }
    public String addInfo() throws IOException{
        
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String sex =  request.getParameter("sex");
        String birthday = request.getParameter("birthday");
        String className = request.getParameter("className");

        
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Student student = new Student();
        student.setName(name);
        student.setAge(age);
        student.setSex(sex.toCharArray()[0]);
        student.setClassName(className);
        try {
            student.setBirthday(sdf.parse(birthday));
        } catch (ParseException e) {
            e.printStackTrace();
        }
        dao.addStudent(student);
        
        
        return SUCCESS;
        
    }
    public String delInfo(){
        String id = request.getParameter("id");
        dao.del(Integer.parseInt(id));
        return null;
    }
    public String updateInfo(){
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String sex =  request.getParameter("sex");
        String birthday = request.getParameter("birthday");
        String className = request.getParameter("className");

        
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Student student = new Student();
        student.setId(Integer.parseInt(id));
        student.setName(name);
        student.setAge(age);
        student.setSex(sex.toCharArray()[0]);
        student.setClassName(className);
        try {
            student.setBirthday(sdf.parse(birthday));
        } catch (ParseException e) {
            e.printStackTrace();
        }
        dao.updateStudent(student);
        return SUCCESS;
    }
    public String queryId() throws IOException{
        int id =Integer.parseInt(request.getParameter("id"));
        if(dao.queryId(id)){
            response.getWriter().print("0");
        }else{
            
            response.getWriter().print("1");
        }
        return null;
    }
    public String saveInfo() throws ParseException, IOException{
        SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy");
        String[]  arr =request.getParameterValues("arr");
        String[] b = arr[0].split(",");
        if(b.length>5){
        int id = Integer.parseInt(b[0]);
        String name = b[1];
        String email = b[2];
        int qq =Integer.parseInt(b[3]);
        Date birthday = sdf.parse(b[4]);
        String address = b[5];
        
        StudentInfo stu = new StudentInfo();
        stu.setId(id);
        stu.setName(name);
        stu.setEmail(email);
        stu.setBirthday(birthday);
        stu.setQq(qq);
        stu.setAddress(address);
        dao.addStudentInfo(stu);
        }else{
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().print("请将信息输入完整");
        }
        return null;
    }
    public String delStudentInfo(){
        int id = Integer.parseInt(request.getParameter("id"));
        dao.delInfo(id);
        return null;
    }
    public void setServletResponse(HttpServletResponse response) {
        this.response = response;
        
    }
    
}

评论

3 楼 me_xyz 2011-11-14  

好东西啊！就是图挂了

2 楼 zheshou 2011-08-13  

敢请兄台,公布源码,好东西

1 楼 archie2010 2011-03-21  

兄弟，这个的下载地址呢？