`
heaven_jin
  • 浏览: 3996 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

easyui crud demo2

阅读更多
// 测试环境
/*$(function(){
    alert($===jQuery);
$.messager.alert('提示','内容');
});*/

var editing;  //判断用户是否处于编辑状态
$(function(){
   $("#mydatagrid").datagrid({
     title:'用户列表',
width:500,
height:'auto',
pagination:true,
pageList:[5,10,15,20],
pageNumber:2,
pageSize:10,
idField:'id',
   fitColumns:true,
   striped:true,
   nowrap:true,
   url:'../../userServlet?method=pageList&time='+new Date().getTime(),
     columns:[[
     {field:'id',title:'编号',width:100,hidden:true},
     {field:'name',title:'名字',width:100,editor:{
       type:'validatebox',
     options:{required:true,missingMessage:'用户名不能为空!'}
     }},
        {field:'sex',title:'性别',width:100,editor:{
          type:'combobox',
        options:{
        data:[{id:'男',val:'男'},{id:'女',val:'女'}],
        valueField:'id',
        textField:'val',
          required:true,
        missingMessage:'性别不能为空'
        }
        }},   
        {field:'birthdayStr',title:'出生日期',width:100,editor:{
          type:'datebox',
          options:{required:true,editable:false}
        }},   
        {field:'hobby',title:'爱好',width:100,align:'center',editor:{
          type:'validatebox',
          options:{required:true,missingMessage:'爱好必填!'}
        }}   
    ]],   
   toolbar:[
   {text:'新增',iconCls:'icon-add',handler:function(){
        if(editing==undefined){
         // 取消所有的选中的状态
        $("#mydatagrid").datagrid('unselectAll');
          // 追加一行
        $("#mydatagrid").datagrid('appendRow',{});
          // 获取当前页的行数
        editing=$("#mydatagrid").datagrid('getRows').length-1;
        // 开启编辑状态
        $('#mydatagrid').datagrid('beginEdit',editing);
        }
   }},
   {text:'编辑',iconCls:'icon-edit',handler:function(){
        var array=$('#mydatagrid').datagrid('getSelections');
        if(array.length!=1){
          $.messager.alert('内容','只能编辑一行!');
        }else{
           if(editing==undefined){
            //根据行记录对象获取该行的索引位置
           editing=$('#mydatagrid').datagrid('getRowIndex',array[0]);
             // 开启编辑状态
           $('#mydatagrid').datagrid('beginEdit',editing);
           }
        }
   }},
   {text:'保存',iconCls:'icon-save',handler:function(){
       //保存之前进行数据的校验 , 然后结束编辑并释放编辑状态字段
   if($('#mydatagrid').datagrid('validateRow',editing)){
      $('#mydatagrid').datagrid('endEdit',editing);
      editing=undefined;
   }
   }},
   {text:'移除',iconCls:'icon-remove',handler:function(){removeUser();}},
   {text:'取消操作',iconCls:'icon-cancel',handler:function(){
        // 回滚数据
   $('#mydatagrid').datagrid('rejectChanges');
   editing=undefined;
   }}
   ],
   onAfterEdit:function(rowIndex,rowData,changes){
      $.post('../../userServlet?method=edit',rowData,function(result){
        $('#mydatagrid').datagrid('unselectAll');
         $('#mydatagrid').datagrid('reload');
        $.messager.show({
          title:'系统提示',
          msg:result,
          timeout:3000,
          showType:'slide'
        });
      });
   }
   });

});

function removeUser(){
   var model=$('#mydatagrid').datagrid('getSelected');
   if(model){
      $.messager.confirm('系统提示','您确定要删除数据吗?',function(r){
        $.post('../../userServlet?method=delete',{id:model.id},function(result){
        $("#mydatagrid").datagrid('unselectAll');
        $('#mydatagrid').datagrid('reload');
          $.messager.show({
            title:'系统提示',
            msg:result,
          timeout:3000,
          showType:'slide'
          });
        });
      });
   }else{
    $.messager.show({
     title:'系统提示',
     msg:'请先选择要删除的数据',
     timeout:3000,
     showType:'slide'
    });
   }
}
分享到:
评论

相关推荐

    easyui-crud-demo

    "easyui-crud-demo" 是一个使用 jQuery EasyUI 实现的CRUD(创建、读取、更新、删除)操作的示例项目。这个项目涵盖了从数据获取、展示到用户交互的核心功能,下面我们将详细解析其关键知识点。 1. **jQuery EasyUI...

    easyui简易demo

    2. **CSS 样式与主题**:EasyUI 默认提供了多种主题,可以快速改变应用的整体视觉风格。在 demo 中,我们将看到如何应用和自定义这些主题,以满足特定的设计需求。 3. **jQuery 集成**:EasyUI 是基于 jQuery 构建...

    mvc4.0+easyui-CRUD

    这个**Demo**展示了如何在MVC4.0项目中集成EasyUI,实现基本的CRUD功能。开发者可能通过以下步骤实现: 1. **创建控制器**:创建对应的控制器类,比如`StudentController`,每个操作(CRUD)对应一个方法。 2. **...

    easyui1.7 官网示例大全

    easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip easyui\easyui-datagrid14-demo.zip ...

    crud-demo_easyui增删查改_zip_

    【标题】"crud-demo_easyui增删查改_zip_" 指的是一个使用EasyUI框架实现的CRUD(Create, Read, Update, Delete)操作演示项目,被压缩为ZIP格式的文件。CRUD是数据库操作的基本功能,代表创建、读取、更新和删除...

    easyui-crud-demo.zip

    在 "easyui-crud-demo.zip" 这个压缩包中,我们可以看到一个使用 EasyUI 和 PHP 实现的简单 CRUD(创建、读取、更新、删除)操作示例。这个示例非常实用,尤其对于初学者来说,是理解如何结合前端与后端进行数据交互...

    SSH和easyui整合Demo

    SSH和EasyUI整合是Web开发中的一个重要实践,它将Struts2、Spring和Hibernate这三大流行框架与EasyUI前端框架相结合,以实现高效、模块化的应用程序。在这个整合Demo中,我们能够看到如何将这些组件有效地集成在一起...

    EasyUI使用的demo

    2. **数据的增删改查**:EasyUI与后端数据交互时,通常会结合`datagrid`组件。`datagrid`不仅可以展示数据,还可以提供编辑、添加、删除和搜索等功能。在这个实例中,`datagrid`可能被用来显示数据库中的数据,并...

    spring mvc+ibatis+mysql+easyui简单demo

    Spring JDBC或iBATIS可以与MySQL进行交互,提供数据的CRUD操作。 【EasyUI】 EasyUI是基于jQuery的前端UI框架,主要用于快速构建美观的管理界面。它提供了一系列预先设计好的组件,如表格、表单、对话框、菜单、树...

    mvc easyui 项目 demo 增删改查

    标题“mvc easyui 项目 demo 增删改查”表明这是一个基于MVC(Model-View-Controller)框架和EasyUI库的Web应用示例,主要功能集中在基本的数据操作:增加、删除、修改和查询。这个项目可能是为了帮助初学者理解如何...

    SpringMVC+Spring Data JPA+Shiro+EasyUI 简单demo

    "SpringMVC+Spring Data JPA+Shiro+EasyUI 简单demo"是一个整合了上述四个技术的Web应用示例。这个项目可能包含了以下组件: 1. **配置文件**:如`applicationContext.xml`用于配置SpringMVC和Spring Data JPA,...

    easyuidemo:easyui的demo,包括CRUD操作、级联、datagrid、echarts等。使用oracle、jdbc、servlet

    2. **级联(Cascading)**:在EasyUI中,级联通常指的是下拉框或树形控件的联动效果。比如,当选择一个国家时,相应的省份下拉框会自动填充对应国家的省份数据,这种联动可以实现更精细化的数据筛选。 3. **...

    easyui+三层+json增删改查DEMO

    【标题】"easyui+三层+json增删改查DEMO"是一个基于EasyUI前端框架,结合三层架构和JSON数据格式实现的Web应用程序示例,主要用于演示如何在实际项目中进行CRUD(创建、读取、更新、删除)操作。这个DEMO涵盖了...

    java后台+easyui框架实现的所有demo

    2. **表单操作**:EasyUI的Form组件可与后台进行数据交换,支持创建、编辑和删除操作。Java后端可能使用了Spring MVC或Spring Boot框架,处理HTTP请求,执行CRUD(创建、读取、更新、删除)操作,并返回相应的状态...

    Maven+springmvc+mybatis+easyui+mysql DEMO

    在DEMO中,MyBatis用于数据库操作,通过XML或注解定义SQL语句,与SpringMVC配合实现数据的CRUD操作。 4. EasyUI: EasyUI是一个基于jQuery的UI组件库,主要用于构建桌面级的Web应用界面。它提供了一系列的UI组件,...

    基于SSH + jquery easyui 的一个通讯录Demo

    在通讯录Demo中,Hibernate用于将Contact对象映射到数据库表,实现了数据库的CRUD(Create、Read、Update、Delete)操作。通过编写简单的HQL(Hibernate Query Language)或使用Criteria API,我们可以方便地执行...

    .NET_MVC_CORE_EasyUI_login_ADD_EDIT_DELETE.demo.rar

    标题中的".NET_MVC_CORE_EasyUI_login_ADD_EDIT_DELETE.demo.rar"表明这是一个使用.NET MVC Core框架结合EasyUI库实现登录功能以及数据的添加、编辑和删除操作的演示项目压缩包。这个实例通常是为了帮助开发者理解...

    基于jquery-easyui的用户管理系统实例

    数据的`增删查改`(CRUD操作)是任何管理系统的核心功能。在EasyUI中,可以使用`datagrid`组件展示数据,它具有分页、排序、过滤等功能,同时支持行级别的操作按钮,如新增、编辑、删除。这些操作通常会触发AJAX请求...

    springboot+mybatis+easyui增删改查分页Demo

    【标题】"springboot+mybatis+easyui增删改查分页Demo"是一个基于Spring Boot、MyBatis和EasyUI实现的Web应用程序示例,主要用于演示如何在这些技术栈中进行基本的数据操作,如添加(Add)、删除(Delete)、修改...

Global site tag (gtag.js) - Google Analytics