jQuery EasyUI：确认/保存datagrid内联编辑

我正在使用jquery & EasyUI从SQL数据库创建表。我已经设法通过内联编辑在这个tutorial之后编辑一些列，其中可能的单元格值由组合框给出。我有一个PHP文件的updateURL和现有内容的更新工作正常。jQuery EasyUI：确认/保存datagrid内联编辑

我的问题如下：到目前为止，要确认编辑单元格（单击单元格并从组合框中选择一个值后），用户必须单击表格的其他行才能触发更新脚本。如果表格只有一行，并且只有一列是可编辑的，似乎没有可能确认更改（例如按回车键）。

有没有什么办法可以进行确认？感谢您的帮助！

更新：我已经走到这一步：在DataGrid，要编辑这是列通过组合框通过

<th field="..." data-options="formatter:..., 
editor:{type:'combobox',options:{valueField:'...',textField:'...',url:'file.php'‌, 
onSelect: function (record) {*}}}">field</th>

我相信我需要保存在创建/结束通过命令代替星号（*）进行编辑。我用endEdit,saveRow，但没有成功。这是正确的地方（我用简单的警报测试过），但不是正确的命令/语法。

来源

2013-02-26 Bernd

据我所知，在[这些Javascript角]，创建内联编辑功能（http://www.jeasyui.com/easyui/jquery.edatagrid.js）。但我太初学者了解如何修改它们来以其他方式保存编辑，而不是点击另一行。 – Bernd 2013-02-26 17:02:42

解决了！

需要去星号的代码是：

var selectedrow = $('#dg_id').datagrid('getSelected'); 
var rowIndex = $('#dg_id').datagrid('getRowIndex', selectedrow); 
$('#dg_id').datagrid('endEdit',rowIndex);

希望这是对别人的帮助了。

来源

2013-02-27 10:40:35 Bernd

为什么不使用附带网格的工具栏（带有保存/确认按钮）。点击按钮，你可以明确地触发edatagrid的更新事件。

在其中你提到本身的链接，你可以找到例子，

http://www.jeasyui.com/tutorial/app/crud2.php

来源

2013-02-26 17:20:35

是的，我知道有添加按钮的可能性 - 但这需要在桌子上方/下方放置整个工具栏。由于我有多个表格，在一个垂直线上方/下方，其中一些只有一行，我希望避免失去每个表格工具栏所需的垂直空间。但我无法确定如何修改edatagrid-javascript（如果这是需要查看的地方）。感谢您的帮助！ – Bernd 2013-02-27 08:20:13

否则，您可以明确调用datagrid的“endEdit”方法。万一，combobox是最后一个编辑器列，在combobox的Onselect事件中，您可以调用endEdit。这将触发更新。 – 2013-02-27 08:43:09

这就是我想要的，以及我目前失败的地方。我已经得到了这么多： '状态' 而且星号（*）是放置了'endEdit'， saveRow'，但无济于事。这是正确的地方（我用一个简单的'警报'来测试它），但不是正确的命令。 – Bernd 2013-02-27 10:05:45

让我在此为Google留下我的解决方案。测试版本1.4.4

基本上你需要重写editRow方法，但EasyUI似乎没有很好的设计和内部完全没有文档。还有一个隐藏的focusEditor函数的调用，所以我结束了这个代码。它触发saveRow与<输入>并允许您在多行编辑器中插入换行符<移位> + <输入>。由于许多意外错误，我还通过单击其他行来关闭保存。

$.fn.edatagrid.methods.editRow = function(jq, index){ 
    return jq.each(function(){ 
     var dg = $(this); 
     var opts = $.data(this, 'edatagrid').options; 
     var editIndex = opts.editIndex; 
     if (editIndex != index){ 

      // -------------------- ✂ -------------------- 
      // Lost focus 
      if (editIndex != -1) { 
       dg.edatagrid('cancelRow'); 
       return; 
      } 
      // -------------------- ✂ -------------------- 

      if (dg.datagrid('validateRow', editIndex)){ 
       if (editIndex>=0){ 
        if (opts.onBeforeSave.call(this, editIndex) == false) { 
         setTimeout(function(){ 
          dg.datagrid('selectRow', editIndex); 
         },0); 
         return; 
        } 
       } 
       dg.datagrid('endEdit', editIndex); 
       dg.datagrid('beginEdit', index); 
       if (!dg.edatagrid('isEditing', index)){ 
        return; 
       } 
       opts.editIndex = index; 

       // -------------------- ✂ -------------------- 
       // Based on focusEditor() function 
       var target; 
       var that = this; 
       var editor = $(this).datagrid('getEditor', {index:opts.editIndex}); 
       if (editor){ 
        target = editor.target; 
       } else { 
        var editors = $(this).datagrid('getEditors', opts.editIndex); 
        if (editors.length){ 
         target = editors[0].target; 
        } 
       } 
       if (target){ 
        var field = $(target).hasClass('textbox-f') ? $(target).textbox('textbox') : $(target); 
        field.focus(); 
        field.bind('keydown', function(e) { 
         if (e.which == 13 && !event.shiftKey) { 
          $(that).edatagrid('saveRow'); 
         } 
        }); 
       } 
       // -------------------- ✂ -------------------- 

       var rows = dg.datagrid('getRows'); 
       opts.onEdit.call(this, index, rows[index]); 
      } else { 
       setTimeout(function(){ 
        dg.datagrid('selectRow', editIndex); 
       }, 0); 
      } 
     } 
    }); 
};

来源

2015-12-07 12:30:59 krevetka

jQuery EasyUI：确认/保存datagrid内联编辑

回答

相关问题