- 浏览: 40290 次
- 性别:
- 来自: 济南
最新评论
-
hepeng421:
BoneWG 写道hepeng421 写道前端其实对技术的多样 ...
前端开发工程师---技术路线图 -
xiaguangme:
gaokuitai 写道这张图貌似是不豆瓣网的张克军老先生的图 ...
前端开发工程师---技术路线图 -
gaokuitai:
这张图貌似是不豆瓣网的张克军老先生的图……看过一次,伤心一次… ...
前端开发工程师---技术路线图 -
nianshi:
简单就是美
Javascript 看看黑客怎么写的 -
廢廢廢:
zhex 写道为什么要新建一个Func, 直接像下面这样不可以 ...
JavaScript实现继承---extend函数
截图 :
$(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 } ; }() ;
评论
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
我最不爱弄js
1 楼
ziyuewang
2011-04-08
目前只完成了删除功能,其它功能会陆续完成的!
发表评论
-
JavaScript实现的计算器(一种全新的继承方式,模拟多态,策略模式)
2011-04-22 22:42 1341截图 : cal.js ... -
JavaScript实现继承---extend函数
2011-04-19 18:05 4181/* Extend Function */ functi ... -
JavaScript---Tooltip提示(很早以前写的)
2011-04-18 16:07 1568截图 : 代码 : <!DOCTYP ... -
JQuery遮罩层
2011-04-18 15:59 3767以下是截图 : 代码 : &l ... -
简洁的表单验证器---FormValidator
2011-04-15 12:53 1091说明 : 代码逐步完善,结构已定好,和大家分享,大家多多指点 ... -
短小简洁的ImageSlider
2011-04-15 01:23 1402截图 : <!DOCTYPE html PU ... -
JavaScript模拟数据库curd(包含数据导入导出,操作日志)
2011-04-13 17:22 1021说明 : 正在开发中 截图 : <script ... -
自己写的XGrid O(∩_∩)O~
2011-04-12 14:00 882<script type="text/java ... -
自己写的TagBOX---随机变换的字体颜色和大小
2011-04-11 17:25 1474<script type="text/java ... -
X-WebOS的界面雏形
2011-04-10 20:00 1214<!DOCTYPE html PUBLIC " ... -
右键小菜单练习---JavaScript
2011-04-10 16:15 908<script type="text/ja ... -
选项卡应用
2011-04-09 18:43 742<!DOCTYPE html PUBLIC &q ... -
FAQ小应用 O(∩_∩)O哈哈~
2011-04-09 14:24 913<style type="text/css ... -
自适应大小的MsgBox
2011-04-09 11:48 1196<style type="text/css ... -
短小快捷的EasyCombox (*^__^*) 嘻嘻……
2011-04-08 22:47 909<style type="text/c ... -
写一个分页插件分享给大家---PageToolkit
2011-04-08 16:17 1107you !
相关推荐
基于jquery写的一个表情组件,供大家一起共同分享学习。
支持分页、排序、列模型渲染等基本功能,数据模型等。支持行的双击事件。
本文将深入探讨如何使用jQuery开发四个关键的前端组件:Table、Grid、Menu和Layout,以提高Web应用的用户体验和交互性。 1. jQuery Table组件 jQuery Table组件用于展示结构化的数据,例如报表或数据库查询结果。...
Sigma Grid 是一个基于 jQuery 的数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、过滤、编辑等,适用于各种数据密集型的Web应用。这个压缩包包含了关于 Sigma Grid 的使用指南和...
jQuery Grid 是一个强大的数据展示和管理工具,它基于 jQuery 库,提供了丰富的功能,包括数据的排序、查询、分页等,使得开发者能够快速构建交互式的表格应用。在本篇文章中,我们将深入探讨 jQuery Grid 的核心...
jQueryGrid是一款基于jQuery的表格插件,它可以与各种后端技术(如ASP.NET、PHP、Java等)配合使用,提供丰富的功能,如排序、过滤、编辑、添加、删除、分页等。它支持JSON、XML、AJAX等多种数据格式,便于与服务器...
`jQuery Flexigrid` 是一个基于 `jQuery` 的网格插件,它提供了灵活的数据网格布局,包括分页、排序、搜索和列自定义等功能。在 `JQueryGridDemo` 中,你可以看到以下关键特性: 1. **分页**:Flexigrid 支持分页...
这个项目的标题和描述揭示了它是一个基于jQuery的自定义插件,目标是构建一个类似于表格(grid)的数据展示和管理工具。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器...
本文将深入探讨如何使用jQuery实现一个Grid实例,以展示数据并提供交互功能。Grid是一种常见的布局方式,常用于数据展示,如表格形式的数据列表。 首先,我们需要理解jQuery的基本语法和核心概念。jQuery通过选择器...
【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用,它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页...
《jQuery UI实现的Grid详解》 在Web开发中,数据展示和操作是不可或缺的一部分,而jQuery UI中的Grid组件为此提供了一种强大且灵活的解决方案。本文将深入探讨jQuery UI实现的Grid,帮助开发者理解其核心功能和使用...
jQuery Grid 是基于 jQuery 的一个开源项目,由 Trirand 公司开发,它提供了一个高度定制化的网格视图,支持数据分页、排序、过滤、编辑等功能。在2011年的这个更新中,我们可以看到博客作者BFMaster分享了关于如何...
jQuery Grid通常基于jQuery UI,因此需要确保页面中已经包含了这两个库的CSS和JS文件。例如: ```html <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> ...
jQuery Grid是基于jQuery的一个强大的数据网格组件,它允许开发者在网页上展示大量的结构化数据,并提供诸如分页、排序、搜索、过滤、编辑等交互功能。这个自编的jQuery Grid插件,旨在简化开发流程,提高代码复用性...
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, ...
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....
7. **ASP.NET集成**:提到的例子是基于ASP.NET的,这意味着jQuery Grid与微软的Web开发框架有良好的集成,开发者可以利用.NET的强大力量结合Grid的前端特性,实现高效的数据管理应用。 在压缩包中,我们看到以下几...
《jQuery网页表格插件PQGrid 2.4.1详解》 在Web开发中,数据展示是不可或缺的一部分,尤其在大数据量、多列信息的场景下,一个强大的表格插件能够极大地提升用户体验。PQGrid就是这样一款优秀的jQuery表格插件,它...
基于jQuery的猫鼠追逐游戏的完整代码.html基于jQuery的猫鼠追逐游戏的完整代码.html基于jQuery的猫鼠追逐游戏的完整代码.html基于jQuery的猫鼠追逐游戏的完整代码.html基于jQuery的猫鼠追逐游戏的完整代码.html基于...