当前位置： →
→ 基于jQuery的动态表格插件jquery
基于jQuery的动态表格插件jquery
& 作者及来源： 互联网 &
&收藏到→_→：
摘要: 基于jQuery的动态表格插件_jquery
"基于jQuery的动态表格插件jquery"：：
在这里我们需要控制用户的输入验证，表格的添加删除，用户输入数据的统计聚合，还有相应的计算列比如商品的总价=商品的单价*商品数量，再如，同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的 。本插件则简单的处理了这些繁琐的事情。 插件属性说明： 1：rowtemplate：这是插入列的模板，在模板中我们的序号这种行号标示的需要rownum 的class。在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组，再如id这种需要唯一的属性，需要{0}的占位符。同时在我们的表格处理中有些行为统计行或者数据的固定行，是不会被用户删除的，则需要fixed=true。以及每个输入或者label等控件，需要回传提取值的需要有property=“propertyname”标示。 2：addtrigger：这是一个触发增加行的 选择器。 3：addposition：是插入行的插入位置，默认在last最后，但是应我们的需求，可能在最后是汇总行等固定行，所以还添加的三种方式：first，还有就是数值，正数表示从开始行开始计算，负数表示从最后开始计算。 4：removetrigger：删除标示，它是一个数组，可以有多个删除按钮，同时数组的每个对象也是一个对象有selector触发按钮的 选择器，handler触发的处理方式，取值有first删除第一行,last最后一列,current当前列，所有的删除都是删除非fixed=true的列。 5：同时可以通过$(selector).updatesortnum();替换所有的td 带有rownum的行号列。其实这里我考虑可以去掉td的限制。 6：$（rowselector）.getrowobj():获取以property为属性的javascript行对象。 7:$(tableselector).gettableobj():获取table的以property为属性的javascript数组对象，是行对象的集合（数组）。 8：getsource（savehiddentfield）:获取xml组织的属性集，如果传入了savehiddentfield选择器，这会自动赋值在savehiddentfield上。 这里有item: , root: item为每行数据xml的节点默认item，root为xml根节点默认root。获取了xml，我们就可以在后台直接解析xml，或者是用dataset.readxml()直接转化为datatable。 8：$(inputselector).getvalue():获取控件的值：支持text，label，checkbox，radio，label，td，textarea的取值。其中radio取值选中value，checkbox取值为所有选中行value的“，”号分隔字符串。 9：calculates：计算汇总，是一个数组对象，具有selector：汇总显示控验证财务的实际支出额不能高于审批额此文来自: 马开东博客
转载请注明出处 网址：
，而审批额不能高于实际的预算额件的选择器，column：汇总的属性，对应我们上面所附加的property属性。func：为汇总处理方式：支持聚合函数:sum,max,min,count,avg,以及用户自定义函数（必须具有返回值），传入参数为一个整列property取值数组array。 10：calculatescolumn：计算列，同样是一个 数组，具有trigger数组，表示触发计算的属性property，column计算列的property，func自定义处理函数。（这里废话几句本想用表达式，使用eval处理自动计算，但是觉得需要的变化太多不好控制，所以不如交给用户实现一个函数作为代理委托，作为回调函数）；这里可以用来处理，商品的总价=商品的单价*商品数量，一个上面所说的验证财务的实际支出额不能高于审批额，而审批额不能高于实际的预算额。同时这里也可以作为验证的。 在这个插件中没有数据类型的验证，由于验证的需要变化太大，太多，而且我们一级有了很多优秀的jquer验证插件，配合使用将用很实用。同时也可以自己控制：比如我的两个简单的验证： 复制代码 代码如下: $(".datetime").live("focus", function() { wdatepicker({ readonly: true, datefmt: 'yyyy年mm月dd日' })//mydate97 }); $(".number").live("keyup", function() { this.value = this.value.replace(/[^-\d\.]/g, ''); }).live("keydown", function(e) { if (e.which == 189) { $(this).val(-1 * parsefloat($(this).val())).trigger("change"); e.stoppropagation(); e.preventdefault(); } });
上面废话太多，下面直接demo： 哦忘了提醒一句，在这个插件中要求table遵循标准w3c，thead，tbody。在thead中我们可以自己加入表头设置，不管多复杂的多表头结构。 复制代码 代码如下: &%@ page language="c#" autoeventwireup="true" codefile="mefaspnet.aspx.cs" inherits="mefaspnet" %& &!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd%22& &html xmlns="http://www.w3.org/1999/xhtml%22& &head runat="server"& &title&&/title& &script src=" / -1.4.2. " type="text/javascript"&&/script& &script src=" /dynamictable. " type="text/javascript"&&/script& &script type="text/javascript"& function m(v) { return v[0]+100; } $(function() { $("table").dynamictable( { addtrigger: ".add", removetrigger: [{ selector: ".delete", handler: "first" }, { selector: ".deleterow", handler: "current"}], rowtemplate: "&tr&&td class='rownum' property='sortnum'&&/td&&td& &input type='text' property='name'/&&/td&&td&&input type='text' property='age' class='number'/&&/td&" + "&td& &input type='radio' property='sex' value='1' name='test{0}' style='width:10px'/&nan&br/&&input type='radio' style='width:10px' value='0' name='test{0}'/&nv&/td&" + "&td&&input type='text' property='email'/&&/td&&td&&input type='text' property='phone'/&&/td&&td&&input type='text' property='date' class='datetime'/&" + "&td&&input property='checkbox' type='checkbox' value='1' style='width:10px'/&test1&input type='checkbox' value='2' style='width:10px'/&test2&/td&" + "&/td&&td style='text-align:'&&a class='deleterow' style='cursor:'&" + "&img alt='删除' src='image/delete.png' style='border: 0 width: 16 height: 16px' /&删除&/a&&/td&&/tr&", addposition: -1, calculates: [{ selector: "#totalage", column: "age", func: "sum"}], calculatescolumn: [{ trigger: ["age", "name"],column:"date", func: function(o,rowobj) { o.value =parsefloat( rowobj.age) +parsefloat( rowobj.name); } }] } ); }); &/script& &style type="text/css"& .tablestyle { width: 99%; height: overflow: border: 1px solid #4772 border-collapse: background: #d8 margin: 2 } .tablestyle thead td { text-align: } .tablestyle th, td { border: solid #4772 border-width: 0 1px 1px 0; padding: 2 } .tablestyle th { text-align: font-weight: } .tablestyle td { text-align: background: # } .tablestyle .title { width: 99%; font-size: line-height: 20 text-align: background: url(images/right_head.jpg) repeat-x; padding: 0; } table.grid th { width: 99%; height: 16 overflow: border: 1px solid #4772 border-collapse: background: #d8 padding-left: 1 font-weight: text-align: } table input { border: 0 width: 98%; } &/style& &/head& &body& &form id="form1" runat="server"& &table style="width: 100%;" border="1" cellpadding="0" cellspacing="0" class="tablestyle"& &thead& &tr style="text-align:"& &td rowspan="2"& 序号 &/td& &td rowspan="2"& 姓名 &/td& &td rowspan="2"& 年龄 &/td& &td rowspan="2"& sex &/td& &td colspan="2"& 联系信息 &/td& &td rowspan="2"& 日期 &/td& &td rowspan="2"& test checkbox &/td& &td rowspan="2"& &a class="add"& &img alt="增加" src="image/add.png" style="border: 0 width: 16 height: 16px" /&增加&/a&&& &a class="delete" style="cursor:"& &img alt="删除" src="image/delete.png" style="border: 0 width: 16 height: 16px" /&删除&/a& &/td& &/tr& &tr& &td& email &/td& &td& 电话 &/td& &/tr& &/thead& &tbody& &tr fixed="true"&&td colspan="9"&&/td&&/tr& &/tbody& &/table& &input type="text" id="totalage" /& &input type="button" value="getsource" onclick="alert($('table').getsource());" /& &input type="button" value="getobject" /& &div id="resultdiv"&&/div& &script type="text/javascript"& $("input:[value='getobject']").live("click", function() { var obj = $("table").gettableobj(); $("#resultdiv").html(""); for (var i = 0; i & obj. i++) { for (var o in obj[i]) { $("#resultdiv").html($("#resultdiv").html() + "&&" + o + "-&" + obj[i][o]); } $("#resultdiv").html($("#resultdiv").html() + "&br/&"); } }); &/script& &/form& &/body& &/html&
测试代码比较乱，没有考虑实际性质，比如标题日期，作为了计算列，年龄作为了统计列，在后台的input汇总，敬请原谅。有机会在好好的写几个demo。有什么bug，敬请大家提出，我会尽快修复。同时也谢谢各位的不舍赐教。 作者：破 浪
搜索此文相关文章： 此文来自: 马开东博客
网址: 站长QQ
基于jQuery的动态表格插件jquery_脚本之家相关文章
脚本之家_总排行榜
脚本之家_最新
脚本之家_月排行榜
脚本之家_周排行榜
脚本之家_日排行榜当前位置： >
> jQuer+CSS3实现的滑动手风琴菜单代码
jQuer+CSS3实现的滑动手风琴菜单代码
脚本大小：195KB
软件语言：简体中文
脚本类型：
脚本授权：免费软件
更新时间：
脚本类别：菜单导航
相关链接： &&
应用平台：
网友评分：
内容介绍热点排行下载地址相关内容
jQuery treeview 是一款来自jQuery的树形菜单插件，支持无限制扩展，支持动态添加菜单项，可以配合ASP/PHP/ASP.NET等动态语言完成漂亮的无刷新动态树状菜单，当前版本号 v1
又一个简洁实用的jQuery&黑色导航菜单，鼠标点击菜单会滑开拉出二级的菜单，二级菜单如果有第三级，则会继续滑开第三级，相信级别上可以满足你的使用，学习j&
同为盛市、县三级联动菜单，但程序执行的效率是不一样的，前段时间因工作需要做的一个小东西，虽然小，但工作量很大，因为全国的盛市、县数据全部集中在XML文件中，
JSTree 大型树形菜单控件（基于jQuery），包含有近50种实例，应用当然就非常广泛了，有采用XML的，有使用动态的，效果图如上。早前发现了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS，稍作修改实现了多级下拉，并实现了 ASP.NET 中通过输出 HTML 动态创建版本，有兴趣的童鞋
仿京东商城商品分类菜单效果代码，需要的朋友可以参考下。&
用jQuery 制作的折叠菜单及图片特效，图片被嵌入在折叠菜单中，具体的效果不太好形容，希望大家有下载亲自测试体验一下，设计得挺精美，颜色清新，可以方便用到你的CSS+JavaScript仿京东商城左侧弹出式菜单完整版，京东商城不知您知道不.&
黑色风格的jQuery漂亮下拉菜单，动感仿Flash效果，下拉带动画效果，这个不是鼠标放上就下拉，需要鼠标点击菜单项旁边的红箭头，这样实际比感应鼠标的更惹人喜欢，更一款仿京东商城商品页面配送地区选择城市三级联动代码
jQuer+CSS3实现的滑动手风琴菜单代码
CopyRight &
JB51.Net , All Rights ReservedHTML5/CSS3
强烈推荐常用jQuery百叶窗风格焦点图插件 osSlider源码特效 强烈推荐常用jQuery多元素动画滑块焦点图插件代码特效 扁平化jQuery手风琴Banner代码 jQuery轻量级全屏自适应焦点图插件 poposlides源码效果 jQuery轮播图插件FrameCarousel代码效果 支持触摸滑动的带缩略图jQuery幻灯片效果代码 [推荐]一款简单使用的jQuery全屏响应式轮播图插件 JqueryReslider源码特效 作者推荐新版迅雷影音官网jQuery焦点图源码 [推荐]一款腾讯娱乐频道原生JAVASCRIPT焦点图源码 [推荐]一款jQuery响应式个性触屏幻灯片插件 sampSlider代码效果 强烈推荐简单使用的猎豹官网宽屏jQuery焦点图源码（支持触屏） 动漫网站jQuery图文切换手风琴效果 jQuery全屏图片左右滚动焦点图源码 强烈推荐五屏jQuery手风琴图片切换焦点图源码 多风格响应式jQuery焦点图插件 OkaSlider jQuery响应式全屏图片轮播插件代码 左右滚动jQuery焦点图插件 SliderJAVASCRIPT源代码特效 5屏jQuery上下轮播焦点图源码 作者推荐多屏垂直滚动jQuery宽屏幻灯片代码 OwlCarousel制作多图多屏jQuery幻灯片代码 OwlCarousel制作带进度条的可触屏jquery焦点图效果 作者推荐汇图网大屏jQuery焦点图插件代码 作者推荐原生JAVASCRIPT左右循环滚动幻灯片代码 强烈推荐满屏背景图片切换jQuery焦点图源码 SliderPro制作左右布局带缩略图jQuery轮播图效果 SliderPro插件制作响应式全屏左右滚动焦点图源码 SliderPro制作带缩略图可触摸焦点图源码 作者推荐简单使用的四屏jQuery带缩略图图文切换焦点图源码 基于idangerous.swiper插件的触摸图文自适应焦点图源码 jQuery图片3D旋转木马轮播焦点图源码
素材频道&提供海量 、、、、、、、、、、、、、、、、、、、、
等设计素材免费下载。
jiaoben123 分享在
jiaoben123 分享在
jiaoben123 分享在
jiaoben123 分享在
推荐一款超清新欣赏材料 [推荐]一款高清下载素材 下载素材 下载材料 强烈推荐高清下载素材 推荐一款超清新欣赏材料 [推荐]一款超清新欣赏素材 [推荐]一款超清新欣赏材料 强烈推荐高清下载材料 [推荐]一款高清欣赏材料 下载素材 推荐一款高清欣赏素材 [推荐]一款高清欣赏素材 推荐一款高清欣赏素材 强烈推荐超清新欣赏素材 [推荐]一款高清欣赏材料 蓝色简约大气政府网站模板PSD素材 时尚简约儿童网站模板PSD素材 [推荐]一款蓝色大气简约旅游网站模板PSD素材 简约大气管业公司网站模板PSD素材 [推荐]一款装修装饰公司网站模板PSD素材 推荐一款装修建材行业网站模板PSD素材 强烈推荐综合类电商网站设计模板PSD素材 房产置业集团网站模板PSD素材 推荐一款精美音乐网站模板PSD素材 [推荐]一款高清游戏网站红色抽奖专题页面PSD素材 [推荐]一款简约干净传统企业网站模板PSD素材 蓝色大气海上运输公司网站模板PSD素材 房地产公司企业网站模板PSD素材 黑酷质感企业网站模板PSD分层素材
设计频道&提供海量 、、、、、、、、、、、、、、、、、、、、
等设计素材免费下载。
jiaoben123 分享在
jiaoben123 分享在
jiaoben123 分享在
jiaoben123 分享在
[推荐]一款质感复古木纹风格网页设计元素矢量素材 4款精美高光加载图片矢量素材 推荐一款超清新复古小清新网页导航矢量素材 强烈推荐网页搜索框大全矢量素材 信封风格留言界面矢量素材 各种水晶风格网页设计元素矢量素材 推荐一款复古风格网页导航条等元素矢量素材 4款不同颜色的网页登陆框矢量素材 [推荐]一款灰白凹凸网页按钮矢量素材 网页菜单导航大全矢量素材 简约干净的网页设计元素矢量素材 2款机械风格网页进度条矢量素材 [推荐]一款网页加载进度元素大全矢量素材 网页下载按钮和价格标签矢量素材 质感炫彩网页常用元素矢量素材 [推荐]一款蓝色立体网页按钮矢量素材 推荐一款网页“顶踩”大拇指按钮图案矢量素材 网页飘带元素和导航元素矢量图 一条精美的进度条矢量图源文件材料
服务器教程
使用HTML5技术开发的超酷颜色选择器HTML5体验改进的14条军规html标签的语义化之搜索引擎优化绘制SVG内容到Canvas的HTML5应用HTML5 Canvas中绘制矩形实例教程将HTML5封装成android应用APK文件的几种方法将HTML5封装成android应用APK文件的几种方法HTML5里的placeholder属性HTML5中对contenteditable属性的解释与规定你必须知道的28个HTML5特征、窍门和技术HTML5 对各个标签的定义与规定：baseHTML5 对各个标签的定义与规定：linkHTML5 对各个标签的定义与规定：styleHTML5 对各个标签的定义与规定：scriptHTML5 对各个标签的定义与解释：noscriptHTML5 对各个标签的定义与规定：bodyHTML5 对各个标签的定义与规定：sectionHTML5 对各个标签的定义与规定：article全方位了解HTML5HTML5中对id属性的定义与规定HTML5中对accesskey属性的解释与规定HTML5中对class属性的解释与规定HTML5新增标签和属性简介HTML5 对各个标签的定义与规定：titleHTML5 对各个标签的定义与规定：metaHTML5中对style属性的解释与规定JQuery中DOM事件绑定用法详解
作者：简明现代魔法
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JQuery中DOM事件绑定用法,实例分析了bind方法绑定事件的相关技巧,需要的朋友可以参考下
本文实例讲述了JQuery中DOM事件绑定用法。分享给大家供大家参考。具体分析如下：
在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：
bind( type [, data] , fn);
bind()方法有3个参数，说明如下。
第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。
第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用米绑定的处理函数。
可以发现，jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuer中对应的是click事件，而在JavaScript中对应的是onclick()函数。
按照需求，需要完成以下几个步骤。
1. 等待DOM加载完毕。
2. 找到“标题”所在的元素，绑定click事件。
3. 找到“内容”元素，将“内容”元素显示。
$(function(){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
$content.show();
与ready()方法一样，bind()方法也可以多次调用。
上面jQuery代码中有一个关键字this，与在JavaScript中的作用一样，this引用的是携带相应行为的DOM元素。为了使该DOM元素能够使用jQuery中的方法，可以使用$(this)将其转换为jQuery对象。
为了判断元素是否显示，可以使用jQuery中的is()方法来完成。在代码中，发现$(this).next("div.content")被多次使用，因此可以为它定义一个局部变量：$content。
上面的例子中，给元素绑定的事件类型是click，当用户单击的时候会触发绑定的事件，然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout，即当光标滑过的时候，就触发事件。需要进行以下几步操作。
1. 等待DOM加载完毕。
2. 找到“标题”所在的元素，绑定mouseover事件。
3. 找到“内容”元素，显示“内容”。
4. 找到“标题”所在的元素，绑定mouseout事件。
5. 找到“内容”元素，隐藏“内容”。
代码运行后，当光标滑过“标题”链接后，相应的“内容”将被显示。当光标滑出“标题”链接后，相应的“内容”则被隐藏。
代码如下：
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
在上面几个例子中，分别用bind()方法给“标题”绑定了click事件、mouseover事件和mouseout事件，绑定方法都一样。除此之外，bind0方法还能绑定其他所有的JavaScript事件。
像click、mouseover和mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似，实现的效果也相同，惟一的区别是能够减少代码量。
例如把上面的例子改写成使用简写绑定事件的方式，代码如下：
$(function(){
$("#panel2 h5.head").mouseover(function(){
$(this).next().show();
$("#panel2 h5.head").mouseout(function(){
$(this).next().hide();
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具