关灯
开启左侧

jQuery EasyUI+ajax+datagrid 实现table数据刷新

[复制链接]
哥不帅但很坏 发表于 2019-4-23 18:16:26 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
一、问题引入  日常开发中jQuery EasyUI的使用使页面展示table变得异常方便,特别使用datagrid组件。但使用ajax异步请求刷新table数据反填datagrid时,存在数据无法重新加载问题,本文皆在于解决这一问题二、具体实现1.加载JS[Asm] 纯文本查看 复制代码
[color=white !important]
[color=white !important]?

01

02

03

04

05

06

07

08

09

10

/**

* 客户信息JS

*/

$(document).ready(function(){

    //初始载入数据

    loadData();

     

    //刷新数据

    reload();

});





2.初始载入数据[Asm] 纯文本查看 复制代码
[color=white !important]
[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

/*

* 初始载入数据

*/

function loadData()

{

    var url = "Report/ReportSelectCustomer";

    var param = null;

    //查询需要载入的数据

    getDateGrid();

    getData(url,param);

};





3.载入数据[Asm] 纯文本查看 复制代码
[color=white !important]
[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/**

* 载入数据

*/

function getDateGrid(){

      $('#wu-datagrid').datagrid({

            loadFilter:pagerFilter,     

            rownumbers:true,

            singleSelect:false,

            pageSize:20,           

            pagination:true,

            multiSort:true,

            fitColumns:true,

            fit:true,

            columns:[[

                {checkbox:true},

                { field:'custid',title:'客户编号',width:100,sortable:true},

                { field:'custname',title:'客户名称',width:100,sortable:true},

                { field:'goodsname',title:'货物名称',width:100},

                { field:'custtel',title:'联系电话',width:100},

                { field:'custemail',title:'电子邮箱',width:100},

                { field:'custadd',title:'送货地址',width:100},

                { field:'custremark',title:'备注',width:100}


        });   

}





4.发送请求,获取数据[Asm] 纯文本查看 复制代码
[color=white !important]
[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

/*

* 发送请求,获取数据

*/

function getData(url,param)

{

    $.ajax({

        url: url,

        type: "POST",

        async : false,

        contentType:'application/json;charset=UTF-8',

        data: JSON.stringify(param),

        dataType: "JSON",

        timeout: 20000,

        success : function (data) {

            reLodadDateGrid(data);

        },

        error : function (data){

        }

    });

}





5.组装dataGrid数据组装dataGrid数据[Asm] 纯文本查看 复制代码
[color=white !important]
[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

/*

* 组装dataGrid数据

*/

function reLodadDateGrid(data)

{

    var values = [];

     for ( var i = 0; i <data.length; i++) {

         var a = {

             'custid' : data.custid,

             'custname' : data.custname,

             'goodsname' : data.goodsname,

             'custtel' : data.custtel,

             'custemail' : data.custemail,

             'custadd' : data.custadd,

             'custremark' : data.custremark

         };

         values.push(a);

     }

     $('#wu-datagrid').datagrid('loadData', values);

}





6.刷新table时,刷新数据[Asm] 纯文本查看 复制代码
[color=white !important]
[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

/**

* 刷新记录

*/

function reload()

{

    $("#customer-reload").click(function(){

        $.messager.confirm('信息提示','确定要刷新?', function(result)

        {

            loadData();

        });

    });

}






回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


排行榜

关注我们:QQ交流群

官方微信

APP下载

全国服务热线:

4000-888-888

公司地址:上海市嘉定区

运营中心:上海市嘉定区百达国际大厦25楼

邮编:200000 Email:admin@mr-technos.com

Copyright   ©2015-2018  先森科技Powered by©Discuz!技术支持:先森科技     ( 浙ICP备18046157号-1 )|网站地图