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)