0
你好，我试图设置jqGrid的recreateForm参数为true，以解决使用自定义编辑类型列产生的问题。在这里，我发现最好的形式就是把这条线：jqGrid recreateForm参数
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 ' +
' <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 ' +
' <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>
我无法在代码中看到任何你使用表单编辑或任何编辑的地方。你如何做到这一点？你真的需要自定义编辑，而不只是自定义格式（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter）和unformatter（请参阅http://www.trirand.com/jqgridwiki /doku.php?id=wiki:custom_formatter#unformatting）？顺便说一句，你可以随时修改你的问题的文字。如果您可以修改旧的问题，则不需要创建新问题。 – Oleg 2010-09-22 20:43:38