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

从数据库加载数据

  这篇我们介绍从MySQL数据库中加载数据到表格

  

  

  我们使用 MySql的数据库dhtmlx_tutorial 和表contacts

  示例使用的是PHP平台和dhtmlxConnector 帮助库  因为这是实现服务器端逻辑最简单的方法   数据以XML格式输出。

  环境自己搭建  相信C#的朋友 从数据库获取数据转化盛XML也不是难事。

加载数据到表格:

  1.找到”db.sql“文件将表导入到本地数据库

  2.在codebase 文件中添加一个php文件codebase

  3.下载dhtmlxConnector 库 (下载链接

  4.在codebase文件夹中添加connector文件夹

  5.在data文件中添加contacts.php

  

  

  6.在contacts.php中添加php代码

  

<?php
require("../codebase/connector/grid_connector.php");//adds the connector engine
$res=mysql_connect("localhost","user","password");//connects to server with  db
mysql_select_db("dhtmlx_tutorial");//connects to db with name "dhtmlx_tutorial"  

$conn = new GridConnector($res);             //initializes the connector object
$conn->render_table("contacts","contact_id","fname,lname,email");  //loads data
//the method takes: the table‘s name, the id field, a list of fields to load

  

  获取从数据库加载数据和创建XML的细节 参考 动态加载大数据

  7.使用load() 方法加载数据到表格

  

contactsGrid.load("data/contacts.php");

  dhtmlx.js已经包含了 dhtmlxConnector  方法 ,所以我们不必再额外引入其他文件。

  

时间: 10-16

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

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

菜单的介绍 这篇我们介绍将菜单组建添加到上节中的布局中: 我们不对菜单做任何处理  只是在这里填充作为界面的一部分. 这里我们介绍的是dhtmlxMenu 组件. 这个组件的数据我们可以从XML或者JSON中加载 它有两种呈现类型: 1.源图片  它放在imgs文件夹中 2.自定义图片  任何你想使用的位置 添加菜单到布局中: 1.用dhtmlx.image_path 属性来设置源图片的全局路径 dhtmlx.image_path = "codebase/imgs/";dhtmlxEv

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

介绍 从这里下载官网 示例 此教程包含是多方面的: 1.如何在页面上添加标准的dhtmlx组建 2.如何在页面上组织组件 3.如何添加过滤 4.如何从服务器端获取数据填充组建 5.如何保存用户修改的数据到服务器上 6.如何使组建整体配合运行 这是一个简单的联系人管理教程 它包含了下列组建:工具条.菜单.表格.表单.布局等 第一部分:创建应用程序的文件 首先,我们需要引入相关的框架文件! 标准版 下载页面     (专业版据说也可以获取 答案上篇dhtmlx开篇找..) 下载完成后  我们从cod

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

Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form 表单)划分到不同的区域. 设置布局: 1.初始化一个布局用dhtmlXLayoutObject() 在index.html添加如下代码: <!DOCTYPE html> <html> <head> <title>Contact Manager</title

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

保存表单中的数据 现在我们所要做的是 当用户点击提交按钮的时候  我们将表单中的数据进行保存操作. 我们可以使用dhtmlxDataProcessor. 来进行操作.它是一个数据组件,可以提供与服务器端的通信和交互.  它监控所有的数据更改  可以与服务器进行增删改查的操作 这里我们需要的是进行更新的操作 保存更改的数据到后台 1.在首页中我们添加一下代码 'index.html' file var dpg = new dataProcessor("data/contacts.php"

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

表格的过滤筛选 我们在每列第一行添加一个文本,用做数据的条件筛选. 我们还提供服务端的筛选 ,当有大量数据时 , 我们可以使用dhtmlxConnector 进行后台数据的筛选. 添加过滤器到表格列中: 1.使用attachHeader() 添加筛选器到表格 'index.html' contactsGrid.attachHeader("#text_filter,#text_filter,#text_filter"); //the method takes the columns' f

DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格,使其反映从网格中的所有数据 "index.html" file contactForm = layout.cells("b").attachForm(); contactForm.loadStruct("data/form.xml"); contac

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

工具条例子 样本如下: 这里我们使用的是dhtmlxToolbar 组件. 添加工具栏到布局中: 1.使用attachToolbar() 方法初始化页面 添加代码到index.html中 dhtmlxEvent(window,"load",function(){ var layout = new dhtmlXLayoutObject(document.body,"2U"); layout.cells("a").setText("Cont

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

表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid  组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid() 方法将表格添加到布局的单元格中去. var layout = new dhtmlXLayoutObject(document.body,"2U"); var contactsGrid = layout.cells("a").attachGrid(); 2.继续添加代

一个简单的无限滚动的加载数据实现

早上本来想研究昨天晚上携程的那道题目的,但是感觉不知道如何下手,就研究了下如何实现无限滚动加载数据. 以前项目里也用到过,不过是别人封装好的,我只需要调用就好了.自己做还是遇到了点小问题. 1.如何确定滚动条的位置,其实想通了很简单的,就是利用scrollHeight和scrollTop以及可视区的高度来实现的. 2.就是如何保证加载数据的时候,不会出现重复加载.这个也很简单,标记每次加载结束的位置.如果你用的是数据库的话,可以采用分页的形式,每次只添加一页的内容.每当滚动条到底部的时候再加载下