jqGrid recreateForm параметр

Question

Здравствуйте, я пытаюсь настроить параметр recreateForm jqGrid на true, чтобы решить проблемы, возникшие с помощью настраиваемых столбцов edittype. Здесь я нашел наилучшую форму для этой цели:

jQuery.extend(jQuery.jgrid.edit, { recreateForm: true }); 

Я пробовал его без успеха. Кто-нибудь может мне помочь?

Код на wiew у меня есть проблемы, это ...

$(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     url: '<%=Url.Action("buildGridData") %>', 
     editurl: '/tipomovi/Edit/', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['Codigo', 'Descripción', 'Tipo Movimiento', 'Inventario Propio', 
        'Tipo Mov. Soporte', 'Clase Bodega Destino'], 
     colModel: [ 
      { name: 'timocodi', index: 'timocodi', key: true, align: 'left', 
       width: 85, editable: true, edittype: 'text', 
       editrules: { required: true, integer: true} }, 
      { name: 'timodesc', index: 'timodesc', align: 'left', width: 300, 
       editable: true, edittype: 'text', editoptions: { maxlength: 40 }, 
       editrules: { required: true} }, 
      { name: 'timosaen', index: 'timosaen', align: 'center', sortable: false, 
       width: 120, editable: true, edittype: 'custom', 
       editoptions: { custom_element: ESElement, custom_value: ESValue }, 
       editrules: { required: true} }, 
      { name: 'timoprop', index: 'timoprop', align: 'center', sortable: false, 
       width: 120, editable: true, edittype: 'checkbox', 
       editoptions: { value: "S:N" }, editrules: { required: true} }, 
      { name: 'timomvso', index: 'timomvso', align: 'center', sortable: false, 
       width: 130, editable: true, edittype: 'text' }, 
      { name: 'clbodesc', index: 'clbodesc', align: 'left', sortable: false, 
       width: 200, editable: true, edittype: 'select', 
       editoptions: { size: 71 }, editrules: { required: true}}], 
     pager: $('#pager'), 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortname: 'timocodi', 
     sortorder: 'asc', 
     viewrecords: true, 
     viewsortcols: [true, 'vertical', true], 
     imgpath: '/content/redmond/images', 
     caption: 'Tipos de Movimientos de Inventario', 
     width: 'auto', 
     shrinkToFit: false, 
     height: 'auto', 
     loadComplete: function() { 
      jQuery('#list').setColProp('clbodesc', {editoptions: {value: clases}}); 
     } 
    }); 
    jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });   
}); 

где

function ESElement(value, options) 
{ 
    //debugger; 
    var v1 = "" 
    var v2 = "" 
    if (value == "E") { 
     v1 = "checked"; 
    } 
    else { 
     v2 = "checked"; 
    } 
    var elemStr = '<div><input type="radio" name="es" id="entrada" value="E" ' + v1 + 
       ' /> Entrada ' + 
       '&nbsp;&nbsp; <input type="radio" name="es" id="salida" value="S" ' + 
       v2 + ' /> Salida </div>'; 
    return $(elemStr)[0]; 
}; 
function ESValue(elem) 
{ 
    rb = elem[0].all[0].checked + ' ' + elem[0].all[1].checked; 
    return rb; 
}; 

Олег, Привет. Ниже приведен полный код зрения: ....

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Tipo de Movimiento 
</asp:Content> 


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Tipo de Movimiento de Materiales</h2> 
    Modo de Edición: 
    <input type="radio" name="rdEditApproach" onclick="inlineEdit();" /> En linea 
    <input type="radio" name="rdEditApproach" onclick="formEdit();" /> Forma<br /><br /> 
    <%=Html.ActionLink("Ir al Menu", "Index", "Menu")%> 
    <table id="list" cellpadding="0" cellspacing="0"></table> 
    <div id="pager" style="text-align:center;"></div> 
