<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWR3.0文件上传</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type='text/javascript' >
(function($){
$.fn.table=function(options){
if(this.length<1){
return;
}
var table=this.get(0);
$("tbody",table).remove();
if(options.columns){
this.data("columns",options.columns);
createTableHeader(options).appendTo(table);
}
if(options.data && options.data.length>0){
createTablebody(table,options).appendTo(table);
}
bingTableEvent(table,options);
};
$.fn.tableAddData=function(data){
createTablebody(this.get(0),{"data":data,columns:this.data("columns")},true);
};
function createTableHeader(options){
var columns=options.columns;
var thead=$("<thead><tr></tr></thead>");
$.each(columns,function(index,column){
var td=document.createElement("td");
$(td).attr("name",column.attribute);
$(td).prop("width",column.width);
$(td).text(column.name);
$("tr",thead).append(td);
});
return thead;
};
function createTablebody(table,options,addModel){
var tbody= addModel ? $("tbody",table) : $("<tbody></tbody>");
var domTr=$("thead tr",table).clone();
var data=options.data;
$.each(data,function(index,row){
var tr=domTr.clone();
$("td",tr[0]).each(function(cellIndex){
//if the column format function exists then call it
if(options.columns && $.isFunction(options.columns[cellIndex].format)){
var refAttribute=$(this).attr("name");
var formatResult=options.columns[cellIndex].format(row[refAttribute],row,cellIndex)
$(this).html(formatResult);
}else{
$(this).text(row[$(this).attr("name")]);
}
});
tr.appendTo(tbody);
});
return tbody;
};
function bingTableEvent(table,options){
$("thead tr td").on("click",function(event){
if(options.onsort){
options.onsort($(this).attr("name"),event)
}
});
$("tbody tr").on("dblclick",function(event){
if(options.onsort){
options.ontrdblclick(this,event)
}
});
}
})($);
$(document).ready(function(){
var options={
onsort:function(attr){alert("sort:"+attr)},
ontrdblclick:function(tr){alert(tr.innerHTML)},
columns:[{name:"<font>编号</font>",attribute:"id",width:"10%",format:function(value,item,index){return "CKF"+value}},
{name:"名称",attribute:"name",width:"30%"},
{name:"说明",attribute:"description",width:"30%"},
{name:"作者",attribute:"author",width:"30%"}
],
data:[
{id:"1",name:"<red>我是谁</red>",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"2",name:"魔幻世界",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"3",name:"你是谁",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"4",name:"what's your name",description:"my name is ckf. what's your name",author:"chen zhiwu"}
]
}
$("#mytable").table(options);
$("#btnAdd").on("click",function(){
var data=[{id:"5",name:"new record",description:"sadfsdfsadfsd",author:"chen kai"}];
$("#mytable").tableAddData(data);
});
});
</script>
</head>
<body>
<table id="mytable" style="border:1px solid red;width:500px;height:200px"></table>
<input type="button" value="add" id="btnAdd"/>
</body>
</html>
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
