easyui 数据表格行内编辑（编辑、保存、删除）

最新推荐文章于 2023-04-29 08:14:32 发布
Qssn丶
最新推荐文章于 2023-04-29 08:14:32 发布
阅读量2.7k
点赞数 1
分类专栏：笔记
本文链接：https://blog.csdn.net/dKnightL/article/details/69119784
版权
笔记专栏收录该内容
43 篇文章 0 订阅
订阅专栏
easyui 数据表格行编辑（编辑、保存、删除）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel = "stylesheet" href="themes/default/easyui.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

    <script type="text/javascript">

    $(function (){
            //资源数据表格
            $('#ppl_src_dg').datagrid({
                iconCls:'icon-edit',
                singleSelect:true,
                striped:true,            
                columns:[[
                    //editor:'text' 文本编辑
                    {field:'id',title:'id',width:200,align:'center',editor:'text'},
                    {field:'resourceName',title:'资源名字',width:250,align:'center',
                        editor:{
                            //下拉框
                            type:'combobox',
                            options:{                                                    
                                valueField: 'label',
                                textField: 'value',
                                data: [{
                                    label: '二狗子',
                                    value: '二狗子'
                                },{
                                    label: '三胖子',
                                    value: '三胖子'
                                },{
                                    label: '大王',
                                    value: '大王'
                                }] 
                            }
                        }                                                               
                    },
                    {field:'resourceNumber',title:'资源数量',width:200,align:'center',editor:'text'},                                      
                    {field:'act',title:'操作',width:200,align:'center',
                        formatter:function(value,row,index){
                            if (row.editing){
                                var s = '<a href="#" onclick="saverow2('+index+')">保存</a> ';
                                var c = '<a href="#" onclick="cancelrow2('+index+')">取消</a>';
                                return s+c;
                            } else {
                                var e = '<a href="#" onclick="editrow2('+index+')">编辑</a> ';
                                var d = '<a href="#" onclick="deleterow2('+index+')">删除</a>';
                                return e+d;
                            }
                        }
                    }
                ]],
                toolbar: [{
                    text:'添加资源',
                    iconCls: 'icon-add',                    
                    handler: //资源表格添加新行
                            function(){
                                $('#ppl_src_dg').datagrid('appendRow',{
                                    id:'',
                                    resourceName: '',
                                    resourceNumber: '',
                                    act: '',

                                });
                        }

                }],
                data: [
                        {id:'1',resourceName:'资源1',resourceNumber:'1',act:'1'},
                        {id:'2',resourceName:'资源2',resourceNumber:'2',act:'2'},
                        {id:'3',resourceName:'资源3',resourceNumber:'3',act:'3'}
                ],

                onBeforeEdit: function (index, row) {  
                    row.editing = true;  
                    $('#ppl_src_dg').datagrid('refreshRow', index);  
                },  
                onAfterEdit: function (index, row) {  
                    row.editing = false;  
                    $('#ppl_src_dg').datagrid('refreshRow', index);  
                },  
                onCancelEdit: function (index,row,changes) {
                    alert(changes);
                    row.editing = false;  
                    $('#ppl_src_dg').datagrid('refreshRow', index);  
                }
            });         
        });                   


    function editrow2(index){     
         $('#ppl_src_dg').datagrid('beginEdit', index);     
    }     
    function deleterow2(a){
        //根据index选中行
        var choserow=$('#ppl_src_dg').datagrid('selectRow',a);
        //获得选择行数据
        var row=$('#ppl_src_dg').datagrid('getSelected');
        //获得id
        var i=row.id;
        //如果有id则删除该记录
        if(i != ""){
            $.messager.confirm('确认提交','您确认删除该资源？',function(r){     
              if (r){    
                  /*----ajax注释------------------ 
                    //删除该任务资源
                        $.ajax({
                            type : "POST",
                            url : "preplan_resourceRecord_deleteSrc.action",
                            dataType : "json",
                            data : {
                                    code : i
                            },
                            success : function() {
                                    $.messager.alert('提示','删除成功！','info',
                                        function() {
                                            window.location.reload()                            
                                        });                                 
                            },
                            error: function(){
                                    $.messager.alert('错误','删除出错！','error');                                
                            }
                        }) 
                    --------ajax注释------------------*/
                    $('#ppl_src_dg').datagrid('deleteRow',a);         
                }    
            }); 
        }
        else{
            //删除选中行
            $('#ppl_src_dg').datagrid('deleteRow',a);                  
        } 

    }   
    //保存
    function saverow2(i){

          var rows = $('#ppl_src_dg').datagrid('getRows');
          var row = rows[i];
          //前端先保存改好的数据  
          $('#ppl_src_dg').datagrid('endEdit',i);
          var id=row.id;
          var srcName=row.resourceName;
          var srcNumber=row.resourceNumber;
          var srcUnit =row.resourceUnit;

          $.messager.confirm('确认提交','您确认保存该资源？',function(r){     
              if (r){             
                 //如果id不为空
                 if(id != ""){
                    /*----ajax注释------------------
                    //更新任务                                
                    $.ajax({
                        type : "POST",
                        url : "preplan_resourceRecord_updateSrc.action",
                        dataType : "json",
                        data : {
                                code : id,//srcId
                                resourceName : srcName,//资源Name
                                resourceNumber : srcNumber,//资源数量
                                resourceUnit : srcUnit,//资源单位
                        },
                        success : function() {
                                $.messager.alert('提示','修改成功！','info',
                                    function() {
                                        window.location.reload()                            
                                    });                                 
                            },
                        error: function(){
                                $.messager.alert('错误','修改出错！','error');                                
                        }
                    })
                    --------ajax注释------------------*/      
                 }
                 //保存新任务
                 else{
                    /*----ajax注释------------------
                    $.ajax({
                        type : "POST",
                        url : "preplan_resourceRecord_saveSrc.action",
                        dataType : "json",
                        data : {
                                resourceName : srcName,//资源Name
                                resourceNumber : srcNumber,//资源数量
                                resourceUnit : srcUnit,//资源单位
                        },
                        success : function() {
                                $.messager.alert('提示','修改成功！','info',
                                    function() {
                                        window.location.reload()                            
                                    });                                 
                            },
                        error: function(){
                                $.messager.alert('错误','修改出错！','error');                                
                        }
                    })
                  --------ajax注释------------------*/              
                 }       

               }     
            });           
    }     
    function cancelrow2(index){     
        $('#ppl_src_dg').datagrid('cancelEdit', index);     
    }
    </script>
</head>

<body>
   <div class="btm-area">
        <div id="ppl_preplan" class="pp_preplan">
            <p><strong>tip:</strong></p> 
            <p>1.由于保存的Action没有，保存和删除时会报错，故代码已注释，运用时去掉注释即可</p>
            <p>2.上方“添加资源”新增一行，右边可编辑行</p>            
            <div class="border">   
                <div class="label_box"><label for="ppl_preplan_src"><strong>资源列表</strong></label></div>     
                <div>
                    <table id="ppl_src_dg"></table>  
                </div>
            </div>          
        </div> 
    </div>

</div>    
</body>
</html>