jqGrid нужно поле, редактируемое в диалоге добавления, но не в диалоге редактирования.
Я пытаюсь использовать jqGrid в своем приложении ASP.Net MVC и у меня есть требование, чтобы некоторые столбцы редактировались в диалоговом окне "Добавить", но не в диалоговом окне "Редактировать". Видимо, способ сделать это - использовать событие javascript beforeShowForm и установить свойства для конкретного поля ввода.
Пока что мне не удается получить событие beforeShowForm. Ниже приведен пример, который я нашел по другому вопросу SO, но до сих пор мне не удалось заставить его работать. Есть какой-то трюк, который я пропускаю? Я использую последнюю версию 3.8 jqGrid.
контроллер:
[Authorize]
public ActionResult Index()
{
var gridModel = new MyGridModel();
SetUpGrid(gridModel.MyGrid);
return View(gridModel);
}
private void SetUpGrid(JQGrid grid)
{
grid.DataUrl = Url.Action("GridDataRequested");
grid.EditUrl = Url.Action("EditRows");
grid.ToolBarSettings.ShowSearchToolBar = false;
grid.ToolBarSettings.ShowEditButton = true;
grid.ToolBarSettings.ShowAddButton = true;
grid.ToolBarSettings.ShowDeleteButton = true;
grid.ToolBarSettings.ShowRefreshButton = true;
grid.EditDialogSettings.CloseAfterEditing = true;
grid.AddDialogSettings.CloseAfterAdding = true;
grid.EditDialogSettings.Modal = false;
grid.EditDialogSettings.Width = 500;
grid.EditDialogSettings.Height = 300;
grid.ClientSideEvents.GridInitialized = "initGrid";
}
Модель:
public class MyGridModel
{
public JQGrid MyGrid { get; set; }
public MyGridModel()
{
MyGrid = new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn { DataField = "id",
PrimaryKey = true,
Visible = false,
Editable = false },
new JQGridColumn { DataField = "username",
Editable = true,
EditFieldAttributes = new List<JQGridEditFieldAttribute>()
{
new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},
new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}
},
Width = 100},
new JQGridColumn { DataField = "domain",
Editable = true,
EditFieldAttributes = new List<JQGridEditFieldAttribute>()
{
new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},
new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}
},
Width = 100}
}
}
}
}
Посмотреть:
function initGrid() {
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ // edit options
beforeShowForm: function(frm) {
alert("beforeShowForm edit");
}
},
{ // add options
beforeShowForm: function(frm) {
alert("beforeShowForm add");
}
},
{ }, // del options
{ } // search options
);
}
<div>
<%= Html.Trirand().JQGrid(Model.MyGrid, "myGrid") %>
</div>
3 ответа
В итоге я купил платную версию jqGrid - время, которое я сэкономил, используя чистую объектную модель.Net по сравнению с javascript, окупится в кратчайшие сроки.
Ответ на этот вопрос прямо из поддержки Trirand:
Вы можете использовать клиентские события AfterEditDialogShown и AfterAddDialogShown, чтобы отключить / включить поля редактирования для обоих диалогов. Поле для редактирования / добавления будет иметь тот же идентификатор, что и DataField (с учетом регистра). Пример:
Модель:
JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields";
JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields";
Посмотреть:
<script type="text/javascript">
function disableFields() {
//jQuery("#fieldname").attr("disabled", "disabled");
$("#Source").attr("disabled", "true");
$("#ProgramName").attr("disabled", "true");
$("#Division").attr("disabled", "true");
$("#Medium").attr("disabled", "true");
$("#content").attr("disabled", "true");
}
function enableFields() {
$("#Source").attr("disabled", "false");
$("#ProgramName").attr("disabled", "false");
$("#Division").attr("disabled", "false");
$("#Medium").attr("disabled", "false");
$("#content").attr("disabled", "false");
}
</script>
Мне кажется, что ответ на ваш вопрос вы найдете здесь и здесь (см. Также пример).
ОБНОВЛЕНО: я не знаю коммерческую версию jqGrid. Если вы не решите свою проблему, вы должны опубликовать свой вопрос лучше на форуме http://www.trirand.net/forum/default.aspx.
Если я правильно понимаю ваш код, вы можете попытаться удалить определение атрибутов. readonly а также disabled (JQGridEditFieldAttribute) от EditFieldAttributes, Вместо этого вы можете попытаться сделать следующее
Если вы хотите отобразить только для чтения поля 'username' и 'domain' в диалоге редактирования, вы можете сделать следующее
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ recreateForm: true, // edit options
beforeShowForm: function(form) {
$('#username',form).attr('readonly','readonly');
$('#domain',form).attr('readonly','readonly');
}
});
или без использования recreateForm: true опция:
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ // edit options
beforeShowForm: function(form) {
$('#username',form).attr('readonly','readonly');
$('#domain',form).attr('readonly','readonly');
}
},
{ // add options
beforeShowForm: function(frm) {
$('#username',form).removeAttr('readonly');
$('#domain',form).removeAttr('readonly');
}
});
Если вы не хотите показывать поля 'username' и 'domain' в диалоге редактирования, вы можете сделать
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ recreateForm: true, // edit options
beforeShowForm: function(form) {
$('#username',form).hide();
$('#domain',form).hide();
}
});
Это должно работать в бесплатной версии jqGrd, но потому что вы используете SetUpGrid какие настройки Ome настройки панели навигации jqGrid (например, grid.ToolBarSettings.ShowEditButton = true). Вы также используете
grid.ClientSideEvents.GridInitialized = "initGrid"
Я не уверен, что вы можете сделать внутри initGrid функция. Вероятно, вы должны определить некоторые дополнительные обратные вызовы вместо вызова jQuery("#myGrid").jqGrid('navGrid', ...);, Посмотрите на http://www.trirand.net/documentation/aspnet/_2s20v9uux.htm и http://www.trirand.com/blog/phpjqgrid/docs/jqGrid/jqGridRender.html
Текущее решение: jqGrid 4.5.4 - jQuery Grid
После этого строки в editGridRow (строка 7447)
if (rowid === "new") {
rowid = "_empty";
frmoper = "add";
p.caption=rp_ge[$t.p.id].addCaption;
} else {
p.caption=rp_ge[$t.p.id].editCaption;
frmoper = "edit";
}
Я поставил эту модификацию
$t.p.custom_frmoper = frmoper;
Затем я могу решить, что делать с элементами в Popup EDIT и Popup ADD.
$.ajax($.extend({
url: $.isFunction(options.dataUrl) ? options.dataUrl.call($t, rowid, vl, String(options.name)) : options.dataUrl,
type : "GET",
dataType: "html",
data: $.isFunction(postData) ? postData.call($t, rowid, vl, String(options.name)) : postData,
context: {elem:elem, options:options, vl:vl},
success: function(data){
var ovm = [], elem = this.elem, vl = this.vl,
options = $.extend({},this.options),
msl = options.multiple===true,
a = $.isFunction(options.buildSelect) ? options.buildSelect.call($t,data) : data;
if(typeof a === 'string') {
a = $( $.trim( a ) ).html();
}
if(a) {
$(elem).append(a);
setAttributes(elem, options, postData ? ['postData'] : undefined);
// CUSTOM CODE
$.each($t.p.colModel, function (i, current) {
if (current.not_editable) {
if ($t.p.custom_frmoper == 'edit') {
$("#" + current.name).attr('readonly', 'readonly');
$("#" + current.name).attr('disabled', 'disabled');
}
else {
$("#" + current.name).removeAttr('readonly');
$("#" + current.name).removeAttr('disabled');
}
}
});
Я также добавил собственный атрибут not_editable в модель столбцов, чтобы решить, что определенный столбец можно редактировать при добавлении и только для чтения при изменении
{ name: 'ID', index: 'ID', not_editable: true }
Я надеюсь, что это помогает. Я создал эту модификацию, потому что элементы SELECT не работают с текущими решениями в этой теме.