dwr addRows方法

最新推荐文章于 2018-09-13 10:48:33 发布

最新推荐文章于 2018-09-13 10:48:33 发布 · 236 阅读

文章标签：

#DWR #HTML

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了DWR中addRows方法的使用方法及其参数options的具体配置方式，包括如何通过rowCreator和cellCreator自定义表格样式，以及如何利用cellFuncs设置数据列。

这种例子网上已经有好多了，主要是多了options参数的用法，自己发下备份，也希望对大家有所帮助。
addRows 4个参数分别为表格(table,tbody,thead,tfoot,推荐用后面三个，可以准确定位)的id，数据集合(array，list或map)，一行数据的显示方法和options，具体用法如下：


dwr.util.addRows("searchResult",list,cellFuncs,{
    rowCreator:function(options){   
	    var row = document.createElement("tr");
             row.onmouseover= function () {
	        //鼠标放上去的效果
	    };
	    row.onmouseout= function () {
	        //鼠标移开的效果
	    };
             //其他事件
	    return row;
    },
    cellCreator:function(options){   
	    var td = document.createElement("td");
             //定制td属性
	    return td;
	    },
    escapeHtml:false}//防止html直接显示
);

cellFuncs 里面有几个function就会出现几列数据


var cellFuncs = [
function(datas) { return datas.docType; },
function(datas) { return datas.docDt; },
function(datas) {
	var inputEl = document.createElement("span");
    inputEl.innerHTML = datas.docCount;
    inputEl.id = datas.id+"_s";
    return inputEl;
 },
function(datas) {
    var inputEl = document.createElement("input");
    inputEl.type = "text";
    inputEl.id = datas.id+"_i";
    inputEl.size = 6;
    inputEl.maxLength = 8;
    inputEl.className = "xx";
    return inputEl;
 },
function(datas) {
    var addButton = document.createElement("input");
    addButton.type="button";
    addButton.className="yy";
    addButton.value="操作";
    addButton.onclick=function(){
    	checkInputNum(datas);
    }
    return addButton;
}
];

最后的options的几个参数如下：
rowData: 相当于cellFuncs 的datas，表示一行数据。
rowIndex: 数据集合的索引，如果是map则为key，从0开始计数。
rowNum: 跟rowIndex差不多，不过这个表示该容器现有的数据条数，而不是索引。
data: cellCreator里面适用，表示该td里面的内容。
cellNum: cellCreator里面适用，表示该td的所在的列数。

如果有什么问题可以给我留言。