easyui实现datagrid行内编

最新推荐文章于 2024-08-29 09:23:02 发布

wanganyu1996

最新推荐文章于 2024-08-29 09:23:02 发布

阅读量459

点赞数

分类专栏： Web后台开发

Web后台开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

easyui的datagrid行内编辑对于修改信息而言比较方便直观，下面举例说明：

需求说明：
在行内编辑员工状态

一、编辑jsp

      Html代码   
      
    
 ...  
                <a href="#" id="save" onclick="obj.save()" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>  
                <a href="#" id="redo" onclick="obj.redo()" class="easyui-linkbutton" iconCls="icon-redo" plain="true">取消编辑</a>  
            </form>  
 ...  

二、编辑js
说明：
1.根据需求，除了status列，其它列均不要求被编辑，故设置readonly:'true',disabled:true，禁止其被编辑。
2.对obj对象设置editRow的意义在于限制用户只能对一行进行修改操作，即在this.editRow == undefined前提下进行修改。
3.$('#dg').datagrid('beginEdit',index);是修改操作的开始，$('#dg').datagrid('endEdit',this.editRow);结束修改。需注意的是，只有提交的信息通过验证（如果存在的话）才能结束修改。结束修改后会进入datagrid的onAfterEdit方法，以提交至控制器。

影音先锋电影 http://www.iskdy.com/

      Js代码   
      
    
 obj = {  
             //编辑行属性  
             editRow:undefined,  
             //保存  
             save:function(){  
                 //结束当前编辑行.注：1.只有填写的信息通过验证后才能结束编辑.2.结束编辑后进入datagrid的onAfterEdit方法。  
                 $('#dg').datagrid('endEdit',this.editRow);  
             },  
             //取消  
             redo:function(){  
                 this.editRow = undefined  
                 $('#dg').datagrid('rejectChanges')//回滚已编辑数据  
             },  
             //datagrid行内修改用户状态。index：当前行索引值。  
             editStatus:function(index){  
                 //获取选择行  
                 var rows = $('#dg').datagrid('getSelections');  
                 if(currUserStatus!=0){  
                     $.messager.alert('警告', '您不是管理员，无权执行此操作！', 'warning');  
                 }else{  
                     //修改操作需选中一行  
                     if(rows.length == 1 ){  
                         //如果已有编辑行，则关闭当前编辑行  
                         if(this.editRow != undefined) $('#dg').datagrid('endEdit',this.editRow);  
                         //如果未有编辑行，则进行编辑  
                         if(this.editRow == undefined){  
                             //设置当前行为编辑状态  
                             $('#dg').datagrid('beginEdit',index);  
                             //将当前行索引值赋给obj的editRow  
                             this.editRow = index;  
                             //取消选择当前行  
                             $('#dg').datagrid('unselectRow',index);  
                         }  
                     }else{  
                         $.messager.alert('警告', '修改必须选中仅且一行！', 'warning');  
                     }  
                 }  
             },  
             ...  
               
     }  
 ...  
 $('#dg').datagrid({  
         //条纹  
         striped:true,   
         //标题  
         title:'用户管理',  
         //提交的url地址  
         url:'emplAction!listEmpl.action',  
         //允许收缩数据  
         collapsible:'true',  
         //分页  
         pagination:'true',  
         //自适应  
         fit:'true',  
         //默认页容量  
         pageSize:'10',  
         //分页工具位置  
         pagePosition:'top',  
         //列自适应  
         fitColumns:'true',  
         //显示编号  
         rownumbers:'true',  
         //排序  
         sortable:'true',  
         sortName:'id',  
         //主键  
         idField:'id',  
         ...  
         //在datagrid中进行添加或修改操作。注：当前业务没有在datagrid中“添加操作”的需求，只有更新操作，故省去了“添加操作”的判定。  
         onAfterEdit:function(rowIndex,rowData,changes){  
             var updated = $('#dg').datagrid('getChanges','updated');  
             var url = '';  
             //如果选择了修改，但实际未做任何改变，则直接返回false  
             if(updated.length==0){  
                 obj.editRow = undefined;  
                 return false  
             }  
             //修改用户  
             if(updated.length>0){  
                 url='emplAction!editStatus.action';  
             }  
             //ajax提交，rowData是行数据  
             $.ajax({  
                 timeout:1000,//超时时间设置，单位：毫秒  
                 type:'post',  
                 url:url,  
                 data:{  
                     row:rowData,  
                 },  
                /* beforeSend:function(){ 
                     console.log("提交前..") 
                     console.log(rowData); 
                     console.log(url); 
                     $('#dg').datagrid('loading'); 
                 },*/  
                 success:function(data){  
                     if(data){  
                         $('#dg').datagrid('loaded');  
                         $('#dg').datagrid('load');  
                         $('#dg').datagrid('unselectAll');  
                         //当前行结束编辑  
                         $('#dg').datagrid('endEdit',obj.editRow);  
                         $.messager.show({  
                             title:'提示',  
                             msg:data,  
                         })  
                         obj.editRow = undefined;  
                     }  
                 },  
                 complete:function(XMLHttpRequest,status){  
                     if(status=='timeout'){  
                         alert('修改失败，超时..')  
                     }  
                 },  
                 error:function(XMLHttpRequest,errorThrown){  
                     if(errorThrown=='408'){  
                         alert('修改失败，超时..')  
                     }  
                 }  
                   
             })  
         },  
         //列字段  
         columns:[[  
                   {  
                       field:'ck',  
                       checkbox:true  
                   },  
                   {  
                       field:'eid',  
                       title:'用户编号',  
                       height:30,  
                       width:100,  
                       align:'center',  
                       sortable:'true',//排序  
                       readonly:'true',  
                       disabled:true//禁止编辑  
                       /*editor:{ 
                           type:'numberbox', 
                           options:{ 
                               required:true, 
                               disabled:true//禁止编辑 
                           } 
                       }*/  
                   },  
                   {  
                       field:'ename',  
                       title:'用户名',  
                       width:100,  
                       height:30,  
                       align:'center',  
                       readonly:'true',  
                       disabled:true  
                   },  
                   {  
                       field:'hiredate',  
                       title:'入职时间',  
                       width:100,  
                       height:30,  
                       align:'center',  
                       readonly:'true',  
                       disabled:true  
                   },  
                   {  
                       field:'jname',  
                       title:'职位描述',  
                       width:100,  
                       height:30,  
                       align:'center',  
                       readonly:'true',  
                       disabled:true  
                   },  
                   {  
                       field:'dname',  
                       width:100,  
                       height:30,  
                       title:'所属部门',  
                       align:'center',  
                       readonly:'true',  
                       disabled:true  
                   },  
                   {  
                       field:'status',  
                       width:100,  
                       height:30,  
                       title:'状态',  
                       align:'center',  
                       editor:{//编辑选项  
                           type:'combobox',  
                           options:{  
                               url:"emplAction!getJobStatusList.action",//请求地址  
                               required:true,  
                               panelHeight: 'auto',  
                               valueField:'jsid',//下拉框的值  
                               textField:'status'//下拉框显示的文本  
                           }  
                       }  
                             
                   },  
                   {  
                       field:'process',  
                       title:'操作',  
                       width:150,  
                       height:30,  
                       align:'center',  
                       //格式化列值（设置列值在页面的显示样式）  
                       formatter:function(value,row,index){  
                           return "<a href='javascript:obj.editStatus("+index+")'>修改状态</a>"  
                           +"  <a href='javascript:obj._delete("+row.eid+")'>删除</a>"  
                       }  
                   }  
                   ...  
         ]],  
           
     })  

