dhtmlGrid--No.1简单使用
1.引用JavaScript
- dhtmlxcommon.js
- dhtmlxgrid.js
- dhtmlxgridcell.js
2.创建要放置grid的容器
<div id="gridbox" style="width:600px;height:300px"></div>
3.定义grid
//定义grid需要在什么容器上现实。
var mygrid = new dhtmlXGridObject('gridbox');
//设置图片目录,grid中排序等图片的按钮图片。
mygrid.imgURL = "imgs/";
//设置列名
mygrid.setHeader("Column A, Column B,Column C,Column D,Column E,Column F");
//初始化列宽度
mygrid.setInitWidths("100,250,100,100,100,100");
//设置列对齐方式,默认左对齐。
mygrid.setColAlign("right,left,right,right,right,right");
//设置排序类型,默认str(int:数值,str:字符串。详见API)
mygrid.setColSorting("int,str,str,int,int,str");
//设置列模式(ro:不可编辑,ed:可编辑。详见API),默认不可编辑
mygrid.setColTypes("ro,ed,txt,ed,ed,ed");
//鼠标经过,是否变色。默认flas
mygrid.enableLightMouseNavigation(true);
//初始化
mygrid.init();
//装载数据
mygrid.loadXML("datas/grid.xml");
4.效果
5.可编辑组件
Grid让我们可以很容易的进行编辑。
只需要简单的设置ColTypes就可以了,内部提供了如下功能。
# ReadOnly (ro) - cell can't be edited
# Simple Editor (ed) - text is edited inside cell
# Text Editor (txt) - text is edited in popup multiline textarea
# Checkbox (ch) - standard checkbox
# Radiobutton (ra) - column oriented radiobutton
# Select box (coro) - simple selectbox
# Combobox (co) - select box with ability to add some other value
# Image (img) - not editable. Value considered as url of image
还有其他的DHX控件也可以集成进来。
# Color picker (cp) - simple color picker (just for example). Value considered as color code or name
# Price oriented (price) - shows $ before value, all values eql 0 shown as na in red color
# Dynamic of Sales (dyn) - shows up/down icon depending on value. Also color coding available (green/red)
因为DHX免费版本的并不提供DataProcessor控件,进行数据操作后保存起来需要自己手动来写,有点麻烦。
这里只做个简单的Demo。如何手动提交数据将稍后介绍。
事件
dhtmlxGrid为我们提供了43个事件,覆盖了拖拽,数据修改,格式变动各个方面。
使用也很简单,注册事件,然后编写方法就OK了。
没钱买License,又想修改数据后提交,可以利用事件,然后使用Ajax提交来修改。
如果技术还不错,可以自己写套方法,处理客户端的XML,然后上传到服务器上修改。
都是很麻烦,真都有这种需求推荐还是购买商业版,或者换个组件吧。
因为没有
mygrid.attachEvent("onEditCell",doOnCellEdit);
function doOnCellEdit(stage,rowId,cellInd){
if(stage==0){
... return true;
}else if(stage==1){
...
}else if(stage==2){
...
}
}
- onDrag
- onDragIn*
- onDragOut*
- onDrop*
- onEditCell
- onRowDblClicked *
- onCellChanged *
- onCheckbox
- onCheck
- onRowPaste
- onGridReconstructed
- onRowAdded
- onRowCreated*
- onBeforeRowDeleted
- onXLS*
- onSubGridCreated*
- onSubGridLoaded*
- onBeforeCMove *
- onAfterCMove *
- onOpenStart*
- onOpenEnd*
- onBeforePageChanged *
- onPageChanged *
- onPaging *
- onResize
- onResizeEnd
- onBeforeSelect*
- onRowSelect
- onSelectStateChanged
- onBlockSeleted*
- onBeforeSorting*
- onAfterSorting
- onBeforeContextMenu*
- onRightClick
- onClearAll
- onEnter
- onFilterStart
- onFilterEnd
- onStatReady
- onHeaderClick*
- onKeyPress*
- onMouseOver
- onScroll
源码文件查看附件!
- 大小: 8.2 KB
- 大小: 23 KB
分享到:
相关推荐
DHX -- 点划线(用于1:1的图) XX100 -- 虚线(用于1:100的图) DHX100 -- 点划线(用于1:100的图) ACAD.LSP --- 增强的ACAD启动文件, 命令扩展如下: CHXX -- 将线型改为虚线(用于1:1的图) CHDHX -- 将线型改为点...
.dhx文档阅读器,用于阅读华为的.dhx格式的文档。
java_dhx 代码使用范例,树、表、等使用方法
解决均匀半空间,瞬变电磁法,时间域线源正演程序
呈現服務共用服務元件使用手冊 ,使用dhx(dhtmlX)编程使用教学手册!!!(很详细,在一台湾朋友传过来的,分享出来)
扩展dhtmlx自定义工具条元素dhtmlxtoolbar_dhx_searchbox,待搜索的功能
DHX 完整的页面样例 可以借鉴哦
很好用的前台表格显示工具,基本上可以解决日常开发中的问题
-P-吉娜-DHX XeD HRI
使用dhx(dhtmlX)编程使用教学手册!!!DHTMLX完全开发手册
Dhx36 与 5'UTR G-四链体结构结合的 mRNA 翻译控制对于骨骼肌干细胞再生功能至关重要” 此处所有代码均在 Python2.7.15、CentOS7.3.1611 和 Matlab R2014b 中测试。 1. rG4 位点识别 请准备fasta文件作为输入(例如...
建筑工程规范标准For M5|Adr 1|TO 2020326.dat | | | | For M5|Adr 2|TO DHX | | | | For M5|Adr 3|TO Start-Line aBFFB 6FB| | | | For M5|Adr 4|KD1 B 11:22:37 6FB| | |Z 4.16290 m | For M5|Adr 5|KD1 B...
MIFARE DESFire EV2 contactless IC (MF3D(H)x2) is the latest addition to the MIFARE DESFire product family introducing new features along with enhanced performance for best user experience....
1 之前上传了dhtmlx的官方demo上去 都很久了 (http: download csdn net detail pxzsky 2946815)看大家最近有需求 希望得到实际的使用代码 因为组件很多 所以我觉得大家可能对一些核心组件还是很感兴趣的 特别是...
一款超强的事务管理控件,能够安排自己哪天要做什么事情,就是计划安排表控件。
超详细的dhtmlx中文使用手册
将DHX的甘特图集成到Odoo中该项目的目标是将甘特图与Odoo完全集成。 由于甘特图是项目管理的重要工具。 在Odoo中包含一个将使其与较早且功能更全的项目管理应用程序竞争。 主要工作是建筑公司等项目的公司,往往不...
这里Dhtmlx日程实例,图表实例,甘特图实例,并结合了数据库进行交互,希望参帮助更多的菜鸟
React Gantt演示 在线演示: : ...这将安装试用版,对于商业版,请使用“ @ dhx / react-gantt” 将甘特标签放入所需的页面 import { Gantt , DefaultTheme } from "@dhtmlx/trial-react-gantt" ;
dhtmlxScheduler是一个JavaScript日程安排控件,类似于Google日历。日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间。事件可以按天,周,月,年等多种视图显示。