javascript - 除了双击可编辑数据网格中的编辑行为外，还为每一行添加保存

Question

我正在使用可编辑的数据网格（https://www.jeasyui.com/extension/edatagrid.php），其中我使用了双击可编辑并且工作正常，但是当用户单击时，我希望每一行都有一个“编辑”按钮'edit' 然后'save|cancel' 应该在单击'save' 后显示，验证应该在保存该特定行之前发生。当我使用双击对其进行编辑时，行验证和行得到了很好的更新，但我现在想用每行的“编辑”按钮更新行。我搜索了解决方案，但没有找到任何有用的解决方案。

<table id="my_table_edit_id" title='Editable DataGrid' singleSelect="true" style="width:100%; height:500px;">
<thead>
    <tr>
        <th field="channel_name" width="100" editor="{type:'textbox'}">Channel Name</th>
        <th field="channel_category_id" width="100" editor="{type:'combobox',
            options:{
                valueField:'value',
                textField:'text',
                data:categorySelectOptions,
                loadFilter:loadFilter,
                formatter:formatter,
                onLoadSuccess:onLoadSuccess
            }
        }" formatter="getCategoryText" >Category</th>
        <th field="is_pay_channel" width="100" align="right" editor="{
                type:'combobox',
                options:{
                    valueField:'is_pay_channel',
                    textField:'channel_type',
                    data:payorFTA,
                    required:true,
                    onLoadSuccess:function(rows){
                        for(var i=0; i<rows.length; i++){
                            var row = rows[i];
                            if (row.selected){
                                $(this).combobox('setValue', row.is_pay_channel);
                                return;
                            }
                        }
                    }
                }
        }" formatter='getChannelType'>Pay/FTA</th>
        <th field="price" width="100" align="right" editor="numberbox">Price</th>
        <th field="carriage_price" width="150" editor="numberbox">Carriage Fee</th>
        <th field="is_hd" width="150" formatter='getHDChannelStatus' editor="{type:'checkbox',
            options:{on: '1',
                off: '0'
            }}">Is HD Channel</th>
        <th field="is_mandatory" width="150" formatter='getMandatoryStatus' editor="{type:'checkbox',
            options:{on: '1',
                off: '0'
            }}">Is Mandatory</th>
        <th field="language_id" width="150" editor="{
                type:'combobox',
                options:{
                    valueField:'language_id',
                    textField:'language',
                    data:languages,
                    onLoadSuccess:function(rows){
                        for(var i=0; i<rows.length; i++){
                            var row = rows[i];
                            if (row.selected){
                                $(this).combobox('setValue', row.language_id);
                                return;
                            }
                        }
                    }
                }
        }" formatter="getLanguageText">Language</th>
        <th field="channel_number" width="150" editor="numberbox">Ch.Number</th>
        <!--<th field='action' title='Action' width="80" align='center' formatter='getActionItems'>Action</th>-->
    </tr>
</thead>
</table>

javascript:

$(function(){
        $('#my_table_edit_id').edatagrid({
            idField:'itemid',
            iconCls:'icon-edit',
            url:'<?php echo base_url() ?>index.php/Controller_Name/method_for_list',
            updateUrl: '<?php echo base_url() ?>index.php/Ajax/update_method',
            onBeforeSave:function(index,row){
                 // All Validations goes here submit if everything fine
                --------------------
            },
            onSuccess:function(index,row){
              if(row.hasOwnProperty('msg') && row.msg!==''){
                    alertify.alert(row.msg);
              }else{
                    alertify.alert('Record Updated successfully');
              }
            },
            onError:function(index,row){
                if(row.hasOwnProperty('msg') && row.msg!==''){
                    alertify.alert(row.msg);
                }else{
                    alertify.alert('There is some problem.Please try again later');
                }
            }
       });
});

我尝试过的是： 我在这里搜索并找到了一种解决方案，但它不起作用。在解决方案中，他们说我们可以使用普通的“数据网格”来实现它，所以我已经更改为普通的数据网格并添加了“操作”项目“编辑”然后“更新 | 取消'。当我点击“编辑”然后显示“更新 | 当我编辑并单击“更新”按钮时，取消按钮然后更新不起作用数据没有得到更新。我对在普通数据网格中未提及/使用的“updateUrl”感到困惑，那么该行是如何以及在何处提交的？

HTML：

