JQuery数据绑定：①列表绑定（续）

核心提示： 我们动态append to tBody的html内容是死的，里面的<a>、<input>可能没有自己的事件，JQuery数据绑定：①列表绑定（续）(2)，除非里面已经写好了 onclick ，，如果我要做实例的话，会重写这个方法， 这样我们改动起来就失去了Jquery的事

我们动态append to tBody的html内容是死的，里面的<a>、<input>可能没有自己的事件，除非里面已经写好了 onclick 。。 这样我们改动起来就失去了Jquery的事件绑定的优势。

所以绑定数据后，我们需要处理所有列表共通的事件绑定，另外需要一个callback方法来处理特定的需求。

Ⅳ、其他的问题...

点击thead里的连接对数据排序如何处理？　 翻页后前一页的已选中的checkbox如何记忆？其他还会发现... 好的方法是慢慢成熟演变的。

以上的问题都是我在实际开发中不断碰到的总结。

Jquery的插件的写法，随便找个插件我们就可以模仿的写下来。 类似$("##").FunctionName(..) 就是下面这种写法。

; (function($) {
　　 $.fn.FunctionName = function(...){};
})(jQuery);

如果手打代码太累了-。-而且不能高亮，但是代码会比较干净。可是我还是选择了粘贴现在在用的代码(还没做到理想状态)，如果把代码打成一个演变的过程可能更容易理解

下面我们开始写bindTable这个扩展方法。

Code

var callbackList = [];
$.fn.bindTable = function(args) {
　　　 if (this.length == 0) {
　　　　　　　 return this;
　　　 }
　　　 var id = this.attr("id");
　　　 //定义需要的参数
　　　 var url, pagesize, pageindex, data, ispage, callback, listName, isappend;
　　　 //检查传递的参数
　　　 switch (typeof (args)) {
　　　　　　　 case "string": //只传url
　　　　　　　　　　　 url = args;
　　　　　　　　　　　 args = [];
　　　　　　　　　　　 args.url = url;
　　　　　　　　　　　 break;
　　　　　　　 case "number": //只传pagesize
　　　　　　　　　　　 pagesize = args;
　　　　　　　　　　　 args = [];
　　　　　　　　　　　 args.pagesize = pagesize;
　　　　　　　　　　　 break;
　　　　　　　 case "function"://只传callback
　　　　　　　　　　　 callback = args;
　　　　　　　　　　　 args = [];
　　　　　　　　　　　 args.callback = callback;
　　　　　　　　　　　 callbackList.id == undefined;
　　　　　　　　　　　 break;
　　　　　　　 case "undefined"://啥也没传
　　　　　　　 default:
　　　　　　　　　　　 args = args || "";
　　　　　　　　　　　 break;
　　　 }
　　　 url = args.url || this.attr("datasource"); //绑定的数据源为url请求 datasource是table的一个自定义属性
　　　 callback = args.callback || callbackList[id]; //绑定后的Function
　　　 if (args.data == undefined && args.url == undefined && pageindex == 1) {
　　　　　　　 dataList[id] = [];
　　　 }
　　　 data = args.data || dataList[id]; //绑定的数据源为已请求好的JsonData

　　　 pageRequest = args.pageRequest || false; //是否为分页请求
　　　 pagesize = args.pagesize || parseInt(this.attr("pagesize")) || Math.round(Math.round((window.screen.height - 500) / 26) / 5) * 5; //分页
　　　 isappend = args.isappend || false; //是否把数据填充到现在的列表
　　　 if (pageRequest) {
　　　　　　　 pageindex = args.pageindex || 1;
　　　 }
　　　 else {
　　　　　　　 pageindex = 1;
　　　 }

　　　 listName = args.list || "list";//请求的数据源的格式是Array还是Dictionary 例如{recourCount:xx,list:[]}

　　　 ispage = args.ispage || this.attr("ispage");//是否分页

　　　 if (url == undefined && data == undefined)//如果url请求和data都没有则不执行绑定
　　　　　　　 return this;

　　　 if (args.callback != undefined)//如果请求中有callback 清掉callbackList.id
　　　　　　　 callbackList[id] = undefined;
　　　 if (args.url != undefined)//如果是url请求 清掉data和dataList.id
　　　 {
　　　　　　　 data = undefined;
　　　　　　　 dataList[id] = undefined;
　　　 }
　　　 // 其实上面一大串都是来处理参数的。用一个args就是一个可变参数。
　　 // pagesize是根据分辨率来决定的5的倍数。后台分页也要根据前台传值来决定pageszie
　　 // callbackList是用来存放该列表绑定后的处理方法，由于翻页传递参数只需要传递pageIndex pagesize和recordcount 所以 callback等其他参数需要来记忆。



　　　 //如果是ajax请求
　　　 if (data == undefined) {
　　　　　　　 url = url.replace(/&?(pageindex|pagesize|_)=\w+/ig, "");//过滤url的翻页参数

　　　　　　　 if (ispage != "0") {
　　　　　　　　　　　 if (url.indexOf("?") == -1) url += "?";
　　　　　　　　　　　 url += "&pageindex=" + pageindex + "&pagesize=" + pagesize;//加上翻页的参数，就是因为要加上，所以上面先过滤
　　　　　　　 }
　　　　　　　 $.ajax({
　　　　　　　　　　　 url: url,
　　　　　　　　　　　 async: false,//这里用了同步请求，IE6下会卡一下，如果用异步，则需要把后面的代码做成一个单独的方法。
　　　　　　　　　　　 success: function(d) {
　　　　　　　　　　　　　　　 if (d == "")
　　　　　　　　　　　　　　　　　　　 data = undefined;
　　　　　　　　　　　　　　　 else
　　　　　　　　　　　　　　　　　　　 data = eval("(" + d + ")");
　　　　　　　　　　　 }
　　　　　　　 });
　　　 }
　　　
　　　 //如果不是添加，先把tbody置空
　　　 if (!isappend) {
　　　　　　　 $(".pagelist", this).empty().hide();
　　　　　　　 $("tbody:eq(0)", this).empty();
　　　 }
　　　 if (data == undefined)//ajax请求失败
　　　 {
　　　　　　　 return this;
　　　 }

　　　 //声明一个Array用来绑定
　　　 var dataSource = [];
　　　 if (data[listName] === undefined) {
　　　　　　　 dataSource = data;
　　　 }
　　　 else if (data[listName] != null) {
　　　　　　　 dataSource = data[listName];
　　　 }
　　　 //翻页需要的recordCount
　　　 var recordCount = data.recordCount || dataSource.length;

　　　 var isAjaxRequest = (url != undefined); //是否为ajax请求
　　　 var currentPageData = [];//当前页要绑定的数据，主要是为了使非ajax数据方便分页。
　　　 if (!isAjaxRequest) {
　　　　　　　 var loop = pagesize * pageindex;
　　　　　　　 if (loop >= recordCount) loop = recordCount;

　　　　　　　 for (var i = (pageindex - 1) * pagesize; i < loop; i++) {
　　　　　　　　　　　 currentPageData.push(dataSource[i]);
　　　　　　　 }
　　　 }
　　　 else
　　　　　　　 currentPageData = dataSource;

　　　 //替换模板创建到列表
　　　 if ($("tbody", this).length == 0)
　　　　　　　 this.append("<tbody></tbody>");

　　　 //没有数据的显示
　　　 if (!isappend) {
　　　　　　　 if (currentPageData.length == 0) {
　　　　　　　　　　　 $("tbody", this).html("<tr><td colspan='" + $("thead th:visible", this).length + "'>暂时没有数据</td></tr>");
　　　　　　　　　　　 $("tfoot", this).empty().hide();
　　　　　　　　　　　 return this;
　　　　　　　 }
　　　 }
　　　 $("tr:contains('暂时没有数据')", this).remove();
　　　 $("tbody", this).append(replaceTemplate(getTemplate(id), currentPageData));//这里执行数据替换
　　　
　　　 //执行callback，callback可以是string或Function callback主要用于绑定后的列表处理
　　　 if (callback != undefined) {
　　　　　　　 if (typeof (callback) == "function") {
　　　　　　　　　　　 callback(dataSource);
　　　　　　　 }
　　　　　　　 else {
　　　　　　　　　　　 try {
　　　　　　　　　　　　　　　 eval(callback)();
　　　　　　　　　　　 } catch (e) { }
　　　　　　　 }
　　　　　　　 if (ispage != "0") {
　　　　　　　　　　　 callbackList[id] = callback;
　　　　　　　 }
　　　 }

　　　 //如果分页 创建分页到tfoot
　　　 if (ispage != "0" || $("tfoot", this).length > 0) {
　　　　　　　 this.attr("datasource", url);
　　　　　　　 if (!isAjaxRequest) {
　　　　　　　　　　　 dataList[id] = data;
　　　　　　　 }
　　　　　　　 this.pageHtml(recordCount, pagesize, pageindex);
　　　 }
　　 //这里把排序、分页、事件绑定都写死在里面了，这样有些丑陋，如果我要做实例的话，会重写这个方法。
　//
　　　 this.bindSort();//排序
　　　 this.setPageLink();//设置分页的链接
　　　 setLink(id); //设置其他连接,这里以后还需要修改。
　　　
　　　 //设置th里的全选为非选中状态
　　　 try {
　　　　　　　 $("thead th input[type='checkbox']", this).attr("checked", "");
　　　 } catch (e) { }
　　　 return this;
};

编缉推荐阅读以下文章

• MVC+Jquery开发B/S系统：①列表绑定