添加/删除表格中的记录

  我们的最终功能是在表格中添加删除

  我们通过单机工具栏上的按钮来实现添加删除

  当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦

  

  当用户点击删除按钮的时候,当前选中行被删除 并自动选中下一行, 当选中是最后一行 删除后 默认选中上一行.

  我们提供添加/删除事件来完成功能

提供一个可以添加、删除网格中的记录

  1.给添加按钮添加一个onClick 事件

  

toolbar.attachEvent("onclick",function(id){
if(id=="newContact"){ //'newContact' is the id of the button in the toolbar
var rowId=contactsGrid.uid(); //generates an unique id
var pos = contactsGrid.getRowsNum(); //gets the number of rows in grid
contactsGrid.addRow(rowId,["New contact","",""],pos); //adds a new row };
});

  添加方法接收三个参数:1.行的id 2.单元格的值 3.行的下标

  2.添加onAfterUpdate 事件 这个事件是在成功添加一条到数据库后触发

  

 "index.html"

var dpg = new dataProcessor("data/contacts.php");
dpg.init(contactsGrid); dpg.attachEvent("onAfterUpdate", function(sid, action, tid, tag){
if (action == "inserted"){
contactsGrid.selectRowById(tid); //selects the newly-created row
contactForm.setFocusOnFirstActive();//set focus to the 1st form's input
}
});

  setFocusOnFirstActive方法使得光标在表单的一个输入框中

  3.给删除添加一个点击事件

  

 "index.html"

toolbar.attachEvent("onclick",function(id){
if(id=="newContact"){
var rowId=contactsGrid.uid();
var pos = contactsGrid.getRowsNum();
contactsGrid.addRow(rowId,["New contact","",""],pos);
contactsGrid.selectRowById(rowId);
contactForm.setFocusOnFirstActive();
};
if(id=="delContact"){
var rowId = contactsGrid.getSelectedRowId();
var rowIndex = contactsGrid.getRowIndex(rowId);
if(rowId!=null){
contactsGrid.deleteRow(rowId);
if(rowIndex!=(contactsGrid.getRowsNum()-1)){
contactsGrid.selectRow(rowIndex+1,true);
} else{
contactsGrid.selectRow(rowIndex-1,true)
}
}
}});

  至此,相信你已经喜欢上了DHTMLX 这个web 前端框架。这一个简单的web项目我们就做完了

  参考这里 还有很多的示例教程

DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序教程(三)--添加一个菜单

    菜单的介绍 这篇我们介绍将菜单组建添加到上节中的布局中: 我们不对菜单做任何处理  只是在这里填充作为界面的一部分. 这里我们介绍的是dhtmlxMenu 组件. 这个组件的数据我们可以从XML或者J ...

  2. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  3. DHTMLX 前端框架 建立你的一个应用程序 教程(七)-- 添加筛选功能

    表格的过滤筛选 我们在每列第一行添加一个文本,用做数据的条件筛选. 我们还提供服务端的筛选 ,当有大量数据时 , 我们可以使用dhtmlxConnector 进行后台数据的筛选. 添加过滤器到表格列中 ...

  4. DHTMLX 前端框架 建立你的一个应用程序 教程(五)--添加一个表格Grid

    表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid  组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid( ...

  5. DHTMLX 前端框架 建立你的一个应用程序教程(四)--添加一个工具条toolbar

    工具条例子 样本如下: 这里我们使用的是dhtmlxToolbar 组件. 添加工具栏到布局中: 1.使用attachToolbar() 方法初始化页面 添加代码到index.html中 dhtmlx ...

  6. DHTMLX 前端框架 建立你的一个应用程序教程(一)

    介绍 从这里下载官网 示例 此教程包含是多方面的: 1.如何在页面上添加标准的dhtmlx组建 2.如何在页面上组织组件 3.如何添加过滤 4.如何从服务器端获取数据填充组建 5.如何保存用户修改的数 ...

  7. DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据

    从数据库加载数据 这篇我们介绍从MySQL数据库中加载数据到表格 我们使用 MySql的数据库dhtmlx_tutorial 和表contacts 示例使用的是PHP平台和dhtmlxConnecto ...

  8. DHTMLX 前端框架 建立你的一个应用程序教程(二)--设置布局

    Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...

  9. DHTMLX 前端框架 建立你的一个应用程序 教程(十)--保存表单中的数据

    保存表单中的数据 现在我们所要做的是 当用户点击提交按钮的时候  我们将表单中的数据进行保存操作. 我们可以使用dhtmlxDataProcessor. 来进行操作.它是一个数据组件,可以提供与服务器 ...

随机推荐

  1. C# 3.0 LINQ to XML

    高级转换: static IEnumerable<XElement> ExpandPaths (IEnumerable<string> paths) { var brokenU ...

  2. 关于hover没有效果的问题

    今天用vs2012写一个页面的是时候,用到hover的效果,原本是没有难度的事情,后来因为一个细节,导致浪费了点时间. 原来是我在css文件里面写完样式后,用了ctrl+k+D进行了格式化,然后vs在 ...

  3. HW—指定字符替换Java(replace)---动态和静态定义字符串数组;

    总结: 语法层面上:这里主要用到Java字符串的替换函数,str.replaceAll("待替换的","替换成的").replaceAll接受的是正则花的reg ...

  4. Mysql主从配置+读写分离

    Mysql主从配置+读写分离     MySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. ...

  5. 转:EF调用存储过程、函数

    EF调用存储过程.函数 2014-04-02 09:12:20|  分类: ORM框架|举报|字号 订阅          一.ef4.1 codeFirst 修改表结构 增加字段等 EF code ...

  6. Python(Django) 连接MySQL(Mac环境)

    看django的文档,详细的一塌糊涂,这对文档来时倒是好事,可是数据库连接你别一带而过啊.感觉什么都想说又啥都没说明白,最有用的一句就是推荐mysqlclient.展开一个Django项目首先就是成功 ...

  7. Nginx 域名转发

    例如访问www.b.cn直接跳到www.a.cn上去,又不想多域名捆绑一个目录. server { listen 80; server_name www.b.cn; rewrite ^/(.*)$ h ...

  8. 栈(链式存储) C++模板实现

    #include <iostream> using namespace std; //栈结点类 template <typename T> class stackNode{ p ...

  9. vs快捷键及常用设置(vs2012版)

    vs快捷键: 1.ctrl+f F是Find的简写,意为查找.在vs工具中按此快捷键,可以查看相关的关键词.比如查找哪些页面引用了某个类等.再配合查找范围(整个解决方案.当前项目.当前文档等),可以快 ...

  10. JS中判断JSON数据是否存在某字段的方法 JavaScript中判断json中是否有某个字段

    方式一 !("key" in obj) 方式二 obj.hasOwnProperty("key")  //obj为json对象. 实例: var jsonwor ...