数据与视图分离2

1.用简单的方式操作table,现在有一个普通的table,比如要编辑某一行数据

  1.1获取选中的row

  1.2遍历row的cell

  1.3将得到的数据赋值给弹出框

  1.4保存,上传给服务器

  1.5服务器响应完成,重新给row的cell赋值

这个是比较传统的方式,在1.2这一步比较麻烦,因为每获取一个值就需要首先得到一个cell,显得非常臃肿,它可能是这样的

var obj={};
obj.p1=dom1.value;
obj.p2=dom2.value;
obj.p3=dom3.value;
obj.p4=dom4.value;
obj.p5=dom5.value;

而且获取table 内的dom也并不是一件欢快的事,太无聊了,现在我们使用一个比较容易的方法来获取数据

2.用另一个方法来操作table

  2.1声明一个数组,如objList

  2.2将数据push进去

  2.3给每一行row添加一个id

当我们需要编辑的时候

  2.4获取选择的row的id

  2.5根据id在objList中找到这个对象

  2.6将数据赋值给弹出框

  2.7保存,上传给服务器

  2.8服务器响应完成,重新给row赋值

  2.9更新objList

获取数据的代码长这个样子

 var id=dom.id;
 var obj=objList.select("id",id);

我在这里给数组的原型写了一个select方法,具体代码在上一篇博客中

更新数组的代码长这个样子

var obj=返回的结果;
var index=objList.getIndex("id",obj.id)
objList.splice(index,1,obj);

getIndex方法同上

各位看官到这里应该明白我的意思了,获取dom元素的值是件麻烦事,尤其是当数据非常多的时候,需要一个一个读取,异常恶心,于是我就搞了一个堆放数据的Model,并用id和dom元素进行关联,仅此而已,各位大大不要吐槽我,我是菜鸟

时间: 2024-10-05 04:53:39

数据与视图分离2的相关文章

记一次数据、逻辑、视图分离的原生JS项目实践

一切的开始源于这篇文章:一句话理解Vue核心内容. 在文章中,作者给出了这样一个思考: 假设现在有一个这样的需求,有一张图片,在被点击时,可以记录下被点击的次数. 这看起来很简单吧, 按照上面提到到开发方式,应该很快就可以搞定. 那么接下来,需求稍微发生了点变动, 要求有两张图片,分别被点击时,可以记录下各自的点击次数.这次似乎也很简单,只需把原先的代码复制粘贴一份就可以了. 那么当这个需求变成五张图片时,你会怎么做? 还是简单复制粘贴吧,这样完全可以完成这个需求,但是你会觉得很别扭,因为你的代

3 视图分离

在讲解session和kookie的应用之前,我们必须将代码进行适当的分离.如果把页面的html与php写在一起,那么就表示1个文件由2个人负责(网页设计师负责html代码,程序员负责php代码),若这2个人同时更新文件,则会造成混乱,为了方便管理,一般会把视图(前端html)分开放置,并由php加载. 这样我们通过浏览器访问的是php文件,html文件由php文件负责加载. 1 创建文件夹 回到我们的wlvsoft项目,由于现在都是针对后台编写功能,因此在wlvsoft目录下创建admin文件

数据绑定和数据网格视图(DataGridView)控件

数据绑定和数据网格视图(DataGridView)控件 数据网格视图控件,不像我们前面看到的控件,它可以显示多个列,但是,数据必须格式化,使数据网格知道要显示哪一列.有两种实现方法:一个是把数据网格视图绑定到数据表(DataTable),另一个是把网格到绑定对象列表,对象有许多属性,不同的属性就成为网格的列. 下面的例子是一种简单的解决方案,绑定到数据集(DataSet): open System open System.Collections.Generic open System.Confi

Object.defineproperty实现数据和视图的联动

Object.defineproperty语法 在一个对象上定义新的属性 var o = {}; // 创建一个新对象 // Example of an object property added with defineProperty with a data property descriptor Object.defineProperty(o, "a", {value : 37, writable : true, enumerable : true, configurable :

专门用来显示大量数据的视图:AdapterView(1)

AdapterView是一种用来展示大量数据的视图对象,AdapterView的内容一般是包含相同格式资源的控件,查阅Android文档知类的定义: 从上可知AdapterView直接继承ViewGroup,间接继承View,因此它是一个系统组件,使用它,一般是直接使用它的子类,它的常见子类有ListView.Spinner,GridView和Gallery. 查看AdapterView源码注意到,AdapterView类后面跟着泛型. AdapterView的常用子类介绍: 1.ListVie

1.2列表显示的三元素:数据、视图、适配器

一.列表显示的三元素:数据.视图.适配器 1.ListView这个组件用于显示: 2.适配器用于绑定数据,即将数据映射到ListView上: 3.数据需映射到ListView的数据可以是字符串.图片或者基本的组件. 二.一般R文件报错,有很大的可能是layout的布局文件出错,记得保存后在build-clean project中clean一下,恢复文件. 三:适配器的类型: 1.ArrayAdapter  只能显示一行字. 2.SimpleAdapter 有最好的扩充性,可以定义出各种各样的布局

利用Haproxy对Discuz实现数据的动静分离

一,实验目的 利用Haproxy+Discuz实现数据的动静分离 二,实验模型 三,实验环境 四,实验内容 1,首先在node2,3上安装http服务,安装PHP 2,提供NFS文件共享存储 配置node2的web根目录为nfs共享目录为挂载在node3的文件根目录下. node3: mount -t nfs 172.16.18.1:/var/www/html/upload   /var/www/html/upload 3,在node2上部署Discuz论坛 将Discuz解压到站点根目录下.进

利用object.defineProperty实现数据与视图绑定

如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object.defineProperty(people,"name",{ value: 'lin' }) console.log(people.name);//lin 可以看到defineProperty的基本用法就是给一个对象添加一个新属性.上面的代码就是给people对象添加了一个属性name,

10天学会phpWeChat——第三天:从数据库读取数据到视图

在第二天,我们创建了我们的第一个phpWeChat功能模块,但是比较简单.实际生产环境中,我们不可能有如此简单的需求.更多的情况是数据存储在MySql数据库中,我们开发功能模块的作用就是将这些数据从MySql读取并通过视图多样化的呈现给用户. 今天我们进入<10天学会phpWeChat>系列教程的第三天:从数据库读取数据到视图. 一.首先,我们创建一个MySql数据文章表(pw_wechat_hello_article)用来存储要显示给用户的数据. 为了简单明了,这个表我们只保留3个字段: I