DHTMLX - Grid

介绍

dhtmlxGrid是一个灵活的、易于使用的JavaScript网格组件,可以创建DHTML表与丰富的编辑- sensing,固定的多行页眉和页脚,可调整大小的、可拖动的列，内置过滤、搜索和分组功能。dhtmlxGrid拥有先进的拖放、动态加载，可定制的视图中，一组预定义的单元格编辑器和许多其他的功能，使它成为一个平台为开发者提供援助。

例子

源码

<!DOCTYPE html>

<html>

<head>

    <title>Calendar eXcell</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>

    <script src="../../../codebase/dhtmlx.js"></script>

    <script>

        var myGrid;

        function doOnLoad() {

            myGrid = new dhtmlXGridObject('gridbox');

            myGrid.setImagePath("../../../codebase/imgs/");

            // 设置列头

            myGrid.setHeader("Name,Date of Birth, First Book Published");

            // 设置列的宽度（单位为像素）

            myGrid.setInitWidths("*,100,100");

            // 设置数据在列中位置

            myGrid.setColAlign("left,center,center");

            // 列类型

            myGrid.setColTypes("ed,dhxCalendar,dhxCalendarA");

            // 设置类型的列排序

            myGrid.setColSorting("str,date,date");

            // 初始化

            myGrid.init();

            // 加载数据

            myGrid.load("../common/grid_dates.xml");

        }

    </script>

</head>

<body onload="doOnLoad();">

    <h1>Extra Excell - Calendar</h1>

    <p>dhtmlxGrid allows you to add two types of dhtmlxCalendar control based calendars into your component:

    <ul>

        <li>dhxCalendar - popup calendar</li>

        <li>dhxCalendarA - popup calendar with ability to input data manually</li>

    </ul>

    </p>

    <div id="gridbox" style="width:503px;height:145px;background-color:white;"></div>

</body>

</html>

效果

数据格式

dhtmlxGrid可以根据用户需要填充4种数据的格式：XML、JSON、CSV、JSArray、自定义

XML

  • 数据 data.xml file
<?xml version='1.0' encoding='iso-8859-1'?>

<rows>

    <row id="1">

        <cell>A Time to Kill</cell>

        <cell>John Grisham</cell>

        <cell>12.99</cell>

    </row>

    <row id="2">

        <cell>Blood and Smoke</cell>

        <cell>Stephen King</cell>

        <cell>10</cell>

    </row>

    <row id="3">

        <userdata name="lowprice"></userdata>

        <cell>The Rainmaker</cell>

        <cell>Stephen King</cell>

        <cell><![CDATA[<font color="red">7.99</font>]]></cell>

    </row>

</rows>
  • 使用 ‘index.html’ file
mygrid.load("data.xml", "xml");
  • 可用的标记
标记 说明
afterInit 组织所有命令调用初始化后将执行网格结构。将执行一个命令从这个块即使没有数据结构标记(列)中定义的头
beforeInit 组织所有命令调用,将网格结构之前执行初始化。将执行一个命令从这一块只有在完整的电网结构定义在XML(列标签)
call 代表网格命令的调用,必须放置在afterInit或beforeInit部分

属性：

    command - 网格将被调用的方法的名称
cell 代表一个单元网格,标签的值将被用作在网格单元的值。

属性：

    align - 对齐的方式（left, right, center）等同于 setColAlign

    color - 设置列的颜色 等同于 setColumnColor

    format - 等于调用setNumberFormat或setDateFormat相关列)

    id - 标识

    sort - 设置排序类型 等同于 setColSotring

    type - 设置列的类型 等同于 setColTypes

    width - 设置列的宽度
colwidth 指定列宽 单位 px、%
head 一个可选的标记用于分组配置标记
option 设置选项列表（co, coro, clist）属性：value - 值组合框内的相关选项
param 代表一个方法的调用的参数,必须有尽可能多的参数标记
row 网格的标记代表一行,为每一行一个标签

