如何实现基础的单行编辑功能

1.html代码

<table id="tableList" style="text-align:center;"></table>
<p id=tablePager></p>

2.script代码

<script type="text/javascript">
            var lastId;//行编辑时用来存放行的id
            $(function(){
                showTable();    //显示jqgrid表格    
                $('.btn-update').click(updateRowData);//编辑按钮
                $('.btn-save').click(saveRowData);//保存按钮添加事件，默认不可用
                $('.btn-cancel').click(cancelRowData);//取消按钮，取消编辑操作
            });            function showTable(){
                layer.load(2);
                $("#tableList").jqGrid({ 
                    url:'myList.action',
                    mtype: "POST",
                    styleUI : 'AmazeUI',
                    datatype: "json",
                    height:"auto", 
                    autowidth:true,
                    rownumbers: true,
                    multiselect: true,
                    colNames:['id','数量'],   
                    colModel:[
                               {name:'id',index:'id',hidden:true},      
                                /*实现行编辑功能需要添加属性editable:true,edittype:'text',其中'text'与input中的type属性对应，
                                比如checkbox,radio，password等*/                                                           
                               {name:'num',index:'num',align: "center",editable: true, edittype: 'text'}                             
                              ], 
                            sortable:true,
                            sortname:'bc.serialNumber',
                            sortorder:'asc',
                            rowNum:10, 
                    rowList:[10,20,30,90],                    //显示记录数的格式
                    recordtext : "记录 {0} - {1} 总记录数 {2}",                    //页数显示格式
                    pgtext : "第 {0}页       共  {1} 页",

                    viewrecords:true,             
                    jsonReader: {                            // 数据行（默认为：rows）
                            root:"rows",                
                            repeatitems : false,       
                            page: "page",           // 当前页
                            records:"records",    // 总记录数
                            total: "total" 
                    },
                    onSelectRow: function(id){

                     },
                     onSelectAll:function(id){
                     },                     //加载完成（初始加载），回调函数
                     loadComplete: function(){ 
                         layer.closeAll('loading');                         
                         var page = $('#tableList').getGridParam('page');
                         layer.msg('第'+page+'页', {
                            time: 1000, //1s后自动关闭
                          });
                    },                    /*编辑提交时用来对提交的数据进行序列化，如果不添加此属
                    性，默认提交的是各个可编辑的字段名值对，后台需要有多个同名
                    字段来对应，序列化后，可以只用一个包含各个字段的对象即可接
                    收*/
                    serializeRowData: function(postdata) {
        return  {'entity.id':postdata.id,'entity.num':postdata.num};
                            },
                    prmNames:                     
                    {rows:"pageInfo.pageSize",page:"pageInfo.page",
                    sort:"pageInfo.sidx",order:"pageInfo.sord",
                    search:  "pageInfo._search"},
                    pager:"#tablePager"
                });
            }            /*编辑行的函数*/
            function updateRowData()
            {
                //获取选中行的id
                var id=$('#tableList').jqGrid('getGridParam','selrow');                
                if(id==null)
                    {                        
                    return;
                    }
                lastId=id; //存放编辑的id
                //调用此方法，使当前行变为可编辑
                $("#tableList").jqGrid('editRow', id);  

                $('.btn-update').attr("disabled",true);//编辑按钮变为不可用
                //保存和取消按钮变为可用
                $('.btn-save').attr("disabled",false);
                $('.btn-cancel').attr("disabled",false);
            }            /*保存编辑后的数据函数*/
            function saveRowData()
            {
                $("#tableList").jqGrid(                        
                'saveRow', 
                        lastId,//获取编辑行的id
                        { 
                            /*成功提交到后台的回调函数*/
                            successfunc: function(response) {
                                    //返回到前台的json字符串

                var data = 
                eval('(' + response.responseText + ')');                                    if(data.resultCode==0)
                                        {
                                    layer.msg("保存成功！",{icon:1});                                    //返回true，对前台数据进行更新
                                            return true;
                                        }                                    else
                                    {
                                    layer.msg("保存失败！",{icon:2});                                   //返回false，对前台数据不更新
                                            return false;
                                    }
                                },                                /*提交的请求地址*/
                            url:'recoveryTokenUpdate.action',                            /*系统发生异常时的回调函数*/
                            errorfunc:function(){

                            layer.msg('系统异常！', {time: 2000});
                            },                            /*请求类型post*/
                            "mtype" : "POST"
                        });
                $('.btn-updateToken').attr('disabled',false);
                $('.btn-saveToken').attr('disabled',true);
                $('.btn-cancelToken').attr('disabled',true);
            }            /*取消编辑函数*/
            function cancelRowData()
            {
                //取消所编辑的行的操作
                $('#tableList').jqGrid('restoreRow', lastId);
                $('.btn-updateToken').attr('disabled',false);
                $('.btn-saveToken').attr('disabled',true);
                $('.btn-cancelToken').attr('disabled',true);
            }        </script>

以上就是如何实现基础的单行编辑功能 的详细内容，更多请关注其它相关文章！