jqGrid нужно поле, редактируемое в диалоге добавления, но не в окне редактирования - PullRequest
3 голосов
/ 17 октября 2010

Я пытаюсь использовать jqGrid в своем приложении ASP.Net MVC и у меня есть требование, чтобы некоторые столбцы редактировались в диалоговом окне Добавить, но не в диалоговом окне Редактировать Видимо, способ сделать это - использовать событие javascript beforeShowForm и установить свойства для конкретного поля ввода.

Пока что мне не удается запустить событие beforeShowForm. Ниже приведен пример, который я нашел на другом ТАК вопрос , но до сих пор мне не удалось заставить его работать. Есть какой-то трюк, который я пропускаю? Я использую последнюю версию 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 ]

3 голосов
/ 21 октября 2010

Я закончил тем, что купил платную версию 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>
3 голосов
/ 17 октября 2010

Мне кажется, что ответ на ваш вопрос вы найдете здесь и здесь (см. Также пример).

ОБНОВЛЕНО : я не знаю коммерческую версию 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, которые устанавливают настройки панели навигации 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#methodsetNavOptions

0 голосов
/ 11 декабря 2013

Текущее решение: 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 не работают с текущими решениями в этой теме.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...