属性：

    bgColor - 一行的颜色,强烈建议使用这个参数来设置颜色的行(所有其他方法将覆盖颜色的选择);

    class - 设置CSS样式

    id - 标识

    locked - 一行将被锁定,切换到只读状态,可以通过JS API恢复;

    selected - 数据加载之后,一行将被选中;

    call - 意义只有启用了“选择”属性,如果两个连续属性设置为true,将选择和onSelectRow事件调用;

    style - 设置CSS样式
rows 只是上面的xml标记,没有特殊的意思

属性：

    pos - 动态智能呈现从服务器获取XML块,哪个地方的“pos”属性显示网格的数据传入的XML必须插入。在大多数情况下(异常非常具体)这个值就等于url参数“posStart”(这是自动添加到所有调用SRND模式)。属性意义只有在SRND模式和在其他任何一个将被忽略;

    total - 动态分页和动态渲染模式都需要指定的最大预期的行数(分页可以没有这样的限制,但不会显示所有可用页面从一开始就在这种情况下)。硬编码计数或行javascript代码可能是罕见的,它可以直接在指定XML。
settings 网格组的配置设置,
splitat 执行splitAt命令在所需的位置,功能是弃用,推荐使用afterInit /call启动分裂
userdata 存储一些额外的数据不需要被显示,但可能是有用的对于某些客户端操作,可以使用用户数据部分。

属性：

    name - 标识
  • 其他XML格式

    还有2种额外的XML格式是基于列的id:

    • 第一种

      使用这种格式需要引用一个js文件 dhtxmlgrid_data.js
    grid.setColumnIds("first,second,third");

    grid.load(url,"xmlA");

    <rows>

        <row id="some1" first="11" second="12" third="13" />

        <row id="some2" first="21" second="22" third="23" />

        <row id="some3" first="31" second="32" third="33" />

    </rows>
  • 第二种
    grid.setColumnIds("first,second,third");

    grid.load(url,"xmlB");

    <rows>

        <row id="some1"><first>11</first><second>12</second><third>13</third></row>

        <row id="some2"><first>21</first><second>22</second><third>23</third></row>

        <row id="some3"><first>31</first><second>32</second><third>33</third></row>

    </rows>

JSON 格式

有两个可以使用JSON格式为dhtmlxGrid用于指定数据

  • 基本(dhtmlxGrid-oriented)JSON格式
  • 原生JSON格式

基本的JSON格式

基本的dhtmlxGrid-oriented JSON格式，可以定义Grid的样式以及配置额外的参数

data={

    rows:[

        { id:1, data: ["A Time to Kill", "John Grisham", "100"]},

        { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},

        { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}

    ]

};
  • Row-related 设置

    • id
    • bgColor
    • class
    • style
    • locked
    • selected
    • call
    • userdata

在原生JSON格式扩展dhtmlxGrid-oriented JSON格式的属性,如‘风格’、‘选择’,并不是可用的

{

    rows:[

       {  id:1,

          selected:true,

          bgColor: "red",

          userdata:{"priority":"normal"},        // sets the row userdata

          data:[

            "A Time to Kill",

            "John Grisham",

            {"value":"100","type":"ed"}          // changes the cell type

          ]

       },

       {  id:2,

          style:"font-weight:bold;",

          userdata:{"priority":"High","hotdeal":"yes"}, // sets the row userdata

          data:[

            "Blood and Smoke",

            "Stephen King",

            "1000"/

          ]

       }

]}

原生JSON格式

data= {"total_count":50000, "pos":0, "data":[

  { "col1": "A Time to Kill",

    "col2": "John Grisham",

    "col3": "100"

  },

  { "col1": "Blood and Smoke",

    "col2": "Stephen King",

    "col3": "1000"

  },

  { "col1": "The Rainmaker",

    "col2": "John Grisham",

    "col3": "-200"

  }

]};
mygrid = new dhtmlXGridObject('gridbox');

mygrid.setColumnIds("col1,col2,col3");

myGrid.load(data,"js");

CSV 格式

var  csvstr="A Time to Kill,John Grisham,100"

            +"\nBlood and Smoke,Stephen King,1000"

            +"\nThe Rainmaker,John Grisham,-200";

grid.parse(csvstr,"csv");

