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 userdatadata:["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 userdatadata:["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");

自定义格式

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

转载于:https://www.cnblogs.com/hedianwei/p/6139621.html

DHTMLX-Grid相关推荐

UI组件：ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
这篇博文主要是分析下当前经常使用到的UI组件,他们的效果和功能一般都可以满足我们平常项目使用,但对于较复杂些的项目建议你要斟酌下再决定是否使用?如何去用?尤其是字段和数据源都是后台动态生成那么考验性更 ...
linux系统下删除vsftp用户,Linux下VsFTP和ProFTP用户管理高级技巧之一
Linux下VsFTP和ProFTP用户管理高级技巧 FTP服务时互联网上比较古老的一种应用,至今Interner应用面非常广泛,但令管理员头痛不已的是其用户管理,既多且杂,如何解决这一问题呢?使用M ...
【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构这两年a ...
DHTMLX 前端框架建立你的一个应用程序教程(二)--设置布局
Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...
DHTMLX Gantt 甘特图使用
dhtmlxGantt 在vue中使用样例,实现了自定义弹窗.设置横道图颜色.修改列表样式.表单验证等. 效果: 官网样例:https://docs.dhtmlx.com/gantt/samples/ ...
DHTMLX基本用法
调用基本的dhtmlx.js和dhtmlx.css 1.需要下载dhtmlxsuite基本库构建网页布局,常用有toolbar/menu/grid/form 1.构建基本的布局 dhtmlxEven ...
DHTMLX Spreadsheet JavaScript Pro 5.0
Spreadsheet - Web-Based Spreadsheet Solution 破解版DHTMLX Spreadsheet is a framework-agnostic JavaScrip ...
使用NVIDIA GRID vPC支持视频会议和算力工具
使用NVIDIA GRID vPC支持视频会议和算力工具随着2020年的发展,远程工作解决方案已成为许多人的新常态.企业正在寻找行之有效的解决方案,如虚拟桌面基础设施(VDI),以使他们的团队能够在 ...
CSS grid 的用法
grid 的用法加三个宽度为 200px 的列. .container {display: grid;grid-template-columns: 200px 200px 200px; } 用 fr ...
mvc4 ajax grid,mvc4中用上一种grid
view 视图@modelIEnumerable@using(Html.Configurator("The grid should...").PostTo("FirstL ...

DHTMLX-Grid