在JQGrid和ASP.NET MVC 2上编辑表单

时间:2011-03-10 03:23:18

标签: asp.net-mvc-2 jqgrid

当我选择一行并按下编辑按钮时,我在JQgrid上遇到问题。问题是我需要一个模态编辑表单,它在页面顶部显示,但当我点击它时,它关闭。 我查看了JQgrid文档并搜索了示例,但我无法使其工作。我正在使用ASP.NET MVC 2和JQgrid 1.4.1,我附加了JqDnr和Jqmodal文件。

<script type="text/javascript">
    var lastsel;

    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Home/DynamicGridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Nombre', 'Sponsor', 'Fecha de Evaluacion', 'Fecha Prevista de Fin', 'Planta', 'Sector', 'LOTO?', 'Trabajo en Altura?', 'Espacio Confinado?', 'Caliente?', 'Amianto?', 'Observaciones'],
            colModel: [
      { name: 'Id', index: 'Id', width: 40, align: 'left', editable: false },
      { name: 'Nombre', index: 'Nombre', width: 200, align: 'left', editable: true },
      { name: 'Sponsor', index: 'Sponsor', width: 80, align: 'left', editable: true, edittype: "select", editoptions: { size: 71} },
      { name: 'Fecha de Evaluacion', index: 'FechaEvaluacion', width: 90, align: 'left', editable: true },
      { name: 'Fecha Prevista de Fin', index: 'FechaPrevistaFin', width: 90, align: 'left', editable: true },
      { name: 'Planta', index: 'Planta', width: 70, align: 'left', editable: true },
      { name: 'Sector', index: 'Sector', width: 70, align: 'left', editable: true },
      { name: 'LOTO?', index: 'PermisoLOTO', width: 50, align: 'left', editable: true, formatter: "checkbox" },
      { name: 'Trabajo en Altura?', index: 'PermisoTrabajoAltura', width: 50, align: 'left', editable: true, formatter: "checkbox" },
      { name: 'Espacio Confinado?', index: 'PermisoEspacioConfinado', width: 50, align: 'left', editable: true, formatter: "checkbox" },
      { name: 'Caliente?', index: 'PermisoCaliente', width: 50, align: 'left', editable: true, formatter: "checkbox" },
      { name: 'Amianto?', index: 'PermisoAmianto', width: 50, align: 'left', editable: true, formatter: "checkbox" },
      { name: 'Observaciones', index: 'Observaciones', width: 200, align: 'left', editable: true}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/sand/images',
            caption: 'Tareas'
        }).navGrid("#pager", { edit: true });

    }); 
</script>  

Tareas

<script type="text/javascript"> var lastsel; jQuery(document).ready(function() { jQuery("#list").jqGrid({ url: '/Home/DynamicGridData/', datatype: 'json', mtype: 'GET', colNames: ['Id', 'Nombre', 'Sponsor', 'Fecha de Evaluacion', 'Fecha Prevista de Fin', 'Planta', 'Sector', 'LOTO?', 'Trabajo en Altura?', 'Espacio Confinado?', 'Caliente?', 'Amianto?', 'Observaciones'], colModel: [ { name: 'Id', index: 'Id', width: 40, align: 'left', editable: false }, { name: 'Nombre', index: 'Nombre', width: 200, align: 'left', editable: true }, { name: 'Sponsor', index: 'Sponsor', width: 80, align: 'left', editable: true, edittype: "select", editoptions: { size: 71} }, { name: 'Fecha de Evaluacion', index: 'FechaEvaluacion', width: 90, align: 'left', editable: true }, { name: 'Fecha Prevista de Fin', index: 'FechaPrevistaFin', width: 90, align: 'left', editable: true }, { name: 'Planta', index: 'Planta', width: 70, align: 'left', editable: true }, { name: 'Sector', index: 'Sector', width: 70, align: 'left', editable: true }, { name: 'LOTO?', index: 'PermisoLOTO', width: 50, align: 'left', editable: true, formatter: "checkbox" }, { name: 'Trabajo en Altura?', index: 'PermisoTrabajoAltura', width: 50, align: 'left', editable: true, formatter: "checkbox" }, { name: 'Espacio Confinado?', index: 'PermisoEspacioConfinado', width: 50, align: 'left', editable: true, formatter: "checkbox" }, { name: 'Caliente?', index: 'PermisoCaliente', width: 50, align: 'left', editable: true, formatter: "checkbox" }, { name: 'Amianto?', index: 'PermisoAmianto', width: 50, align: 'left', editable: true, formatter: "checkbox" }, { name: 'Observaciones', index: 'Observaciones', width: 200, align: 'left', editable: true}], pager: jQuery('#pager'), rowNum: 10, rowList: [5, 10, 20, 50], sortname: 'Id', sortorder: "desc", viewrecords: true, imgpath: '/scripts/themes/sand/images', caption: 'Tareas' }).navGrid("#pager", { edit: true }); }); </script>

所以,任何帮助都会非常有帮助。谢谢!

1 个答案:

答案 0 :(得分:0)

我无法重现您的问题(请参阅测试here),但我可以明确地告诉您,您必须更改namecolModel属性的值。 name属性将用作属性名称。它在Edit窗体中另外构建了不同元素的id。 id就像

一样
id="Fecha Prevista de Fin"
id="tr_Fecha Prevista de Fin"
id="Amianto?"
id="tr_Amianto?"

等等都很糟糕。例如,您可以使用IE的开发人员工具(在IE中按 F12 )来检查当前代码的编辑表单中使用的ID。我严格建议你只在name属性中使用set [a-zA-Z0-9]中的字符并用字母开头。名称中不允许使用空格(请参阅herehere)。

顺便说一下参数imgpathdeprecated,因为很多jqGrid版本都要删除它。