浏览 1487 次
锁定老帖子 主题:自己写的XGrid O(∩_∩)O~
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-04-12
<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>
截图 :
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |