dhtmlxgrid表格笔记

因为公司以前架构的需求，所以对于dhtmlxgrid进行了简单的学习，参照dhtmlxgrid给出的例子进行摸索

1、必须引入的js包

<link rel="STYLESHEET" type="text/css" href="css/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="css/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="css/dhtmlxcalendar.css">
<script src="js/dhtmlxcommon.js"></script>
<script src="js/dhtmlxgrid.js"></script>
<script src="js/dhtmlxgridcell.js"></script>
<script src="js/dhtmlxcalendar.js"></script>
<script src="js/dhtmlxgrid_excell_dhxcalendar.js"></script>
<link rel="STYLESHEET" type="text/css" href="css/dhtmlxcalendar_dhx_skyblue.css">

2、初始化代码

2.1、在页面上先放一个表格容器

<div id="gridbox" style="width:503px;height:120px;background-color:white;"></div>

2.2、页面初始化

<script>
mygrid = new dhtmlXGridObject('gridbox');//类似于一个声明
mygrid.setImagePath("/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.setSkin("dhx_skyblue"); //设置样式 (xp，mt，gray，light，clear，modern，sb_dark);
mygrid.setColumnHidden(列数,true) //隐藏该列
mygrid.init(); //进行初始化
mygrid.loadXML("data.xml"); //加载外部数据
</script>

附：

setColTypes支持的列类型

ro	只读
ed	少量文本，双击原位编辑
txt	大量文本，双击弹出一个文本区域进行编辑
ch	复选框，选中值为1，未选值为0
ra	单选框，一列中只能有一个被选中，选中值为1
coro	下拉列表，用户只能选择列表中已有的值
co	复合下拉列表，用户可以选择，也可以自行输入
img	图片，只读，值为图片的url
link	链接，值的格式为“链接文字^链接地址”，非正常超链接写法。（需加载dhtmlXGrid_excell_link.js文件对其支持）
calendar	日期，双击弹出日历。日期格式为MM/DD/YYYY。需加载dhtmlXGrid_excell_calendar.js文件对其支持，且加载此文件前需定义全局变量_css_prefix、_js_prefix如下：<script>_css_prefix="styles/"; _js_prefix="js/"; </script>

setColSorting支持的排序类型：

int	整型
str	字符串
date	日期

转载于:https://www.cnblogs.com/z-e-r-o/p/6555591.html

dhtmlxgrid表格笔记相关推荐

Bootstrap 表格笔记
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. < ...
jvm虚拟机规范紧接上文的
dneg dneg指令是类型安全的,if在传入的操作数堆栈中有一个类型匹配的双倍数.dneg指令不改变类型状态. instructionIsTypeSafe(dneg, Environment, _O ...
【雅思备考】听说读写攻略 | 雅思核心词汇之科技类
文章目录一.雅思考试流程和真题使用 1.1 考试流程 1.2 真题使用 1.3 考试模式二.阅读题型三.听力题型题型一完成填表/记笔记/流程图/总结题型二选择题题型三填空题题型四 ...
tkinter matplotlib 画图
关键词:tkinter matplotlib 中文乱码 Figure.Axes FigureCanvasTkAgg 列表.数组.表格点击新建对话框 for i,j in zip() draw()画图 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
Latex笔记（一）—— 复杂表格的制作
引言表格是论文写作中的重要一环,尤其是较为复杂的三线表的制作. 在网上寻找了很久发现没有比较综合的解释方法,因此将查阅的关于复杂三线表的制作的资料总结成了一篇笔记. 由于笔记是用Latex写作的,因 ...
国际市场营销知识框架图_打包送！120页中新史笔记+21张框架图+表格！你需要的中新史资料都在这！...
中新史大概.也许.应该是现阶段大家最想快速搞定的科目了. 这段时间,「中新史知识清单」专栏在更新的过程中,就有不少小岛民前来问我们:会不会出整合版的PDF呀?隔着屏幕仿佛都可以看到大家眉头扭成小麻花的 ...

dhtmlxgrid表格笔记

1、必须引入的js包

2、初始化代码

2.1、在页面上先放一个表格容器

2.2、页面初始化

dhtmlxgrid表格笔记相关推荐

最新文章

热门文章