<table id="table_id" title='Editable DataGrid' style="width:100%; height:500px;">
<thead>
    <tr>
        <th field="channel_name" width="100" editor="{type:'textbox'}">Channel Name</th>
        <th field="channel_category_id" width="100" editor="{type:'combobox',
            options:{
                valueField:'value',
                textField:'text',
                data:categorySelectOptions,
                loadFilter:loadFilter,
                formatter:formatter,
                onLoadSuccess:onLoadSuccess
            }
        }" formatter="getCategoryText" >Category</th>
        <th field="is_pay_channel" width="100" align="right" editor="{
                type:'combobox',
                options:{
                    valueField:'is_pay_channel',
                    textField:'channel_type',
                    data:payorFTA,
                    required:true,
                    onLoadSuccess:function(rows){
                        for(var i=0; i<rows.length; i++){
                            var row = rows[i];
                            if (row.selected){
                                $(this).combobox('setValue', row.is_pay_channel);
                                return;
                            }
                        }
                    }
                }
        }" formatter='getChannelType'>Pay/FTA</th>
        <th field="price" width="100" align="right" editor="numberbox">Price</th>
        <th field="carriage_price" width="150" editor="numberbox">Carriage Fee</th>
        <th field="is_hd" width="150" formatter='getHDChannelStatus' editor="{type:'checkbox',
            options:{on: '1',
                off: '0'
            }}">Is HD Channel</th>
        <th field="is_mandatory" width="150" formatter='getMandatoryStatus' editor="{type:'checkbox',
            options:{on: '1',
                off: '0'
            }}">Is Mandatory</th>
        <th field="language_id" width="150" editor="{
                type:'combobox',
                options:{
                    valueField:'language_id',
                    textField:'language',
                    data:languages,
                    onLoadSuccess:function(rows){
                        for(var i=0; i<rows.length; i++){
                            var row = rows[i];
                            if (row.selected){
                                $(this).combobox('setValue', row.language_id);
                                return;
                            }
                        }
                    }
                }
        }" formatter="getLanguageText">Language</th>
        <th field="channel_number" width="150" editor="numberbox">Ch.Number</th>
        <th field='action' title='Action' width="90" align='center' formatter='getActionItems'>Action</th>
    </tr>
</thead>
</table>

javascript:

<script>
$(function(){
$('#table_id').datagrid({
    idField:'itemid',
    iconCls:'icon-edit',
    url:'<?php echo base_url() ?>index.php/Controller_Name/method_for_list',
    updateUrl: '<?php echo base_url() ?>index.php/Ajax/update_action_new',
    onEndEdit:function(index,row){
        // validation goes here, submit if everything works fine
        var variable_1 = "19.00";
        var variable_2 = "1";

        if(parseFloat(variable_1) && variable_2==1){
           var message = "Note: M.R.P of channel is greater than Rs."+variable_1+", it should be created as some_type Package.";
           alertify.confirm( message, function (e) {
             if(e){
               var onBeforeSave = opts.onBeforeSave;
               opts.onBeforeSave = function(){};
               dg.datagrid('updateRow');  // Issue is coming with this line
               opts.onBeforeSave = onBeforeSave;
               // ajaxfunction(channel_id);
             }else{
               $('#table_id').datagrid('cancelEdit');
             }
           });
          return false;
        }
    },
    /*updateRow:function(index,row){
        index: index,
        row.input_field1 = $(ed.target).combobox('getText');
        row.input_field2 = $(ed.target).combobox('getText');
        ------------------------
    },*/
    onBeforeEdit:function(index,row){
        row.editing = true;
        $(this).datagrid('refreshRow', index);
    },
    onAfterEdit:function(index,row){
        row.editing = false;
        $(this).datagrid('refreshRow', index);
    },
    onCancelEdit:function(index,row){
        row.editing = false;
        $(this).datagrid('refreshRow', index);
    },
    onSuccess:function(index,row){
        // console.log("onSuccess");
        // console.log('row',row);
        // console.log('index',index);
        if(row.hasOwnProperty('msg') && row.msg!==''){
            alertify.alert(row.msg);
        }else{
            alertify.alert('Record Updated successfully');
        }
        // console.log(row.msg);
    },
    onError:function(index,row){
        // console.log("onError");
        // console.log('row',row);
        if(row.hasOwnProperty('msg') && row.msg!==''){
            alertify.alert(row.msg);
        }else{
            alertify.alert('There is some problem.Please try again later');
        }
    }
 });
});
function getActionItems(value,row,index){
  // console.log('came to getActionItems',row);
  if (row.editing){
      var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
      var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
      return s+c;
   } else {
      var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
      // var d = '<a href="javascript:void(0)" onclick="deleterow(this)"><i class="fas fa-trash text-danger mr-1"></i></a>';
      return e;
   }
}
function getRowIndex(target){
   var tr = $(target).closest('tr.datagrid-row');
   return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
   $('#table_id').datagrid('beginEdit', getRowIndex(target));
}
function saverow(target){
   $('#table_id').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target){
   $('#table_id').datagrid('cancelEdit', getRowIndex(target));
}
</script>

我在控制台中遇到问题“jquery.easyui.min.js:11739 Uncaught TypeError: Cannot read property 'index' of undefined”

任何帮助，请指导我正确的方向。谢谢。