<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
var settings = {
title : "用户信息" ,
renderTo : "foo" ,
headers : [
"姓 名","年 龄","性 别","城 市","联系方式","备 注"
] ,
list : [
{name:"wangziyue",age:"28",sex:"男",fromTo:"北京",tel:"13146253513",note:"我是一名程序员!"} ,
{name:"zhangsan",age:"22",sex:"女",fromTo:"北京",tel:"13520454933",note:"你好世界 。。。 。。。"} ,
{name:"lisi",age:"32",sex:"男",fromTo:"北京",tel:"13423356789",note:"今天心情不,今天心情不,今天心情不错 。。。 。。。"} ,
{name:"wangwu",age:"18",sex:"女",fromTo:"北京",tel:"13214467780",note:"你好世界 。。。 。。。"} ,
{name:"sunliu",age:"45",sex:"女",fromTo:"北京",tel:"13801139027",note:"你好世界 。。。 。。。"}
] ,
commands : [
{
name : "+ 添加" ,
cmd : "add"
} ,
{
name : "- 删除" ,
cmd : "del"
} ,
{
name : "修 改" ,
cmd : "mod"
}
]
} ;
XGrid.load(settings) ;
}) ;
var XGrid = function(){
var records = [] ;
function _isChecked(){
var jq_checker = $("input[@type=checkbox]:checked") ;
var size = jq_checker.size() ;
return (1 == size) ? true : false ;
} ;
function _curd(cmd,id){
if("add" == cmd){
_add() ;
}
else if("del" == cmd){
_delete(id) ;
}
else if("mod" == cmd){
}
else{
alert("无效的参数" + cmd + "!") ;
return ;
}
} ;
function _add(){
var _div = $("<div></div>")
.addClass("data_add")
.appendTo("body") ;
var _top = parseInt(document.documentElement.clientHeight / 2 - _div.height() / 2) ;
var _left = parseInt(document.documentElement.clientWidth / 2 - _div.width() / 2) ;
var _css = {
top : _top + "px" ,
left : _left + "px" ,
display : "none"
} ;
_div
.css(_css)
.fadeIn("normal") ;
} ;
function _delete(id){
var i = 0 ;
for(;i<records.length;i++){
var record = records[i] ;
if(id == record.id){
break ;
}
}
records.splice(i,1) ;
_reload() ;
}
function _reload(){
var _table = $(".data_grid")
.find("tbody#mytbody")
.empty() ;
for(var i=0;i<records.length;i++){
var r = records[i] ;
var assId = r.id ;
var _tr = $("<tr></tr>")
.css("display","none")
.appendTo(_table)
.fadeIn("slow") ;
var _td_ = $("<td></td>")
.appendTo(_tr) ;
$("<input type='checkbox' />")
.attr("assId",assId)
.appendTo(_td_) ;
var name = $("<td></td>")
.html(r.name)
.appendTo(_tr) ;
var age = $("<td></td>")
.html(r.age)
.appendTo(_tr) ;
var sex = $("<td></td>")
.html(r.sex)
.appendTo(_tr) ;
var fromTo = $("<td></td>")
.html(r.fromTo)
.appendTo(_tr) ;
var tel = $("<td></td>")
.html(r.tel)
.appendTo(_tr) ;
var note = $("<td></td>")
.html(r.note)
.appendTo(_tr) ;
}
}
function _validate(){
} ;
function _render(settings){
var title = settings.title ;
var renderTo = settings.renderTo ;
var headers = settings.headers ;
var list = settings.list ;
var commands = settings.commands ;
var dataGrid = $("<div></div>")
.addClass("data_grid")
.appendTo("body") ;
var dataHeader = $("<div></div>")
.addClass("data_header")
.html(title)
.appendTo(dataGrid) ;
var dataCommand = $("<div></div>")
.addClass("data_command")
.appendTo(dataGrid) ;
for(var i=0;i<commands.length;i++){
var command = commands[i] ;
var name = command.name ;
var cmd = command.cmd ;
$("<a href='#'></a>")
.attr("cmd",cmd)
.html(name)
.click(function(){
if(_isChecked()){
var id = $("input[@type=checkbox]:checked").attr("assId") ;
_curd($(this).attr("cmd"),id) ;
}
else{
alert("请选择并且只能选择一项!") ;
}
})
.appendTo(dataCommand) ;
}
var dataList = $("<div></div>")
.addClass("data_list")
.appendTo(dataGrid) ;
var _table = $("<table cellspacing='1' cellpadding='0'></table>")
.appendTo(dataList) ;
var _tr = $("<tr></tr>")
.appendTo(_table) ;
var checker = $("<th></th>")
.html("选 择")
.appendTo(_tr) ;
for(var j=0;j<headers.length;j++){
var header = headers[j] ;
$("<th></th>")
.html(header)
.appendTo(_tr) ;
}
var _tbody = $("<tbody></tbody>")
.attr("id","mytbody")
.appendTo(_table) ;
for(var k=0;k<list.length;k++){
var data = list[k] ;
var assId = _getAssId() ;
var _tr_ = $("<tr></tr>")
.appendTo(_tbody) ;
var _td_ = $("<td></td>")
.appendTo(_tr_) ;
$("<input type='checkbox' />")
.attr("assId",assId)
.appendTo(_td_) ;
for(var prop in data){
$("<td></td>")
.html(data[prop])
.appendTo(_tr_) ;
}
data.id = assId ;
records[records.length] = data ;
}
} ;
function _getAssId(){
var myString = [
"0","1","2","3","4","5","6","7","8","9","a","b",
"c","d","e","f","g","h","i","j","k","l","m","n",
"o","p","q","r","s","t","u","v","w","x","y","z","_"
] ;
var assId = "" ;
for(var i=0;i<8;i++){
var assIndex = parseInt(Math.random() * myString.length) ;
assId += myString[assIndex] ;
}
return assId ;
}
function load(settings){
_render(settings) ;
} ;
return {
load : load
} ;
}() ;
</script>
</head>
?
截图 ：
?
