主界面

创新互联-专业网站定制、快速模板网站建设、高性价比钦南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式钦南网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖钦南地区。费用合理售后完善，十载实体公司更值得信赖。

添加

修改

删除

查询暂时按照单字段id查询

 

 

 

 

 页面主要代码easyDemo1.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

 
   
   
   
 
 
 
 
 
   
 
 
 
   

测试easyui的DataGrid的CRUD操作

   
   
   

       

               姓名:
          

          

            年龄:
          

          

            性别:
          

       

         出生:
       

       

         班级:
       

 

   
   
   
 

 

 

 

 最主要的easyCrud.js代码如下:

$(function(){
 $('#ff').hide();
 $('#tt').datagrid({
    title:'datagrid增删查该小例子',
    iconCls:'icon-save',
    width:500,
    height:350,
    //pageSize:5,
    pageList:[5,10,15,20],
    nowrap:false,
    striped: true,
    collapsible:true,
    url:'easyAction.action',
    loadMsg:'数据装载中......',
    sortName:'code',
    sortOrder:'desc',
    remoteSort:false,
    frozenColumns:[[
     {field:'ck',checkbox:true}
    ]],
    columns:[[
     {title:'学号',field:'id',width:'50',rowspan:2,align:'center'},
     {title:'姓名',field:'name',width:'60',rowspan:2,align:'center'},
     {title:'性别',field:'sex',width:'50',rowspan:2,align:'center'},
     {title:'年龄',field:'age',width:'50',rowspan:2,align:'center'},
     {title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'},
     {title:'班级',field:'className',width:'100',rowspan:2,align:'center'}
    ]],
    pagination:true,
    rownumbers:true,
    toolbar:[{
      text:'全部',
      iconCls:'icon-ok',
      handler:function(){
       $('#tt').datagrid({url:'easyAction.action'});
      }
     },'-',{
      text:'添加',
      iconCls:'icon-add',
      handler:function(){$('#add').window('open');
      $('#ff').show();
      $('#ff').form('clear');
       $('#ff').appendTo('#aa');}
     },'-',{
       text:'修改',
       iconCls:'icon-edit',
       handler:getSelect
     },'-',{
       text:'删除',
       iconCls:'icon-remove',
       handler:del
     },'-',{
       text:'查询',
       iconCls:'icon-search',
       handler:function(){
        $('#query').window('open');
        
       }
     }
    ]
   });
   displayMsg();
  });
  function displayMsg(){
   $('#tt').datagrid('getPager').pagination({displayMsg:'当前显示从{from}到{to}共{total}记录'});
  }
  function close1(){
   $('#add').window('close');
  }
  function close2(){
   $('#edit').window('close');
  }
  function add(){
    $('#ff').form('submit',{
    url: 'easyAdd.action',
    onSubmit:function(){ return $('#ff').form('validate');},
       success:function(){
         close1();
        }
   });
   $.messager.alert('add','添加信息成功!!!','info',function(){
    $('#tt').datagrid({
     url:'easyAction.action',
     loadMsg:'更新数据中......'
    });
    displayMsg();
   });
  }
  var id;
  function getSelect(){
   var select = $('#tt').datagrid('getSelected');
   if(select){
    $('#edit').window('open');
    $('#ff').show();
    $('#ff').appendTo('#ee');
    $('#name').val(select.name);
    $('#age').val(select.age);
    $('#sex').val(select.sex);
    $('#birthday').val(select.birthday);
    $('#className').val(select.className);
    id = select.id;
   }else{
    $.messager.alert('warning','请选择一行数据','warning');
   }
  }
  function edit(){
    $('#ff').form('submit',{
    url: 'easyUpdate.action?id='+id,
    onSubmit:function(){ return $('#ff').form('validate');},
       success:function(){
         $.messager.alert('edit','修改信息成功!!!','info');
         close2();
        }
   });
   $('#tt').datagrid({
    url:'easyAction.action',
    loadMsg:'更新数据......'
   });
   
  }
  function del(){
   var selected = $('#tt').datagrid('getSelected');
   if(selected){
    $.messager.confirm('warning','确认删除么?',function(id){
    if(id){
     id = selected.id;
     $.ajax({
             type:"POST",
            url:"easyDel.action",
             data:"id="+id,
            dataType:"xml",
            success:function callback(){}
          });
     $('#tt').datagrid('reload');
    }
   });
   }else{
    $.messager.alert('warning','请选择一行数据','warning');
   }
  }
  function query(){
  var queryParams = $('#tt').datagrid('options').queryParams;
  queryParams.queryWord = $('#qq').val();
  $('#tt').datagrid({
   url:'easyQuery.action'
  });
  displayMsg();
  $('#query').window('close');
  }

  

 

 

 

 上述js代码写的有点臃肿，但是绝对能够精简的，只是时间关系和个人在js这块开发较少。

 后台代码较多，本人已经将源码jquery_easyUI_demo.rar上传到网盘中，提供下载地址http://u.115.com/file/f46d05cd01#Download有兴趣的可以看看

文章题目：jqueryeasyuidatagrid
文章位置：http://csdahua.cn/article/jpihee.html