jqGrid recreateForm参数

时间：2010-09-22 19:34:41

标签： jqgrid

您好我正在尝试将jqGrid的recreateForm参数设置为true，以便解决使用自定义edittype列引起的问题。在这里，我发现最好的形式就是这一行：

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

我尝试了没有成功。有人可以帮帮我吗？

我遇到问题的代码是...... 

$(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;
};

Oleg，嗨。以下是视图的完整代码：.... 

<%@ 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>

1 个答案:

答案 0 :(得分：0)

你如何编写代码的风格和我一样，所以我很难找到你遇到问题的确切位置。

我看到的唯一明显错误是您在navGrid函数中使用了inlineEdit的错误参数。您应该插入一些{},来定义添加和删除参数。目前，您使用“添加”参数的网址进行“修改”操作，使用Delete进行“添加”操作。我不确定这是你正在搜索的错误。

我在代码中总是做的是：

  1. 我明确地将JavaScript代码与ASP.NET MVC View分开。 View hat通常仅包含<script>，其中包含对.js文件的引用。至少99％的代码都在View之外。 MVC概念如果自己认为View应该主要没有代码和逻辑。如果只应查看控制器中准备的数据。此外，Javascript文件是静态文件，可以在客户端进行良好的缓存。
  2. 我尝试使用尽可能少的全局变量。在您当前的代码clases，lastSel，ESValueESElement，ESValue，inlineEdit，formEdit都是grobal对象。
  3. 我没有时间使用像<input onclick="inlineEdit();" />这样的结构，因为onclick事件调用的函数必须是全局的。今天我answerd已经就这个问题提出了问题。您可以在某个地方'onclick'内部使用$(document).ready(function() {而不是$("#inlineEdit").click(function(e) {/* the code of inlineEdit */});代码<input>，其中id =“inlineEdit”可以是第一个restoreRow(lastSel)按钮的ID。
  4. 告诉我相信，我认为没有任何意义可以让你在第一次点击时停用一个单选按钮，并定义你使用的编辑模式，我个人已经启用了最多jqGrids 两种模式 。您应该做的唯一事情是在表单编辑的beforeInitData事件hanbler中调用clases。我suggested将此调用包含在标准的jqGrid代码中。在http://www.ok-soft-gmbh.com/jqGrid/DatePicker.htm上，你可以看到一个实例。此外，在大多数网格中，我使用双击进入内联编辑模式（请参阅jqGrid - edit only certain rows for an editable column）。在我看来，当网格不仅用于编辑而且用于显示数据时，网格的滚动更容易查看数据。

    5. 更新：还有一个小问题。您计算$(document).ready之外的value的值，这是不好的，您可以同步执行此操作。您在那里editoptions dataUrl使用'/tipomovi/clase/'。您应该使用buildSelect代替。如果需要更改imgpath返回的数据，则可以使用其他{{1}}函数。这种方式存在于某些版本的jqGrid之后。参数{{1}}改为deprecated。

相关问题
最新问题