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的更多相关文章

DHTMLX 前端框架建立你的一个应用程序教程(五)--添加一个表格Grid
表格例子样本如下: 我们这篇介绍的是dhtmlxGrid 组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid( ...
DHtmlx组件获取选中行的某一列对应的值
最近刚刚接触DHtmlx这个js组件,对它还不是太了解,还在学习中,算是记录自己学习该组件的历程吧. 首先xml文件里有一个grid,有对应的checkbox,通过 var selectedId = ...
【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构这两年a ...
DHTMLX 前端框架建立你的一个应用程序教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录我们的最终功能是在表格中添加删除我们通过单机工具栏上的按钮来实现添加删除当我们单击添加按钮的时候, 表单中第一行默认填写New contact 光标自动聚焦当用户点击删 ...
前端JS开发框架-DHTMLX
一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建简洁界面,快速性能,和丰富用户体验的企业级web应用程序 ...
DHTMLX 前端框架建立你的一个应用程序教程(二)--设置布局
Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...
2014-11-21 DHTMLX是什么
什么是dhtmlx? dhtmlx是一套网页开发的函式库,他提供了树状元件.数据方格组件.工具列等组件供开发人员使用. dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动 ...
前端angularjs+requirejs+dhtmlx 后端asp.net webapi
享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi 一.前言半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...
起步X5 UI模型使用的新的JAVASCRIPT UI库 DHTMLX （简称DHX）
最近学习新版本的起步X5,发现 UI控件有很多变化,按培训师的解释,X5平台界面设计引入了新的JAVASCRIPT UI库 DHTMLX. 参考:DHX http://www.dhtmlx.com ...

随机推荐

jQuery $.each用法[转]
jQuery $.each用法以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
savedInstanceState的作用
在activity的生命周期中,只要离开了可见阶段,或者说失去了焦点,activity就很可能被进程终止了!,被KILL掉了,,这时候,就需要有种机制,能保存当时的状态,这就是savedInstanc ...
浅谈fls3的一个压缩问题
昨天,用fis3压缩优化,在命令行运行命令的时候,出现了一个报错信息. not a PNG file. 查了很多资料,没找到解决方案,终于在github上提问,有正主回答: 是由于有些图片的后缀是通过 ...
Ashx的处理实例(逻辑处理/js调用)
做asp.net开发的对.aspx,.ascx和.ashx都不会陌生.关于它们,网上有很多文章介绍.“纸上得来终觉浅,绝知此事要躬行”,下面自己总结一下做个笔记.1..aspxWeb窗体设计页面.We ...
Memcache学习笔记
以下内容大部分来自网络,小部分是本人遇到的问题融合后的记录. 先贴一段涨姿势~ Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全 ...
类和对象 nil/Nil/NULL的区别
iOS-----类和对象,nil/Nil/NULL的区别 iOS中类和对象,nil/Nil/NULL的区别类与对象的概念类是对同一类事物高度的抽象,类中定义了这一类对象所应具有的静态属性(属性 ...
@html.ActionLink的几种参数格式
一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, ...
打开office word excel弹出visual studio 2008
打开office word 或者excel或者ppt等文档就会弹出visual studio 2008正在配置对话框. 按照我下面的步骤,解决方法非常简单. 如果你的电脑是win7操作系统,从第一步开 ...
为sproto手写了一个python parser
这是sproto系列文章的第三篇,可以参考前面的<为sproto添加python绑定>.<为python-sproto添加map支持>. sproto是云风设计的序列化协议,用 ...
Ajax+JQuery
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

DHTMLX-Grid