技术文章

在 igGrid 中，您可以对特定列使用 columnSetting 选项，使它们成为必需或不可编辑（只读）。

在本文中，通过动态更改 columnSetting 的 readOnly 值，我们将创建一个示例订单管理应用程序，如果注册日期超过一小时，则禁用对所选产品和条目数的编辑。

$ (函数() { 

//igGrid

$ ( "#grid" ) .igGrid ( {

// ...（省略）...

专栏：[

{ headerText: "ID" , key: "ID" , dataType: "number" } ,

{ headerText: "Product" , key: "ProductID" , dataType: "number" , formatter: formatCategoryCombo } ,

{ headerText: "number" , key: "qty" , dataType: "number" } ,

{ headerText: "Remarks" , key: "description" , dataType: "string" } ,

{ headerText：“提交日期” ，关键字：“提交日期” ，数据类型：“日期” ，格式：“yyyy/MM/dd HH:mm:ss” ，} ，

] ,

数据源：订单，

特点：[

{

名称：“更新” ，

editRowStarted：函数（evt，ui ）{

if ( ui.rowAdding ) { // 对于新添加的行 

var editorSubmittedDate = ui.owner.editorForKey ( " SubmittedDate " ) ;

$ ( editorSubmittedDate ) .igDateEditor ( "value" , new Date () ) ;

}否则{ 

var present = new Date () ;

var get_an_hour_ago =新日期() ;

get_an_hour_ago. setHours ( present. getHours () -1 ) ; // 获取一小时前的小时数 

var cellValue = $ ( "#grid" ) . igGrid ( "getCellValue" , ui.rowID , 'SubmittedDate' ) ; //获取选中行的注册日期和时间

如果（get_an_hour_ago > cellValue ）{ 

changeReadOnly ( true , ui.rowID ) ; _

}

}

} ,

editRowEnded: function ( evt, ui ) { //行编辑结束后 

changeReadOnly ( false ) ; //编辑完成后返回可编辑状态

} ,

// ...（省略）...

}

]

}) ;

}) ;

函数changeReadOnly ( readBool,rowID = NaN ) { 

var updatingColumnSettings = $ ( "#grid" ).igGridUpdating ( " option " , "columnSettings" ) ;

updatingColumnSettings [ 1 ] . readOnly = readBool;

updatingColumnSettings [ 2 ] . readOnly = readBool;

$ ( "#grid" ) . igGridUpdating ( "option" , "columnSettings" , $ .extend ( true , [] , updatingColumnSettings )) ; // 反映设置

if ( readBool ) { // 当编辑一行时，insert处理开始编辑，因为当igGridUpdating被反映时编辑就会完成 

$ ( "#grid" ) .igGridUpdating ( "startEdit" , rowID, " ReadOnly" ) ;

}

}

执行结果

它按预期工作。

本次创建的示例代码可以从以下获取。
根据特定单元格的值动态更改 igGrid 的 columnSettings 设置