jqury-easyui DataGrid 整合struts2增删查改入门实例（四）----可编辑表格好了，什么也先别说，还是先看效果..
jqury-easyui DataGrid 整合struts2增删查改入门实例（四）----可编辑表格
好了，什么也先别说，还是先看效果........
添加
删除
查询
由于这个事例比上个难度大一点，所以也参考别人的一点布局和代码，不足之处还是多。DEMO做好了，关键就是靠大家进一步开发个性化的UI.
??? 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 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 好东西啊！就是图挂了
