`
ziyuewang
  • 浏览: 40093 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

基于JQuery写的Grid,大家多多指点

阅读更多
截图 :


$(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
				} ;
			}() ;

8
0
分享到:
评论
7 楼 ziyuewang 2011-04-20  
(*^__^*) 嘻嘻……
6 楼 80245089 2011-04-20  
css???
5 楼 ziyuewang 2011-04-17  
谢谢大家的建议!
4 楼 1927105 2011-04-17  
不错,不过个人感觉,要想把一个应用写好的话,得需要丰富的类库,
3 楼 ziyuewang 2011-04-12  
谢谢啊!多多交流!
2 楼 Durian 2011-04-12  
挺好。

我最不爱弄js
1 楼 ziyuewang 2011-04-08  
目前只完成了删除功能,其它功能会陆续完成的!

相关推荐

    基于jquery写的一个表情组件

    基于jquery写的一个表情组件,供大家一起共同分享学习。

    基于jquery的Grid插件

    支持分页、排序、列模型渲染等基本功能,数据模型等。支持行的双击事件。

    基于jQuery 开发的几个组件 (Table, Grid ,Menu ,Layout)

    本文将深入探讨如何使用jQuery开发四个关键的前端组件:Table、Grid、Menu和Layout,以提高Web应用的用户体验和交互性。 1. jQuery Table组件 jQuery Table组件用于展示结构化的数据,例如报表或数据库查询结果。...

    Sigma-Grid.zip_grid_grid jquery_html jquery_jquery grid

    Sigma Grid 是一个基于 jQuery 的数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、过滤、编辑等,适用于各种数据密集型的Web应用。这个压缩包包含了关于 Sigma Grid 的使用指南和...

    jquery Grid Demo

    jQuery Grid 是一个强大的数据展示和管理工具,它基于 jQuery 库,提供了丰富的功能,包括数据的排序、查询、分页等,使得开发者能够快速构建交互式的表格应用。在本篇文章中,我们将深入探讨 jQuery Grid 的核心...

    JqueryGrid 无刷新分页

    jQueryGrid是一款基于jQuery的表格插件,它可以与各种后端技术(如ASP.NET、PHP、Java等)配合使用,提供丰富的功能,如排序、过滤、编辑、添加、删除、分页等。它支持JSON、XML、AJAX等多种数据格式,便于与服务器...

    jquery grid demo

    `jQuery Flexigrid` 是一个基于 `jQuery` 的网格插件,它提供了灵活的数据网格布局,包括分页、排序、搜索和列自定义等功能。在 `JQueryGridDemo` 中,你可以看到以下关键特性: 1. **分页**:Flexigrid 支持分页...

    自己写的jquery 插件 grid

    这个项目的标题和描述揭示了它是一个基于jQuery的自定义插件,目标是构建一个类似于表格(grid)的数据展示和管理工具。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    基于jQuery的HTML5移动端音乐播放器源码.zip

    基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器...

    用jquery 实现grid 实例

    本文将深入探讨如何使用jQuery实现一个Grid实例,以展示数据并提供交互功能。Grid是一种常见的布局方式,常用于数据展示,如表格形式的数据列表。 首先,我们需要理解jQuery的基本语法和核心概念。jQuery通过选择器...

    基于jQuery的Ajax聊天室程序

    【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用,它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页...

    jquery ui实现的grid

    《jQuery UI实现的Grid详解》 在Web开发中,数据展示和操作是不可或缺的一部分,而jQuery UI中的Grid组件为此提供了一种强大且灵活的解决方案。本文将深入探讨jQuery UI实现的Grid,帮助开发者理解其核心功能和使用...

    jquery grid插件 -- 编辑表格

    jQuery Grid 是基于 jQuery 的一个开源项目,由 Trirand 公司开发,它提供了一个高度定制化的网格视图,支持数据分页、排序、过滤、编辑等功能。在2011年的这个更新中,我们可以看到博客作者BFMaster分享了关于如何...

    Jquery 实现列的拖动 jquery grid

    jQuery Grid通常基于jQuery UI,因此需要确保页面中已经包含了这两个库的CSS和JS文件。例如: ```html &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt; ...

    jquery grid 插件

    jQuery Grid是基于jQuery的一个强大的数据网格组件,它允许开发者在网页上展示大量的结构化数据,并提供诸如分页、排序、搜索、过滤、编辑等交互功能。这个自编的jQuery Grid插件,旨在简化开发流程,提高代码复用性...

    Another JQuery Grid Plugin —— MagicGrid 插件

    MagicGrid is a small and flexible JQuery grid plugin. Although it only provide basic grid function, good design model give it great flexibility. It is open source and totally free. Before your start, ...

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....

    jquery的强大Grid控件

    7. **ASP.NET集成**:提到的例子是基于ASP.NET的,这意味着jQuery Grid与微软的Web开发框架有良好的集成,开发者可以利用.NET的强大力量结合Grid的前端特性,实现高效的数据管理应用。 在压缩包中,我们看到以下几...

    jquery网页表格插件pqgrid-2.4.1.zip

    《jQuery网页表格插件PQGrid 2.4.1详解》 在Web开发中,数据展示是不可或缺的一部分,尤其在大数据量、多列信息的场景下,一个强大的表格插件能够极大地提升用户体验。PQGrid就是这样一款优秀的jQuery表格插件,它...

    基于jquery的广告轮播

    【标题】:“基于jQuery的广告轮播” 在网页设计中,广告轮播是一种常见的元素,用于展示多张图片或信息,以吸引用户的注意力并提供动态的用户体验。"基于jQuery的广告轮播"是指利用JavaScript库jQuery实现的这种...

Global site tag (gtag.js) - Google Analytics