html数据绑定表格.docx

1、html数据绑定表格竭诚为您提供优质文档/双击可除html数据绑定表格篇一：一个可绑定数据源的jquery数据表格插件一个可绑定数据源的jquery数据表格插件固定表头列宽可调整单击列头可排序双击单元格可编辑可绑定数据源看下效果吧:html-模板代码：复制代码代码如下:姓名性别年龄住址姓名性别年龄住址jsascript代码：复制代码代码如下:/测试数据vardatajsonstr=tablename:,rows:姓名:曹操,性别:男,年龄:51,住址:许昌,姓名:诸葛亮,性别:男,年龄:40,住址:南阳,姓名:周瑜,性别:男,年龄:40,住址:江东,姓名:大乔,性别:女,年龄:30,住址:江东

2、,姓名:小乔,性别:女,年龄:28,住址:江东,姓名:龄:40,住址:南阳,姓名:周瑜,性别:男,年龄:40,住址:江东,姓名:大乔,性别:女,年龄:30,住址:江东,姓名:小乔,性别:女,年龄:28,住址:江东;/清空数据$(#test).datagridclear();/设定行样式$(#test).datagridsetitemclass(tr1,tr2,trhover);/绑定数据，并设置宽度高度$(#test).datagrid(100%,200,datajsonstr);结构示意图:如何根据html模板创建datagrid整个结构1.首先创建表头主体等各区域:复制代码代码如下:tab

3、lebody.addclass(tablebody);tablebody.wrap();varmytable=$(#+mytableid);tablebody.data(mytable,mytable);tablebody.before();vartablehead=mytable.find(.tablehead);tablebody.data(tablehead,tablehead);tablebody.wrap();tablehead.wrap();vartablebodyarea=mytable.find(.tablebodyarea);vartableheadarea=mytable.

4、find(.tableheadarea);tablebody.data(tablebodyarea,tablebodyarea);tablebody.data(tableheadarea,tableheadarea);上面代代中红色高亮tablebody为表主体,tablehead为表头2.创建表头复制代码代码如下:tablebody.find(.header).clone().prependto(tablehead);tablebody其实便是html模板table,将.header的行移到到表头表格中作为表头.3.创建表主体创建表主体,其实便是根据数据源及模板循环创建每一行,这里用了上篇文

5、章提到的Repeater来创建,详细请看用javascript实现Repeater.4.处理当列过多时横向滚动条的问题复制代码代码如下:tablebodyarea.scroll(function()varml=0-parseint(tablebodyarea.attr(scrollleft);tablehead.css(margin-left,ml););tablebodyarea为tablebody外包裹的一个div5.如何实现单元格编辑双击td时在td中动态插入一个文件本框为将td的innerhtml给文本框，在文本焦点失去时，将文本框值赋给td的innerhtml，将移除文本框代码如下：

6、复制代码代码如下:tablebody.find(td).live(dblclick,function()vartd=$(this);if(td.attr(editable)=true)vartext=td.text();varhtml=;td.html(html);td.addclass(tdediting);/$(this).find(.tdedittextbox).focus().focus().focus().focus();$(this).find(.tdedittextbox).blur(function()varval=$(this).val();篇二：简单的用javascript

7、实现的数据双向绑定双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的ui，反之亦然。换句话说，如果我们有一个user对象，这个对象有一个name属性，无论何时你对user.name设置了一个新值，ui也会展示这个新的值。同样的，如果ui包含一个用于数据用户名字的输入框，输入一个新值也会导致user对象的name属性发生相应的改变。许多流行的javascript框架，像ember.js,angular.js或者knockoutjs都会把双向数据绑定作为其中的主要特性来宣传。这并不意味着从头开始实现它很难，也不意味着当我们需要这种功能的时候，使用这些框架是我们唯一的选择。内部的潜在思想事实

8、上是相当基础的，实现它可以归纳为以下三点：1.我们需要一种方式确定哪个ui元素绑定在哪个属性上。2.我们需要监控属性和ui的变化3.我们需要把所有绑定的对象和ui元素的变化传播出去。尽管有好多种方式去实现这几点，一种简单高效的方法是我们通过发布订阅者模式来实现。方法很简单：我们可以使用定制的data属性作为html代码中需要绑定的属性。所有的绑定在一起的javascript对象和dom元素将会订阅这个发布订阅对象。任何时候我们检测到无论是javascript对象亦或是html的input元素的变化，我们都是把事件代理传递给发布订阅对象，然后通过它把所有发生在绑定的对象和元素的的变化传递和广播出

9、去。一个用jquery实现的简单例子通过jquery实现我们上面讨论的东西是相当简单明了的，因为作为一个流行的库，它让我们很简单的实现订阅和发布dom事件，同时我们也可以定制一个：functiondatabinder(object_id)/useajqueryobjectassimplepubsubvarpubsub=jquery();/weexpectadataelementspecifyingthebinding/intheform:data-bind-=vardata_attr=bind-+object_id,message=object_id+:change;/listentochag

10、neeventsonelementswithdata-bindingattributeandproxy/thentothepubsub,sothatthechangeisbroadcastedtoallconnectedobjectsjquery(document).on(change,data-+data_attr+,function(eve)var$input=jquery(this);pubsub.trigger(message,$input.data(data_attr),$input.val(););/pubsubpropagateschagnestoallboundelemetns

11、,settingvalueof/inputtagsorhtmlcontentofothertagspubsub.on(message,function(evt,prop_name,new_val)jquery(data-+data_attr+=+prop_name+).each(function()var$bound=jquery(this);if($bound.is()$bound.val(new_val);else$bound.html(new_val);););returnpubsub;至于javascript对象，下面是最小化的user数据模型实现的例子：functionuser(ui

12、d)varbinder=newdatabinder(uid),user=attributes:,/theattributesetterpublishchangesusingthedatabinderpubsubset:function(attr_name,val)this.attributesattr_name=val;binder.trigger(uid+:change,attr_name,val,this);,get:function(attr_name)returnthis.attributesattr_name;,_binder:binder;/subscribetopubsubbin

13、der.on(uid+:change,function(evt,attr_name,new_val,initiator)if(initiator!=user)user.set(attr_name,new_val););returnuser;现在，无论何时我们想要绑定一个对象的属性到ui上，我们只要在对应的html元素上设置合适的data属性。/javascriptvaruser=newuser(123);user.set(name,wolfgang);/htmlinput输入框上值得变化会自动的映射到user的name属性，反之亦然。大功告成！不需要jquery的实现方式现在的大部分项目一般jquery都已经在使用啦，所以上面的例子是完全可以接受的。但是如果我们需要完全不依赖jquery，那么该怎么实现呢？好吧，事实上其实也不难办到（特别是当我们把对ie的支持只提供ie8以上的支持）。最后，我们只是要通过发布订阅者模式来观察dom事件而已。functiondatabinder(object_id)/createasimplepubsubobjectvarpubsub=callbacks:,on:func