给jMaki的Dojo.table控件增加分页功能。
Author: bsspirit Source: http://gocom./blog7168_14478.htm 分页原理:前台分页技术。一次性得到全部结果集,通过Javascript进行分页。 使用方法: <a:ajax name="dojo.table2" service="${parameters}" args="{size:5}"/> 说明: name="dojo.table2" //这是带分页的table控件 service="url" //提供json串的url地址 arg="{size:5}" //分页大小为,每页5个。如果不在页面上定义,默认为10个。 使用方法看起来很简单,复杂的就是对控件的修改了。 component.htm文件: <table id="${uuid}" class="filterTable"></table> <div align="right" id="page_${uuid}" class="filterTable"></div> component.js文件:(复杂度其中在这个文件里) /* Copyright 2007 You may not modify, use, reproduce, or distribute this software except in compliance with the terms of the License at: http://developer./berkeley_license.html $Id: component.js,v 1.2 2008/02/15 09:14:02 zhangdan Exp $ */ djd43.require("djd43.widget.FilteringTable"); // define the namespaces jmaki.namespace("jmaki.widgets.dojo.table2"); jmaki.widgets.dojo.table2.Widget = function(wargs) { var _widget = this; var columns = []; var uuid = wargs.uuid; var topic = "/dojo/table2"; var subscribe = ["/dojo/table2", "/table"]; var filter = "jmaki.filters.tableModelFilter"; var container = document.getElementById(uuid); var table; var counter = 0; // 分页 var pageInfo = document.getElementById("page_"+uuid); //分页对象 var page = { total:100, //结果集总数 size:10, //每页结果集数 index:0, //当前的位置 rows:[], //结果集所有值 pageAccount:function(){ //总页数 var tmp = page.total/page.size; if(page.total%page.size == 0){ return tmp; } return Math.floor(tmp)+1; }, pageNow:function(){ //当前的页 if(page.index>page.total){ return page.pageAccount(); } if(page.index<page.size){ //不足一页的情况 return page.first; } else if(page.index>=page.size){ return Math.floor(page.index/page.size)+1; } }, first: 1,//1是开始页 front:function(){//上一页 if(page.pageNow()<=1){ return page.first; } return page.pageNow()-1; }, next: function(){//下一页 if(page.pageNow()>=page.last()){ return page.last(); } return page.pageNow()+1; }, last: function(){//最后一页 return page.pageAccount(); }, total2String:function(){ return "total:"+page.total; }, size2String:function(){ return "size:"+page.size; }, index2String:function(){ return "index:"+page.index; }, first2String:function(){ return "<a href=javascript:jmaki.attributes.get(""+uuid+"").pageAction.toPage(""+page.first +"");>首页"+"</a>"; }, front2String:function(){ return "<a href=javascript:jmaki.attributes.get(""+uuid+"").pageAction.toPage(""+page.front ()+"");>上页"+"</a>"; }, next2String:function(){ return "<a href=javascript:jmaki.attributes.get(""+uuid+"").pageAction.toPage(""+page.next ()+"");>下页"+"</a>"; }, last2String:function(){ return "<a href=javascript:jmaki.attributes.get(""+uuid+"").pageAction.toPage(""+page.last()+"");>last:"+"</a>"; }, goto2String:function(){ var tmp = "转到第"; tmp += "<select name="gotopage" onchange=jmaki.attributes.get(""+uuid+"").pageAction.toPage(this.value)>"; for(var i=1;i<=page.last();i++){ if(i==page.pageNow()){ tmp+= "<option selected value=""+i+"">- "+i+" -</option>"; continue; } tmp+= "<option value=""+i+"">- "+i+" -</option>"; } tmp += "</select>"; tmp += "页"; return tmp; }, twoSpace:function(){ return " "; } }; this.pageAction={ toPage:function(idx){ page.index = (idx-1) * page.size; // alert("pageIdx:"+idx+" index:"+page.index+" pageNow:" +page.pageNow()); _widget.rows = page.rows.slice(page.index,page.index+page.size); var data = []; // add an Id for everything as it is needed for sorting for (var i=0; i < _widget.rows.length; i++) { var nRow; if (!(_widget.rows[i] instanceof Array)) { nRow = _widget.rows[i]; } else { nRow = {}; for (var cl = 0; cl < columns.length; cl++) { nRow[columns[cl].id] = _widget.rows[i][cl]; } } if (typeof _widget.rows[i].id == "undefined") { nRow.id = genId(); } else { nRow.id = _widget.rows[i].id; } data.push(nRow); } count = _widget.rows.length; table.store.setData(data); djd43.event.connect(table, "onSelect", _widget, "onSelect"); _widget.pagedInfo(); } }; //分页导航 this.pagedInfo = function(){ pageInfo.innerHTML=page.first2String()+page.twoSpace()+page.front2String()+page.twoSpace()+page.next2String()+page.twoSpace()+page.goto2String(); } //service属性加载URL this.loadService = function(){ djd43.io.bind({ //url: wargs.service, url: encodeURI(wargs.service+"×tamp=" + new Date().getTime()), method: "get", mimetype: "text/json", load: function (type,data,evt) { if (data == false) { container.innerHTML = "Data format error loading data from " + wargs.service; } else { // convert value if a jmakiRSS type if (data.dataType == "jmakiRSS") { data = jmaki.filter(data, filter); } if (!data.rows) { showModelDeprecation(); return; } if (data.rows) { _widget.rows = data.rows; } if (data.columns) { columns = data.columns; } page.total = _widget.rows.length; page.rows = _widget.rows; _widget.rows = page.rows.slice(page.index,page.index+page.size); _widget.init(); } } }); } // FIXME: this code can be removed for 1.0 release var showedModelWarning = false; function showModelDeprecation() { if (!showedModelWarning) { jmaki.log("Dojo table widget uses the incorrect data format. " + "Please see <a href="http://wiki./bin/view/Projects/jMakiTableDataModel">" + "http://wiki./bin/view/Projects/jMakiTableDataModel</a> for the proper format."); showedModelWarning = true; } } function genId() { return wargs.uuid + "_nid_" + counter++; } if (wargs.args) { if (wargs.args.topic) { topic = wargs.args.topic; jmaki.log("Dojo table: widget uses deprecated topic property. Use publish instead. "); } if (wargs.args.filter) { filter = wargs.args.filter; } //从JSP得到分页大小 if(wargs.args.size){ page.size = wargs.args.size; } } if (wargs.publish ) { topic = wargs.publish; } if (wargs.subscribe){ if (typeof wargs.subscribe == "string") { subscribe = []; subscribe.push(wargs.subscribe); } else { subscribe = wargs.subscribe; } } // initialize the widget this.init = function() { // backwards compatibility if (typeof columns[0] != "object") { showModelDeprecation(); } else if (_widget.rows.length > 0 && _widget.rows[0] instanceof Array) { showModelDeprecation(); } table = djd43.widget.createWidget("FilteringTable",{valueField: "id"},container); // provide generic column names if they were not provided. for (var l = 0; l < columns.length; l++) { var c = columns[l]; if (!c.id)c.id = l + "" ; c.field = c.id; if (c.title) c.label = c.title; c.dataType = "String"; } for (var x = 0; x < columns.length; x++) { table.columns.push(table.createMetaData(columns[x])); } var data = []; // add an Id for everything as it is needed for sorting for (var i=0; i < _widget.rows.length; i++) { var nRow; if (!(_widget.rows[i] instanceof Array)) { nRow = _widget.rows[i]; } else { nRow = {}; for (var cl = 0; cl < columns.length; cl++) { nRow[columns[cl].id] = _widget.rows[i][cl]; } } if (typeof _widget.rows[i].id == "undefined") { nRow.id = genId(); } else { nRow.id = _widget.rows[i].id; } data.push(nRow); } count = _widget.rows.length; table.store.setData(data); djd43.event.connect(table, "onSelect", _widget, "onSelect"); _widget.pagedInfo(); } // set columns from the widget arguments if provided. if (wargs.args && wargs.args.columns) { columns = wargs.args.columns; } // pull in the arguments if (wargs.value) { // convert value if a jmakiRSS type if (wargs.value.dataType == "jmakiRSS") { wargs.value = jmaki.filter(wargs.value, filter); } if (!wargs.value.rows) { showModelDeprecation(); return; } if (wargs.value.rows){ _widget.rows = wargs.value.rows; } else if (wargs.value instanceof Array) { _widget.rows = wargs.value; } if (wargs.value.columns) { columns = wargs.value.columns; } _widget.init(); } else if (wargs.service) { _widget.loadService(); } else { djd43.io.bind({ url: wargs.widgetDir + "/widget.json", method: "get", mimetype: "text/json", load: function (type,data,evt) { if (data == false) { container.innerHTML = "Data format error loading data widget.json file."; } else { var _d; // convert value if a jmakiRSS type if (data.dataType == "jmakiRSS") { _d = jmaki.filter(data, filter); } else { if (data.value.defaultValue) _d = data.value.defaultValue; } if (_d.rows) { _widget.rows = _d.rows; } if (_d.columns) { columns = _d.columns; } _widget.init(); } } }); } this.clearFilters = function(){ table.clearFilters(); } this.clear = function() { table.store.setData([]); table.store.clearData(); counter = 0; } this.addRows = function(b){ if (b.message)b = b.message; for (var i=0; i < b.value.length; i++) { _widget.addRow({ value : b.value[i]}, false); } } this.removeRow = function(b){ var index; if (b.message)b = b.message; if (b.targetId) { index = b.targetId; } else { index = b; } if (index && table.store.getDataByKey(index)) { table.store.removeDataByKey(index); } } this.updateRow = function(b, d) { var index; var data; if (d) data = d; if (b.message) { b = b.message; } if (b.value) { data = b.value; } if (b.targetId) { index = b.targetId; } else { index = b; } if (typeof index != "undefined" && table.store.getDataByKey(index)) { var s = table.store.getDataByKey(index); if (s) { var r = table.getRow(s); for (var i in data) { s[i] = data[i]; } // update the table cells to match the model for (var j = 0; j < table.columns.length; j++) { r.childNodes[j].innerHTML = data[table.columns[j].id]; } } } } this.select = function(b){ var index; if (b.message)b = b.message; if (b.targetId) { index = b.targetId; } else { index = b; } if (index && table.store.getDataByKey(index)) { var s = table.store.getDataByKey(index); if (s) { var r = table.getRow(s); r.isSelected = true; table.resetSelections(); table.toggleSelectionByRow(r); table.renderSelections(); jmaki.publish(topic + "/onSelect", { widgetId : wargs.uuid, type : "onSelect", targetId : index, value : s }); } } } this.addRow = function(b){ var r; if (b.message)b = b.message; if (b.value) { r = b.value; } else { r = b; } var targetId; if (r.id) targetId = r.id; if (table.store.getDataByKey(targetId)) { jmaki.log(wargs.uuid + " : Warning. Attempt to add record to dojo.table. with duplicate row id: " + targetId + ". Autogenerating new id."); r.id = genId(); } // add an id for sorting if not defined if (typeof r.id == "undefined") { r.id = genId(); } table.store.addData(r, null, false); } this.onSelect = function(e) { var _s = []; var data; var d = table.store.get(); for (var i = 0; i < d.length; i++) { if (d[i].isSelected) { _s.push(d[i].src.id); data = d[i].src; } } // later we may want to support multiple selections jmaki.publish(topic + "/onSelect", { widgetId : wargs.uuid, type : "onSelect", targetId : _s[0], value : data }); } function doSubscribe(topic, handler) { var i = jmaki.subscribe(topic, handler); _widget.subs.push(i); } this.destroy = function() { for (var i=0; _widget.subs && i < _widget.subs.length; i++) { jmaki.unsubscribe(_widget.subs[i]); } } this.postLoad = function() { // track the subscribers so we can later remove them _widget.subs = []; for (var _i=0; _i < subscribe.length; _i++) { doSubscribe(subscribe[_i] + "/clear", _widget.clear); doSubscribe(subscribe[_i] + "/addRow", _widget.addRow); doSubscribe(subscribe[_i] + "/addRows", _widget.addRows); doSubscribe(subscribe[_i] + "/updateRow", _widget.updateRow); doSubscribe(subscribe[_i] + "/removeRow", _widget.removeRow); doSubscribe(subscribe[_i] + "/select", _widget.select); } } } 说明: 1. jmaki.namespace("jmaki.widgets.dojo.table2"); //在这里使用dojo.table2的命名空间,避免和原dojo.table重复。 2. var pageInfo = document.getElementById("page_"+uuid); //得到component.htm中的div,给分页进行输出。 3. var page = {..} //定义一个分页对象,分页的算法,和操作都定义在这个分页对象中。 4. this.pageAction() //网页点击,上一页/下一页等等操作,会触发这个方法。 5. this.pagedInfo = function() //输出上-页/下-页的标签到网页上。 6. this.loadService = function() //从service属性里,得到URL,取出URL的数据。 7. wargs.args.size //从JSP得到分页大小 sspirit 于 2008-03-01
IE浏览器,可能看不到全部内容。 请使用FireFox进行浏览。
|
|