如何自动刷新jqgrid?

时间:2012-09-05 05:48:21

标签: javascript jquery jqgrid

我使用以下脚本将详细信息从sql数据库绑定到jqgrid 。添加,编辑,删除工作正常,我的问题是,如果我尝试添加,编辑,删除数据jqgrid它在数据库中更新但在i 刷新页面之后没有显示在jqgrid中,然后在jqgrid中显示数据。如何在单击提交按钮后自动刷新jqgrid?

    <script type="text/javascript">


          $(document).ready(function(){
          var mydata=new Array();

                $.extend({
                getValues: function(url) {
                var result = null;

                $.ajax({

                    url: url,
                    type: 'POST',
                    data:'Param=value',
                    async:false,
                    success: function(data) {
                            result=JSON.parse(data);
                             }
                        });
                  return result;
                }

                });

                mydata = $.getValues(Some url);//get the data from the url

           $("#datagrid").jqGrid({

                datatype: "local",
                data: mydata,
                colNames:['companyid','company', 'price', 'Change','perchange','LastUpdated'],
                colModel:[
                    {name:'companyid',index:'companyid', width:100,editable:true,editoptions:{size:10}},
                    {name:'company',index:'company', width:100,editable:true},
                    {name:'price',index:'price', width:100,editable:true,editoptions:{size:10}},
                    {name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}},
                    {name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}},
                    {name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}}
            ],
            rowNum:10,
            rowList:[10,20],
            loadonce: true,
            pager: '#navGrid',
            sortname: 'companyid',
            sortorder: "asc", 
            height: 210,
            width:600,
            onSelectRow: function(id){
                   getID = jQuery("#datagrid").jqGrid('getCell', id, 'companyid')
                },
            viewrecords: true,
            caption:"JQ GRID"
            });

             jQuery("#datagrid").jqGrid('navGrid','#navGrid',{edit:true,add:true,del:true, addtext: 'Add', edittext: 'Edit', deltext: 'Delete'},

            //For Edit
                 {
                  closeOnEscape: true,
                  closeAfterEdit: true,
                  reloadAfterSubmit:true, 
                  closeOnEscape: true,
                  url:'Some url'

                 },
            // For Add
                 {

                 closeOnEscape: true,
                 closeAfterAdd: true,
                 reloadAfterSubmit: true, 
                 closeOnEscape: true,
                 url: 'Some url'
                 },       
            // For Delete
               {
                    url:'Some url',
                    closeAfterDelete: true,
                    reloadAfterSubmit: true, 
                    closeOnEscape: true,
                    onclickSubmit: function(e, postdata)
                    {
                     e.url = 'Some url'
                    }
               }


             );


          });


          </script>

1 个答案:

答案 0 :(得分:4)

您需要触发reloadGrid: -

  $("#datagrid").trigger("reloadGrid");