2017-07-27 45 views
2

我正在使用ShieldUI Grid,并希望在网格上有一个新行在其中一列显示下拉列表。此栏不可编辑并显示文字。我希望用户能够从下拉列表中选择一个值,但添加后不可编辑。我多次查看了文档,似乎无法弄清楚。ShieldUI Grid - 仅在插入时显示下拉列表

$(document).ready(function() { 
 
      $("#propertiesGrid").shieldGrid({ 
 
       theme: "light-bootstrap", 
 
       dataSource: { 
 
        remote: { 
 
         read: { 
 
          url: "/api" + window.location.pathname + "/ProductAttributes", 
 
          dataType: "json" 
 
         } 
 
        }, 
 
        modify: { 
 
         update: function(items, success, error) { 
 
          $.ajax({ 
 
           type: "PUT", 
 
           url: "/api" + window.location.pathname + "/ProductAttributes", 
 
           dataType: "json", 
 
           contentType: "application/json", 
 
           data: JSON.stringify(items[0].data) 
 
          }).then(success, error); 
 
         } 
 
        } 
 
       }, 
 
       schema: { 
 
        fields: { 
 
         "attributeId": { path: "attributeId" }, 
 
         "productAttributeId": { path: "productAttributeId" }, 
 
         "productId": { path: "productId" }, 
 
         "attributeName": { path: "attributeName" }, 
 
         "minimum": { path: "minimum" }, 
 
         "target": { path: "target" }, 
 
         "maximum": { path: "maximum" }, 
 
         "method": { path: "method" } 
 
        } 
 
       }, 
 
       rowHover: false, 
 
       resizing: true, 
 
       scrolling: true, 
 
       events: { 
 
        insert: function() { AddNewRow() } 
 
       }, 
 
       editing: { 
 
        enabled: true, 
 
        type: "row", 
 
        insertNewRowAt: "pagebottom" 
 
       }, 
 
       toolbar: [ 
 
        { 
 
         buttons: [ 
 
          { commandName: "insert", caption: "Add Product" } 
 
         ], 
 
         position: "bottom" 
 
        } 
 
       ], 
 
       paging: { 
 
        pageSize: 10, 
 
        pageLinksCount: 12, 
 
        messages: { 
 
         infoBarTemplate: "From {0} to {1} items of a total of {2}", 
 
         firstTooltip: "First page", 
 
         previousTooltip: "Previous page", 
 
         nextTooltip: "Next page", 
 
         lastTooltip: "Last page" 
 
        } 
 
       }, 
 
       columns: [ 
 
        { 
 
         field: "attributeName", 
 
         title: "Attribute", 
 
         editable: false, 
 
         id: "attributeName" 
 
        }, 
 
        { field: "minimum", title: "Minimum" }, 
 
        { field: "target", title: "Target" }, 
 
        { field: "maximum", title: "Maximum" }, 
 
        { field: "method", title: "Method" }, 
 
        { 
 
         width: 150, 
 
         title: " ", 
 
         buttons: [ 
 
          { commandName: "edit", caption: "Edit" }, 
 
          { commandName: "delete", caption: "Delete" } 
 
         ] 
 
        } 
 
       ] 
 
      }); 
 
     });

回答

1

有一种变通方法。让你的列可编辑,只需绑定在从网格抛出的编辑事件上,找到该列的编辑器,并将其隐藏或用单元格的值替换它。

events: { 
    edit: function(e) { 
     var target = $("#column_editor_id"); 
     target.hide(); 
    }  
}, 
+0

我会给你一个镜头 - 谢谢你的回应! –