dhtmlxGrid是一个JavaScript实现的动态表格插件,提供了丰富的表格操作功能,如:动态创建表格,动态删除表格。下面同个一个实例来展示怎样使用dhtmlxGrid来创建一个简单的表格。
在开始之前我们先来看看效果图吧!如下图:
下面来看看实现代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dhtmlxGrid测试</title> <!-- 引入CSS样式 --> <link type="text/css" rel="stylesheet" href="../../js/dhtmlxGrid/dhtmlxgrid.css" /> <link type="text/css" rel="stylesheet" href="../../js/dhtmlxGrid/skins/dhtmlxgrid_dhx_skyblue.css" /> <!-- 引入JavaScript库文件 --> <script type="text/javascript" src="../../js/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="../../js/dhtmlxGrid/dhtmlxcommon.js"></script> <script type="text/javascript" src="../../js/dhtmlxGrid/dhtmlxgrid.js"></script> <script type="text/javascript" src="../../js/dhtmlxGrid/dhtmlxgridcell.js"></script> </head> <body> <div id="gridbox" style="width:600px;height:200px"></div> <script type="text/javascript"> $(function(){ // 创建dhtmlGrid对象,使用div的id来创建 var mygrid = new dhtmlXGridObject('gridbox'); // 设置表格需要用到的图片路径 mygrid.setImagePath("../../js/dhtmlxGrid/imgs/"); // 设置列名称 mygrid.setHeader("编号,姓名,性别,年龄,联系电话"); // 用像素设置列的宽度 mygrid.setInitWidths("80,150,80,80,*"); // 设置列值的对齐方式 mygrid.setColAlign("right,left,center,right,left"); // 设置列的类型。如:ro为只读(readonly) mygrid.setColTypes("ro,ro,ro,ro,ro"); // 设置排序方式 mygrid.setColSorting("int,str,str,str,str"); // 初始化表格 mygrid.init(); // 设置表格皮肤 mygrid.setSkin("dhx_skyblue"); // 设置表格数据 mygrid.addRow(0, [100, "张三", "男", 20, "028-9090960"]); mygrid.addRow(1, [101, "李四", "男", 24, "028-7892960"]); mygrid.addRow(2, [102, "王五", "男", 22, "028-3693960"]); mygrid.addRow(3, [103, "薛强", "女", 23, "028-2896960"]); }); </script> </body> </html>
到这里,你学会怎样使用dhtmlxGrid动态创建表格了吧!!!是不是很简单,更多关于dhtmlxGrid的知识请持续关注哦。。