jqGrid 需要一个可在“添加"对话框但不是“编辑"对话框的字段 [英] jqGrid need a field editable on Add dialog but not Edit dialog

问题描述

我正在尝试在我的 ASP.Net MVC 应用程序中使用 jqGrid，并且要求某些列在添加"对话框中是可编辑的，但在编辑"对话框中是不可编辑的.显然，这样做的方法是使用 beforeShowForm javascript 事件并在特定输入字段上设置属性.

到目前为止，我无法触发 beforeShowForm 事件.下面是我在另一个 上找到的示例所以问题但到目前为止我还没有设法让它工作.有什么我错过的技巧吗?我正在使用最新的 3.8 版本的 jqGrid.

控制器:

 [授权]公共行动结果索引(){var gridModel = new MyGridModel();SetUpGrid(gridModel.MyGrid);返回视图(网格模型)；}私人无效SetUpGrid(JQGrid网格){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";}

型号:

公共类 MyGridModel{公共 JQGrid MyGrid { 获取；放;}公共 MyGridModel(){MyGrid = 新的 JQGrid{Columns = 新列表<JQGridColumn>(){新的 JQGridColumn { DataField = "id",主键 = 真，可见 = 假，可编辑=假}，new JQGridColumn { DataField = "用户名",可编辑=真，EditFieldAttributes = new List(){new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},新的 JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}},宽度 = 100}，新的 JQGridColumn { DataField = "domain",可编辑=真，EditFieldAttributes = new List(){new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},新的 JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}},宽度 = 100}}}}}

查看:

函数 initGrid() {jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',{ }，//选项{//编辑选项beforeShowForm:函数(frm){alert("在 ShowForm 编辑前");}},{//添加选项beforeShowForm:函数(frm){alert("beforeShowForm 添加");}},{ },//删除选项{ }//搜索选项);}
<%= Html.Trirand().JQGrid(Model.MyGrid, "myGrid") %></div>

解决方案

我最终购买了 jqGrid 的付费版本 - 与 javascript 相比，通过使用干净的 .Net 对象模型节省的时间将物有所值很快.

这个问题的答案直接来自 Trirand 支持.

您可以使用客户端事件 AfterEditDialogShown 和 AfterAddDialogShown 来禁用/启用两个对话框的编辑字段.用于编辑/添加的字段将具有相同的 ID，即 DataField(区分大小写).示例:

型号:

JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields";JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields";

查看:

<script type="text/javascript">功能禁用字段(){//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");}功能启用字段(){$("#Source").attr("disabled", "false");$("#ProgramName").attr("disabled", "false");$("#Division").attr("disabled", "false");$("#Medium").attr("disabled", "false");$("#content").attr("disabled", "false");}</脚本>

I'm attempting to use jqGrid in my ASP.Net MVC application and have a requirement that some columns arre editable in the Add dialog but not the Edit dialog. Apparently the way to do this is to use the beforeShowForm javascript event and set the properties on the particular input field.

So far I can't manage to get the beforeShowForm event to fire. Below is an example I found on another SO question but so far I haven't managed to get it working. Is there some trick I'm missing? I'm using the latest 3.8 version of jqGrid.

Controller:

 [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";
 }

Model:

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}
              }
          }
     }
}

View:

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>

解决方案

I ended up buying the paid for version of jqGrid - the time I save by being able to use a clean .Net object model compared to javascript will pay for itself in no time.

The answer to this question direct from Trirand support is.

You can use the client-side events AfterEditDialogShown and AfterAddDialogShown to disable/enable edit fields for both dialogs. The field for editing/adding will have the same ID is the DataField (case-sensitive). Example:

Model:

JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields";
JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields";

View:

<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 需要一个可在“添加"对话框但不是“编辑"对话框的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！