//demo做的一个大对象而已.主要是buildgrid方法
 1 var playingui = {

 2     //动态变量方法,为了可以方便统一以$+id的方式去取的dom的对象

 3     autovariable: function (options) {

 4         if (options != undefined) {

 5             if (typeof options == "string") {

 6                 options=options.split(',');

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

 8                     eval("$" + options[i] + "=$('#" + options[i] + "');");

 9                 }

10             }

11         }

12     },

13     //建立grid

14     buildgrid:function(grid)

15     {

16          var html = '';

17          //grid的json数据

18          var json = grid.json;

19          //grid的json字段

20          var fields=grid.data;

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

22                     html += "<tr>";

23                     for (var j = 0; j < fields.length; j++){

24                         var name = json[i][fields[j].name];

25                         //当前json的字段

26                         var field = fields[j];

27                         //currentfield:当前json

28                         //那么如果json[i][fields[j]]  就等于json.xxx的对象

29                         var currentfield = json[i];

30

31                         //如果该列是操作列,那么只做这件事

32                         if(field.type=='opfield')

33                         {

34                             html += getTbodyTd(field.value(currentfield));

35                         }

36                         else{

37                             if (field.value!=undefined && typeof field.value=="function")

38                             {

39                                 html += getTbodyTd(field.value(currentfield));

40                             }

41                             else

42                             {

43                                 if (field.type == 'date') {

44                                     //这里注释了，因为这里使用到baidu的tangram插件,主要用来格式化格式,当然也可以用别的方式.

45                                     //html += getTbodyTd(baidu.date.format(new Date(name),'yyyy-MM-dd'));

46                                     html += getTbodyTd(name);

47                                 }

48                                 else{

49                                     html += getTbodyTd(name);

50                                 }

51                             }

52                         }

53                         //grid的onloading方法

54                         grid.onloading(currentfield);

55                     }

56                     html += "</tr>";

57             }

58             $tbody.show();

59          $tbodyPage.show();

60          $tbodyList.html(html);

61          //成功获取数据绑定page

62          bindPage();

63     }

64

65 };

66  

   //绑定grid
 1 function bindGrid(newPag) {

 2     showNoRecord(false);

 3     $.ajax({

 4         type: "get",

 5         //这里用的是*.js文件方便demo

 6         url: 'datajson.js',

 7         dataType: "json",

 8         beforeSend: function () { showLoadingImg(true); },

 9         complete: function () { showLoadingImg(false); },

10         success: function (data) {

11             if (data.dataMap == null) {

12                 showNoRecord(true);

13             }

14             else {

15                 var json = data.dataMap.msg;

16                 jsonpagesize = data.dataMap.totalpage;

17                 //定义grid对象

18                 var grid = {};

19                 //赋值到grid

20                 grid.json = json;

21                 //定义data的数组,将会根据此定义来生成建立grid

22                 grid.data = [

23                     { name: 'deviceid', type: 'string' },

24                     { name: 'devicename', type: 'string' },

25                     { name: 'deviceip', type: 'string' },

26                     { name: 'deviceversion', type: 'string' },

27                     { name: 'serverversion', type: 'string' },

28                     { name: 'logindate', type: 'date' },

29                     {

30                         name: 'isonline', type: 'string', value:

31                            //value自定义函数,方便返回数据。

32                            function (currentfield) {

33                                return currentfield.isonline == true ? "在线" : "离线";

34                            }

35                     },

36                         //操作列定义type为opfield即可

37                     {

38                         name: 'opfield', type: 'opfield', value:

39                            function (currentfield) {

40                                return getTbodyOpButton((currentfield.isonline == true ? '关机' : '开机'), currentfield.deviceid);

41                            }

42                     }

43                 ];

44                 //定义onloading事件

45                 grid.onloading = function (currentfield) {

46                     //用变量来保存特殊数值,方便以后传输数据.

47                     device[currentfield.deviceid] = {

48                         port: currentfield.deviceport

49                     };

50                 };

51                 playingui.buildgrid(grid);

52             }

53         }

54     });

55 }

   //绑定分页
 1 function bindPage() {

 2     var options = {

 3         currentPage: 1,

 4         totalPages: jsonpagesize,

 5         onPageChanged: function(e, oldPage, newPage) {

 6             //调用绑定grid .这儿传入newpage方便在绑定grid的时候做分页的查询.

 7             bindGrid(newPage);

 8         }

 9     };

10     $tbodyPage.bootstrapPaginator(options);

11 }