效果图:
放上代码:
1 @(Html.DevExtreme().DataGrid<Model>() 2 .ID("gridMetting") 3 .Mode(GridEditMode.Popup) 4 .Popup(p => p 5 .Title("会议报备") 6 .ShowTitle(true) 7 .Width("auto").MaxWidth("80%") 8 .Height("auto").MaxHeight("98%") 9 .Position(p => p.My(HorizontalAlignment.Center, VerticalAlignment.Center).At(HorizontalAlignment.Center, VerticalAlignment.Center).Of(new JS("window"))) 10 .DragEnabled(true) 11 ) 12 .Form(f => 13 14 f.Items(item =>{ 15 item.AddSimpleFor(n => n.Name).ValidationRules(r => r.AddRequired().Message("不能为空")); 16 item.AddSimpleFor(n => n.Remark).Editor(e => e.TextArea().Height(100)); 17 }) 18 ) 19 .OnEditorPreparing("onEditorPreparing") 20 .OnEditingStart("onEditingStart") 21 .OnInitNewRow("onInitNewRow") 22 ) 23 24 <script> 25 var isEdite; 26 //初始化页面控件 27 function onEditorPreparing(e) { 28 if (isEdite) { 29 if (e.parentType === "dataRow") { 30 //修改时,设置指定文本框不可更改 31 if ( e.dataField === "Remark") { 32 e.editorOptions.disabled = true; 33 } 34 } 35 } 36 } 37 //修改事件 38 function onEditingStart(e) { 39 isEdite = true; 40 } 41 //添加事件 42 function onInitNewRow(e) { 43 isEdite = false; 44 } 45 </script>