了解最新技术文章
在 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 设置