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. POJ1584 判断多边形是否为凸多边形，并判断点到直线的距离

    求点到直线的距离: double dis(point p1,point p2){   if(fabs(p1.x-p2.x)<exp)//相等的  {    return fabs(p2.x-pe ...

  2. android 返回键 操作

    cocos2dx项目移植到android平台上对于 android手机返回键,主菜单键等键的相关操作,本篇详细对返回键做个简单的介绍说明, 不足不对之处,请同猿们指出. 首先在主activity下,即 ...

  3. Linux shell：FTP（文件传输协议）上传下载命令

    SecureCRT通过ftp将nmon上传,建立一个目录,用命令上传文件.[命令见下面] 或通过UE.SSH上传/下载,使用sftp建立链接. [通过cmd进入ftp服务器]先假设有一FTP服务器,F ...

  4. 快速上手RaphaelJS-Instant RaphaelJS Starter翻译（一）

       (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Start ...

  5. 快速删除.svn文件夹

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @= ...

  6. Qt MainWindow结构

    (图自:FinderCheng 的 Qt 学习之路(11): MainWindow)

  7. 从小工到专家 ——读《Java程序员职场全攻略》有感

    从小工到专家 ——读<Java程序员职场全攻略>有感   <Java程序员职场全攻略>是以故事的形式,向读者介绍Java程序员的职场经验.作者牛开复在北京从事软件开发,已经是一 ...

  8. cocoapods:安装/更新Ruby环境教程

    简介 有时候在安装cocoapods时会产生如下错误 ERROR: Error installing cocoapods: activesupport requires Ruby version &g ...

  9. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  10. Json与javaBean之间的转换工具类

    /**  * Json与javaBean之间的转换工具类  *  * {@code 现使用json-lib组件实现  *    需要  *     json-lib-2.4-jdk15.jar  * ...