jqgrid 实现基础的单行编辑功能

来源：互联网发布：怎么用c语言编写软件编辑：程序博客网时间：2024/05/21 09:59

1.html代码

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

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>

阅读全文

0 0