效果如下:
需要的引用以下内容
bootstrap2 http://cnbootstrap.com/
bootstrap-paginator v0.5 主页 http://bootstrappaginator.org/
jquery1.8
----------------------------------------------------------------------------------------------------
目前bootstrap对grid的处理还不是很好所有自己主要写了些方法处理.主要处理方法
playingui.js
//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
demo.html 的script部分的主要方法
//绑定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 }
这是一个非常轻量级的组建的(列表+分页),也没有一个一些大框架的笨重.兼容性还不错,推荐.