jqGrid 编辑列和编辑行

最新推荐文章于 2022-04-27 10:38:55 发布

原创最新推荐文章于 2022-04-27 10:38:55 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #object #json #null

jQuery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用 jqGrid 进行单元格编辑及数据更新操作，包括日期选择器的集成、数据计算更新及下拉框的实现方法等。通过示例代码展示如何在编辑单元格后触发特定功能。

编辑列

第一种:

afterEditCell: function (id,name,val,iRow,iCol){
                if (name == 'invdate') { //invdate是日期在colModel定义的name值
                    jQuery("#" + iRow + "_invdate", "#celltbl").datepicker({ dateFormat: "yy-mm-dd" }); //根据日期来判断这一行
                 }
            },
            afterSaveCell : function(rowid,name,val,iRow,iCol) {
                if(name == 'amount') {
                var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
                jQuery("#celltbl").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
             }

第二种:

afterEditCell
:
 
function
 
(
id
,
name
,
val
,
iRow
,
iCol
)
 
{


        
if
(
name
==
'name'
)
 
{


            
//cities here is local json object


            jQuery
(
"#"
+
iRow
+
"_name"
,
"#celltbl"
).
autocomplete
(
cities
);


        
}


    
},


    afterSaveCell 
:
 
function
(
rowid
,
name
,
val
,
iRow
,
iCol
)
 
{


        
if
(
name 
==
 
'name'
)
 
{


            jQuery
(
"#celltbl"
).
jqGrid
(
'setRowData'
,
rowid
,{
name
:
jQuery
(
".ac_over"
).
text
()});


            jQuery
(
".ac_results"
).
remove
();


        
}


    
}



编辑行

   ondblClickRow: function (id) {

                if (id && id != lastsel) {

                    if (typeof lastsel != "undefined") {

                        $('#ExamsubjectGrid').jqGrid('saveRow', lastsel, null, "clientArray");

                        $('#ExamsubjectGrid').jqGrid('restoreRow', lastsel); //恢复行的状态

                    }

                }

                $('#ExamsubjectGrid').jqGrid('editRow', id, false);

                lastsel = id;

            }