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. C# Substring的用法

    方法1  Substring(Int32) 从此实例检索子字符串. 子字符串在指定的字符位置开始并一直到该字符串的末尾. 方法2 Substring(Int32, Int32) 从此实例检索子字符串. ...

  2. Caffe 源碼閱讀（五） Solver.cpp

    1.Solver类两个构造函数 Solver(const SolverParameter& param) Solver(const string& param_file) 初始化两个类 ...

  3. Resharp注册码

    admin@youbaozang.comSpFEMUSrPM0AGupqlNs6J1Ey7HrjpJZy admin@wuleba.comd6GuozPm+bsCmPOtyJ2w1ggRnCr3Vk5 ...

  4. android实现控制视频播放次数

    android实现控制视频播放次数,实质就是每个视频片段播放完后,通过MediaPlayer设置监听器setOnCompletionListener监听视频播放完毕,用Handler发送消息再次激活视 ...

  5. a标签不跳转

    <a href="javascript://">父级菜单</a> 结果是这种写法在一些浏览器下不能到达预期效果(无跳转),我没有花时间把这种写法在主流浏览器 ...

  6. NotePad++ 调试PHP代码中文显示乱码

    最近在NotePad++上调试PHP代码,按照示例代码进行调试,结果在显示中文的时候显示一堆乱码,于是上网百度,有2种方法可以解决: 按调试方式有2种方法: 1.菜单插件-NppExec: " ...

  7. 简单说一个IOCP不好的地方

    感谢rulary的指正!博文中我对IOCP的理解是有误的,正确的方式请见评论区rulary的回复! 由于项目实际设计的需要,最终IO事件处理没有采用IOCP,而是采用了NT6.0引入的WSAPoll, ...

  8. IntelliJ IDEA 工具常用快捷键

    IntelliJ IDEA是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具(git.svn.g ...

  9. 接口 Post

    public static StringBuilder HttpPost(string Url, byte[] Postdata, string i) { StringBuilder content ...

  10. C#的类及应用

    1.int i=x.Length;//Length(获取字符串的长度,返回一个int类型的值) 2.x=x.Trim();(去掉字符串前后的空格) trimStart();(去掉前面的空格) Trim ...