2014-12-19 92 views
2

我正在使用引导程序开发基于Web的应用程序。 我试图在页面加载时在我的网格中实现内联编辑,但是当我单击网格上的编辑按钮时,所有单元格都变为可编辑文本,之后我单击保存按钮它显示我在特定单元格中键入的文本但在保存按钮的按钮上,我无法调用执行数据库更新的功能。无法在jqgrid内联编辑中将编辑的数据传送到数据库

这里是我的代码:

$(document).ready(function() { 
    var GetUrl = Web_Path + '/Test/TestHandler/GetTestData/' + AjaxHandlerName; 

       jQuery("#jqGrid-container").jqGrid({ 
        url: GetUrl, 
        datatype: 'json', 
        mtype: 'POST', 
        postData: { SearchInfo: function() { return getSearchPostData() } }, 
        colNames: [' ', 'ID', 'Name', 'ContactNo', 'EmpId', 'MailId', 'RoleName'], 
        colModel: [ 
        { name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false, 
         formatter: 'actions', 
         formatoptions: { 
          keys: true, 
          delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback } 
         } 
        }, 
           { name: 'Id', index: 'Id', hidden: true, editable: true }, 
           { name: 'Name', index: 'Name', validation: { required: true }, sortable: true, editable: true, editoptions: { size: "40", maxlength: "50"} }, 
           { name: 'ContactNo', index: 'ContactNo', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} }, 
           { name: 'EmpId', index: 'EmpId', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} }, 
           { name: 'MailId', index: 'MailId', sortable: false, editable: true, editoptions: { size: "40", maxlength: "50"} }, 
{name: 'RoleName', index: 'RoleName', sortable: false } 
    ], 
        jsonReader: { 
         id: 'Id', 
         repeatitems: false 
        }, 
        height: "100%", 
        pager: '#jqGrid-pager', 
        rowNum: 10, 
        rowList: [10, 20, 30], 
        sortname: 'Id', 
        sortorder: 'desc', 
        viewrecords: true, 
        caption: "JQ grid data", 
        loadComplete: function() { 
         var table = this; 
         updatePagerIcons(table);      
        } 
       }); 
}); 

function getSearchPostData() { 
      var searchData = {}; 
      searchData.Id=1; 

      return JSON.stringify(searchData); 
     } 
function updatePagerIcons(table) { 
      var replacement = 
        { 
         'ui-icon-seek-first': 'icon-double-angle-left bigger-140', 
         'ui-icon-seek-prev': 'icon-angle-left bigger-140', 
         'ui-icon-seek-next': 'icon-angle-right bigger-140', 
         'ui-icon-seek-end': 'icon-double-angle-right bigger-140' 
        }; 
      $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() { 
       var icon = $(this); 
       var $class = $.trim(icon.attr('class').replace('ui-icon', '')); 

       if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]); 
      }) 
} 

<div class="row"> 
     <div class="col-xs-12">   
      <table id="jqGrid-container" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all"> 
      </table> 
      <div id="jqGrid-pager"> 
      </div>   
     </div> 
    </div> 

我用jquery.jqGrid.min.js

当我尝试保存时,无法将数据携带到数据库..请帮助我。

回答

0

您需要使用jqgrid的editurl属性,它基本上是服务器的控制器URL。当保存动作被触发时,editurl被调用。

在呼吁editurl以下数据是根据jqgrid documentation发送到服务器,

如何当行被编辑和输入元素创建我们设定以下规则中的数据组织

  • 表格行变得可编辑属性=“1”
  • 阵列savedRow(OPTI在网格中)在编辑之前填充值 。这是一个名称:值对阵列具有附加 对ID:的rowid
  • 隐藏字段中不包含
  • 可编辑元素的id被构造从colModel阵列“的rowid _” +名称 。例如,如果我们编辑id = 10的行,并且只有可编辑元素是'myname'(来自colModel),那么id变成 10_myname。属性 - -
  • 可编辑元素的名称从 colModel阵列的名称构造名称的行保存后或恢复 可编辑属性被设置为“0”,并与 ID的savedRow项= ROWID是删除

什么是发布到服务器?

当数据被发送到服务器,我们构建对象{}包含(一个或多个):

  • 名称:值对,其中名称是在表示的输入元件 的名称行(这是所有输入元件)
  • 另外我们添加了一个对ID:ROWID其中ROWID是 行的id
  • 如果extraparam参数不是空的,我们延伸与 发布数据
  • 这个数据

因此,您需要设置服务器端以获取从jqGrid发送的编辑/保存操作的值。