效果如下:
需要的引用以下内容
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 }
这是一个非常轻量级的组建的(列表+分页),也没有一个一些大框架的笨重.兼容性还不错,推荐.