效果如下:
需要的引用以下内容
bootstrap2
bootstrap-paginator v0.5 主页
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 //建立grid14 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 += "";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:当前json28 //那么如果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 else42 {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 += "";57 }58 $tbody.show();59 $tbodyPage.show();60 $tbodyList.html(html);61 //成功获取数据绑定page62 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 //赋值到grid20 grid.json = json;21 //定义data的数组,将会根据此定义来生成建立grid22 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.deviceport49 };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 }
这是一个非常轻量级的组建的(列表+分页),也没有一个一些大框架的笨重.兼容性还不错,推荐.