JSArray 格式

var data = [

    ["A Time to Kill","John Grisham","100"],

    ["Blood and Smoke", "Stephen King", "1000"],

    ["The Rainmaker","John Grisham","-200"]

];

myGrid.load("../common/_data.js","jsarray");

自定义格式

未完待续！！！。。。。。。。

DHTMLX-Grid的更多相关文章

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

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

  2. DHtmlx组件获取选中行的某一列对应的值

    最近刚刚接触DHtmlx这个js组件,对它还不是太了解,还在学习中,算是记录自己学习该组件的历程吧. 首先xml文件里有一个grid,有对应的checkbox,通过 var selectedId = ...

  3. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  4. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  5. 前端JS开发框架-DHTMLX

    一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建 简洁界面,快速性能,和丰富用户体验的企业级web应用程序 ...

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

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

  7. 2014-11-21 DHTMLX是什么

    什么是dhtmlx? dhtmlx是一套网页开发 的函式库,他提供了树状元件.数据方格组件.工具列等组件供开发 人员使用. dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动 ...

  8. 前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi   一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...

  9. 起步X5 UI模型使用的新的JAVASCRIPT UI库 DHTMLX （简称DHX）

    最近学习新版本的起步X5,发现 UI控件有很多变化,按培训师的解释,X5平台界面设计引入了新的JAVASCRIPT UI库 DHTMLX. 参考:DHX   http://www.dhtmlx.com ...

随机推荐

  1. Palindrome Pairs -- LeetCode 336

    Given a list of unique words. Find all pairs of distinct indices (i, j) in the given list, so that t ...

  2. 后缀名“.dll .obj .lib”和“ .so .o .a”文件的区别含义

    (1) .dll .obj .lib使用在windows平台下.        .dll:动态链接库,作为共享函数库的可执行文件.        .obj:目标文件,相当于源代码对应的二进制文件,未经 ...

  3. Struts 2 Spring Hibernate三大框架的执行流程以及原理

    Struts2框架 一.简介 Struts2是一个相当强大的Java Web开源框架,是一个基于POJO的Action的MVC Web框架.它基于当年的WebWork和XWork框架,继承其优点,同时 ...

  4. 解决Tomcat7“At least one JAR was scanned for TLDs yet contained no TLDs”问题

    解决Tomcat7“At least one JAR was scanned for TLDs yet contained no TLDs”问题 2013-12-05 21:58:00|  分类: t ...

  5. Android通过webservice连接SQLServer 详细教程（数据库+服务器+客户端）

    http://blog.csdn.net/zhyl8157121/article/details/8169172 目录(?)[-] 项目说明 开发环境的部署 数据库设计 服务器端程序设计Webserv ...

  6. Maven学习笔记(1)之安装Maven

    此笔记是学习Maven时自己摸索+各种百度而来,并非全部原创,望与各位一同学习,勿拍~勿拍~ 安装步骤 1.下载Maven的最新版本,地址:http://maven.apache.org/downlo ...

  7. css3 TransformZ() 3D缩放

    transformZ()函数做了一个在Z轴移动的工作,3D空间中,Z轴垂直于x-y所在平面-也就是界面所在的平面,而我们的视角正好垂直于xy平面,所以进行transformZ() 3D缩放,其实在我们 ...

  8. Python-Day3知识点——深浅拷贝、函数基本定义、内置函数

    一.深浅拷贝 import copy #浅拷贝 n1={'k1':'wu','k2':123,'k3':['carl',852]} n2=n1 n3=copy.copy(n1) print(id(n1 ...

  9. SQL server2000更改数据库名称

    如果是SQL Server 2005可以直接右键重命名,但是SQL Server 2000中不能直接改,可以用sp_renamedb. 1.方法一(物理法): 把Old数据库改为New数据库 打开“企 ...

  10. 【转载】oracle dbms_metadata.get_ddl的使用方法总结

    转自:http://www.jb51.net/article/39715.htm dbms_metadata.get_ddl()用于获取对象的ddl,其具体用法如下. 注意:在sqlplus里,为了更 ...