伦理片 http://www.dotdy.com/
三、编辑控制器

      Java代码   
      
    
 //获取职位信息  
     public void getJobStatusList() throws IOException{  
            resp.setCharacterEncoding("UTF-8");  
            jobStatus=jobStatusService.listJobStatus();  
            List<Map<String,String>> list = new ArrayList<>();  
            Map<String,String> map = null;  
            if(jobStatus.size()!=0){  
                for (int i = 0; i < jobStatus.size(); i++) {  
                    map = new HashMap<String, String>();  
                    map.put("jsid", String.valueOf(jobStatus.get(i).getJsid()));  
                    map.put("status", jobStatus.get(i).getStatus());  
                    list.add(map);  
                }  
            }  
            String s = JSON.toJSONString(list);  
            PrintWriter out = resp.getWriter();  
            out.println(s);  
     }  
     //修改用户状态  
     public void editStatus()  
             throws IOException {  
        resp.setCharacterEncoding("UTF-8");    
            //获取提交的datagrid中的行数据  
        int eid = Integer.parseInt(req.getParameter("row[eid]"));  
        int status = Integer.parseInt(req.getParameter("row[status]"));  
        boolean b = false;  
        b = empService.editStatus(status, eid);  
        PrintWriter out = resp.getWriter();  
        if(b){  
             out.print("修改成功！");  
        }else{  
             out.print("修改失败！");  
        }  
     }  

大功告成，效果如下：