Параметр jqGrid refreshateForm

Question

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

   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

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

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

То, что я всегда делаю в своем коде:

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

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