弹出编辑模式下的多列

Posted 2023-05-07

【中文标题】弹出编辑模式下的多列

【英文标题】：Multiple columns in popup edit mode

【发布时间】：2013-01-30 03:16:55

【问题描述】：

我认为弹出式编辑模式是最好的编辑模式，但是对于较大的模型，弹出式会变得很长，看起来不太好。

我已经找到了解决方案，我很好奇您对此解决方案的想法/反馈/改进。

我创建了两个自定义属性：

public class NumberOfColumnsAttribute : Attribute, IMetadataAware

    private readonly int _numberOfColumns;

    public NumberOfColumnsAttribute(int numberOfColumns)
    
        _numberOfColumns = numberOfColumns;
    

    public void OnMetadataCreated(ModelMetadata metadata)
    
        if (!metadata.AdditionalValues.ContainsKey("NumberOfColumns"))
        
            metadata.AdditionalValues.Add("NumberOfColumns", _numberOfColumns);
        
    


public class ShowInColumnAttribute : Attribute, IMetadataAware

    private readonly int _column;

    public ShowInColumnAttribute(int column)
    
        _column = column;
    

    public void OnMetadataCreated(ModelMetadata metadata)
    
        if (!metadata.AdditionalValues.ContainsKey("ShowInColumn"))
        
            metadata.AdditionalValues.Add("ShowInColumn", _column);
        
    

然后使用编辑模型上方的 [NumberOfColumns(m)] 属性并使用属性上方的 [ShowInColumn(n)] 属性（假设 n=1当没有应用属性时）。

我在 Views/Shared/EditorModels/ 中创建了一个 Object.cshtml 文件，如下所示。

@if (ViewData.TemplateInfo.TemplateDepth > 1)

    @ViewData.ModelMetadata.SimpleDisplayText
 else 

    for (var i = 1; i <= (int)(!ViewData.ModelMetadata.AdditionalValues.ContainsKey("NumberOfColumns") ? 1 : ViewData.ModelMetadata.AdditionalValues["NumberOfColumns"]);i++)
    
        <div class="editor-column">
        @foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm) && ((int)(!pm.AdditionalValues.ContainsKey("ShowInColumn") ? 1 : pm.AdditionalValues["ShowInColumn"])) == i))
        
            if (prop.HideSurroundingHtml) 
                @Html.Editor(prop.PropertyName)
             else 
                <div class="editor-label">
                    @Html.Label(prop.PropertyName)
                    @(prop.IsRequired ? "*" : "")
                </div>
                <div class="editor-field">
                    @Html.Editor(prop.PropertyName)
                    @Html.ValidationMessage(prop.PropertyName, "*")
                </div>
            
        
        </div>
    
    <div class="editor-seperator"></div>

还有以下几行 CSS：

.k-edit-form-container 
    width: auto;

.editor-column 
    width: 400px;
    float: left;

.editor-seperator 
    clear: both;

你怎么看？

【参考方案1】：

我认为，这会简单得多。请在宽屏上运行此脚本。

                    var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource(
                            transport: 
                                read:  
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                ,
                                update: 
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                ,
                                destroy: 
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                ,
                                create: 
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                ,
                                parameterMap: function(options, operation) 
                                    if (operation !== "read" && options.models) 
                                        return models: kendo.stringify(options.models);
                                    
                                
                            ,
                            batch: true,
                            pageSize: 20,
                            schema: 
                                model: 
                                    id: "ProductID",
                                    fields: 
                                        ProductID:  editable: false, nullable: true ,
                                        ProductName:  validation:  required: true  ,
                                        UnitPrice:  type: "number", validation:  required: true, min: 1 ,
                                        Discontinued:  type: "boolean" ,
                                        UnitsInStock:  type: "number", validation:  min: 0, required: true  
                                    
                                
                            
                        );

                    $("#grid").kendoGrid(
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                             field:"ProductName", title: "Product Name" ,
                             field: "UnitPrice", title:"Unit Price", format: "0:c", width: "120px" ,
                             field: "UnitsInStock", title:"Units In Stock", width: "120px" ,
                             field: "Discontinued", width: "120px" ,
                             command: ["edit", "destroy"], title: " ", width: "250px" ],
                        editable: "popup",
                        edit: fnMultipleLayoutForm
                    );


function fnMultipleLayoutForm()
  
    $(".k-edit-form-container").prepend('<div class="column1" style="display: inline-block; float: left;padding-right:30px"></div><div class="column2" style="display: inline-block;float: left;padding-right:30px;"></div>');
  
  
    $(".k-edit-form-container").children(".k-edit-label, .k-edit-field").slice(0, parseInt($(".k-edit-form-container").children(".k-edit-label, .k-edit-field").length / 2)).appendTo(".column1");


    $(".k-edit-form-container").children(".k-edit-label, .k-edit-field").appendTo(".column2");

    $(".k-edit-form-container").css("width", "auto");

    $('.k-window').css( top: '50%', left: '50%', margin: '-' + ($('.k-window').height() / 2) + 'px 0 0 -' + ($('.k-window').width() / 2) + 'px' );
  
  ;

<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
      <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css" />

   <div id="grid"></div>

【讨论】：

干得好，效果很好！但是，您如何允许一个特别大的控件跨越 3 列？