<script type="text/javascript"> 
    var clases = $.ajax(
         { url: '/tipomovi/clase/', async: false, 
          success: function(data, result) { 
           if (!result) 
            alert('Fallo recuperacion de clases de Bodega'); 
          } 
         }).responseText; 

    var lastSel; 

    $(document).ready(function() { 
     jQuery("#list").jqGrid({ 
      url: '<%=Url.Action("buildGridData") %>', 
      editurl: '/tipomovi/Edit/', 
      datatype: 'json', 
      mtype: 'GET', 
      colNames: ['Codigo', 'Descripción', 'Tipo Movimiento', 'Inventario Propio', 'Tipo Mov. Soporte', 'Clase Bodega Destino'], 
      colModel: [ 
       { name: 'timocodi', index: 'timocodi', key: true, align: 'left', width: 85, editable: true, edittype: 'text', editrules: { required: true, integer: true} }, 
       { name: 'timodesc', index: 'timodesc', align: 'left', width: 300, editable: true, edittype: 'text', editoptions: { maxlength: 40 }, editrules: { required: true} }, 
       { name: 'timosaen', index: 'timosaen', align: 'center', sortable: false, width: 120, editable: true, edittype: 'custom', 
        editoptions: { custom_element: ESElement, custom_value: ESValue }, editrules: { required: true} 
       }, 
       { name: 'timoprop', index: 'timoprop', align: 'center', sortable: false, width: 120, editable: true, edittype: 'checkbox', editoptions: { value: "S:N" }, editrules: { required: true} }, 
       { name: 'timomvso', index: 'timomvso', align: 'center', sortable: false, width: 130, editable: true, edittype: 'text' }, 
       { name: 'clbodesc', index: 'clbodesc', align: 'left', sortable: false, width: 200, editable: true, edittype: 'select', editoptions: { size: 71 }, editrules: { required: true}}], 
      pager: $('#pager'), 
      rowNum: 10, 
      rowList: [10, 20, 30], 
      sortname: 'timocodi', 
      sortorder: 'asc', 
      viewrecords: true, 
      viewsortcols: [true, 'vertical', true], 
      imgpath: '/content/redmond/images', 
      caption: 'Tipos de Movimientos de Inventario', 
      width: 'auto', 
      shrinkToFit: false, 
      height: 'auto', 
      loadComplete: function() { 
       jQuery('#list').setColProp('clbodesc', { editoptions: { value: clases} }); 
      } 
     }); 
     jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });   
    }); 


    function ESElement(value, options) 
    { 
     //debugger; 
     var v1 = "" 
     var v2 = "" 
     if (value == "E") { 
     v1 = "checked"; 
     } 
     else { 
     v2 = "checked"; 
     } 
     var elemStr = '<div><input type="radio" name="es" id="entrada" value="E" ' + v1 + ' /> Entrada ' + 
        '&nbsp;&nbsp; <input type="radio" name="es" id="salida" value="S" ' + v2 + ' /> Salida </div>'; 
     return $(elemStr)[0]; 
    }; 
    function ESValue(elem) 
    { 
     rb = elem[0].all[0].checked + ' ' + elem[0].all[1].checked; 
     return rb; 
    }; 

    function inlineEdit() { 
     $('input[name=rdEditApproach]').attr('disabled', true); 
     $('#list').navGrid(
       '#pager', 
     //Activando botones 
       {add: true, del: true, edit: false, search: false }, 
     //opciones de adición 
       {width: 'auto', url: '/tipomovi/Create/' }, 
     //delete options 
       {url: '/tipomovi/Delete/' } 
      ); 
     //add onSelectRow event to support inline edit 
     $('#list').setGridParam({ 
      onSelectRow: function(id) { 
       if (id && id != lastSel) { 
        //save changes in row 
        $('#list').saveRow(lastSel, false); 
        lastSel = id; 
       } 
       //trigger inline edit for row 
       $('#list').editRow(id, true); 
      } 
     }); 
    }; 

    function formEdit() { 
     $('input[name=rdEditApproach]').attr('disabled', true); 
     $('#list').navGrid(
      '#pager', 
      //enabling buttons 
      {add: true, del: true, edit: true, search: true}, 
      //edit option 
      {width: 'auto'}, 
      //add options 
      {width: 'auto', url: '/tipomovi/Create/' }, 
      //delete options 
      { url: '/tipomovi/Delete/', 
      width: 'auto', 
      afterSubmit: function(r, d) { 
       return [r.responseText == "", r.responseText];} 
      }, 
      //search options 
      {url: '/tipomovi/buildGridData/', width: 'auto', closeAfterSearch: true } 
      );  
    }; // function FormEdit 


</script> 
</asp:Content> 

Answer 1

Стиль, как вы пишете код THS вполне другие, как я, так что трудно для меня, чтобы найти именно там, где у вас есть проблемы.

Единственная явная ошибка, которую я вижу, заключается в том, что вы используете неправильные параметры navGrid в функции inlineEdit. Для определения параметров добавления и удаления необходимо вставить код {},. В настоящее время вы используете URL-адреса параметров «Добавить» для операции «Редактировать» и Delete для операции «Добавить». Я не уверен, что это ошибка, которую вы ищете.

Что я всегда в моем коде:

1. Я делаю четкое разделение кода JavaScript из в ASP.NET MVC View. Шляпа View обычно включает только <script> со ссылкой на файл .js. По меньшей мере 99% кода находятся за пределами View. Концепция MVC, если бы sey, что View должна в основном не содержать кода и логики. Если нужно просматривать только данные, подготовленные в контроллере. Кроме того, файл Javascript является статическим файлом и может быть хорошо кэширован на стороне клиента.
2. Я стараюсь использовать менее глобальные переменные. В вашем текущем коде clases, lastSel, ESValueESElement, ESValue, inlineEdit, formEdit - все объекты-громы.
3. Я стараюсь не использовать конструкции вроде <input onclick="inlineEdit();" />, потому что функции, вызываемые onclick Событие должно быть глобальным. Сегодня я answerd уже на вопрос по теме. Вместо 'onclick' вы можете внутри $(document).ready(function() { функции где-то код $("#inlineEdit").click(function(e) {/* the code of inlineEdit */}); где id = "inlineEdit", который должен быть id с первой кнопки <input>.
4. Чтобы рассказать доверие, я не вижу смысла иметь переключатель, который будет деактивирован при первом щелчке и который определяет, какой режим редактирования вы используете, лично у меня есть в большинстве jqGrids оба режима:. Единственное, что вы должны сделать, это позвонить restoreRow(lastSel) в файл события beforeInitData. I suggested, чтобы включить этот вызов в стандартный код jqGrid. На странице http://www.ok-soft-gmbh.com/jqGrid/DatePicker.htm вы можете увидеть один пример, который делает это в прямом эфире. Кроме того, в большинстве сеток я использую , дважды щелкните, чтобы перейти в режим встроенного редактирования (см. jqGrid - edit only certain rows for an editable column). По-моему, прокрутка сетки позволяет легче просматривать данные, если сетка будет отображаться не только для редактирования, но и для отображения данных.

ОБНОВЛЕНО: Еще одно небольшое примечание. Вы вычисляете значение clases за пределами $(document).ready, что не очень хорошо, и вы делаете это синхронно. Вы используете там value из editoptions. Вместо этого вы должны использовать dataUrl. Если данные, возвращаемые '/tipomovi/clase/', необходимо изменить, вы можете использовать дополнительно функцию buildSelect. Этот путь существует с некоторой версией jqGrid. Параметр imgpath вместо этого: deprecated.