如何實現基礎的單行編輯功能

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表格    
                $(&#39;.btn-update&#39;).click(updateRowData);//编辑按钮
                $(&#39;.btn-save&#39;).click(saveRowData);//保存按钮添加事件，默认不可用
                $(&#39;.btn-cancel&#39;).click(cancelRowData);//取消按钮，取消编辑操作
            });            function showTable(){
                layer.load(2);
                $("#tableList").jqGrid({ 
                    url:&#39;myList.action&#39;,
                    mtype: "POST",
                    styleUI : &#39;AmazeUI&#39;,
                    datatype: "json",
                    height:"auto", 
                    autowidth:true,
                    rownumbers: true,
                    multiselect: true,
                    colNames:[&#39;id&#39;,&#39;数量&#39;],   
                    colModel:[
                               {name:&#39;id&#39;,index:&#39;id&#39;,hidden:true},      
                                /*实现行编辑功能需要添加属性editable:true,edittype:&#39;text&#39;,其中&#39;text&#39;与input中的type属性对应，
                                比如checkbox,radio，password等*/                                                           
                               {name:&#39;num&#39;,index:&#39;num&#39;,align: "center",editable: true, edittype: &#39;text&#39;}                             
                              ], 
                            sortable:true,
                            sortname:&#39;bc.serialNumber&#39;,
                            sortorder:&#39;asc&#39;,
                            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(&#39;loading&#39;);                         
                         var page = $(&#39;#tableList&#39;).getGridParam(&#39;page&#39;);
                         layer.msg(&#39;第&#39;+page+&#39;页&#39;, {
                            time: 1000, //1s后自动关闭
                          });
                    },                    /*编辑提交时用来对提交的数据进行序列化，如果不添加此属
                    性，默认提交的是各个可编辑的字段名值对，后台需要有多个同名
                    字段来对应，序列化后，可以只用一个包含各个字段的对象即可接
                    收*/
                    serializeRowData: function(postdata) {
        return  {&#39;entity.id&#39;:postdata.id,&#39;entity.num&#39;: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=$(&#39;#tableList&#39;).jqGrid(&#39;getGridParam&#39;,&#39;selrow&#39;);                
                if(id==null)
                    {                        
                    return;
                    }
                lastId=id; //存放编辑的id
                //调用此方法，使当前行变为可编辑
                $("#tableList").jqGrid(&#39;editRow&#39;, id);  

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

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

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

#

以上是如何實現基礎的單行編輯功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！