html数据绑定表格.docx

html数据绑定表格.docx

《html数据绑定表格.docx》由会员分享，可在线阅读，更多相关《html数据绑定表格.docx（5页珍藏版）》请在冰豆网上搜索。

html数据绑定表格

竭诚为您提供优质文档/双击可除

html数据绑定表格

　　篇一：

一个可绑定数据源的jquery数据表格插件

　　一个可绑定数据源的jquery数据表格插件

　　固定表头

　　列宽可调整

　　单击列头可排序

　　双击单元格可编辑

　　可绑定数据源

　　看下效果吧:

　　html-模板代码：

　　复制代码代码如下:

　　姓名

　　性别

　　年龄

　　住址

　　{姓名}

　　{性别}

　　{年龄}

　　{住址}

　　jsascript代码：

　　复制代码代码如下:

　　//测试数据

　　vardatajsonstr={tablename:

"",rows:

[{"姓名":

"曹操","性别":

"男","年龄":

"51","住址":

"许昌"},{"姓名":

"诸葛亮","性别":

"男","年龄":

"40","住址":

"南阳"},{"姓名":

"周瑜","性别":

"男","年龄":

"40","住址":

"江东"},{"姓名":

"大乔","性别":

"女","年龄":

"30","住址":

"江东"},{"姓名":

"小乔","性别":

"女","年龄":

"28","住址":

"江东"},{"姓名":

　　龄":

"40","住址":

"南阳"},{"姓名":

"周瑜","性别":

"男","年龄":

"40","住址":

"江东"},{"姓名":

"大乔","性别":

"女","年龄":

"30","住址":

"江东"},{"姓名":

"小乔","性别":

"女","年龄":

"28","住址":

"江东"}]};

　　//清空数据

　　$（#test）.datagridclear（）;

　　//设定行样式

　　$（#test）.datagridsetitemclass（"tr1","tr2","trhover"）;

　　//绑定数据，并设置宽度高度

　　$（#test）.datagrid（"100%",200,datajsonstr）;

　　结构示意图:

　　如何根据html模板创建datagrid整个结构

　　1.首先创建表头主体等各区域:

　　复制代码代码如下:

　　tablebody.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.find（.tableheadarea）;

　　tablebody.data（tablebodyarea,tablebodyarea）;

　　tablebody.data（tableheadarea,tableheadarea）;

　　上面代代中红色高亮tablebody为表主体,tablehead为表头

　　2.创建表头

　　复制代码代码如下:

　　tablebody.find（.header）.clone（）.prependto（tablehead）;

　　tablebody其实便是html模板table,将.header的行移到到表头表格中作为表头.

　　3.创建表主体

　　创建表主体,其实便是根据数据源及模板循环创建每一行,这里用了上篇文章提到的Repeater来创建,详细请看用javascript实现Repeater.

　　4.处理当列过多时横向滚动条的问题

　　复制代码代码如下:

　　tablebodyarea.scroll（function（）{

　　varml=0-parseint（tablebodyarea.attr（scrollleft））;

　　tablehead.css（margin-left,ml）;

　　}）;

　　tablebodyarea为tablebody外包裹的一个div

　　5.如何实现单元格编辑

　　双击td时在td中动态插入一个文件本框为将td的innerhtml给文本框，在文本焦点失去时，将文本框值赋给td的innerhtml，将移除文本框代码如下：

　　复制代码代码如下:

　　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实现的数据双向绑定

　　双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的ui，反之亦然。

换句话说，如果我们有一个user对象，这个对象有一个name属性，无论何时你对user.name设置了一个新值，ui也会展示这个新的值。

同样的，如果ui包含一个用于数据用户名字的输入框，输入一个新值也会导致user对象的name属性发生相应的改变。

许多流行的javascript框架，像ember.js,angular.js或者knockoutjs都会把双向数据绑定作为其中的主要特性来宣传。

这并不意味着从头开始实现它很难，也不意味着当我们需要这种功能的时候，使用这些框架是我们唯一的选择。

内部的潜在思想事实上是相当基础的，实现它可以归纳为以下三点：

1.我们需要一种方式确定哪个ui元素绑定在哪个属性上。

2.我们需要监控属性和ui的变化3.我们需要把所有绑定的对象和ui元素的变化传播出去。

尽管有好多种方式去实现这几点，一种简单高效的方法是我们通过发布订阅者模式来实现。

方法很简单：

我们可以使用定制的data属性作为html代码中需要绑定的属性。

所有的绑定在一起的javascript对象和dom元素将会订阅这个发布订阅对象。

任何时候我们检测到无论是javascript对象亦或是html的input元素的变化，我们都是把事件代理传递给发布订阅对象，然后通过它把所有发生在绑定的对象和元素的的变化传递和广播出去。

一个用jquery实现的简单例子

　　通过jquery实现我们上面讨论的东西是相当简单明了的，因为作为一个流行的库，它让我们很简单的实现订阅和发布dom事件，同时我们也可以定制一个：

　　functiondatabinder（object_id）{

　　//useajqueryobjectassimplepubsub

　　varpubsub=jquery（{}）;

　　//weexpecta`data`elementspecifyingthebinding

　　//intheform:

data-bind-="　　"

　　vardata_attr="bind-"+object_id,

　　message=object_id+":

change";

　　//listentochagneeventsonelementswithdata-bindingattributeandproxy

　　//thentothepubsub,sothatthechangeis"broadcasted"toallconnectedobjects

　　jquery（document）.on（"change","[data-]"+data_attr+"]",function（eve）{var$input=jquery（this）;

　　pubsub.trigger（message,[$input.data（data_attr）,$input.val（）]）;}）;

　　//pubsubpropagateschagnestoallboundelemetns,settingvalueof//inputtagsorhtmlcontentofothertags

　　pubsub.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（uid）{

　　varbinder=newdatabinder（uid）,

　　user={

　　attributes:

{},

　　//theattributesetterpublishchangesusingthedatabinderpubsubset:

function（attr_name,val）{

　　this.attributes[attr_name]=val;

　　binder.trigger（uid+":

change",[attr_name,val,this]）;

　　},

　　get:

function（attr_name）{

　　returnthis.attributes[attr_name];

　　},

　　_binder:

binder

　　};

　　//subscribetopubsub

　　binder.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）{

　　//createasimplepubsubobject

　　varpubsub={

　　callbacks:

{},

　　on:

func