DHTMLX 表格组件(dhtmlxGrid )使用介绍

String sql = select {s.*} from t_student s where s.age22; SQLQuery slqQuery = session.createSQLQuery(sql); sqlQuery.addEntity(s, Student.class); List list = sqlQuery.list(); for (int i=0;list.size();i++) { Student stu = (Student)list.get(i)
<table width="100%"

       在网页上用表格显示数据是很常见的事情,html标记语言中的table标签能实现,但其功能很简单,只能单纯的显示数据和定义简单的样式,不支持查询,不支持排序,不支持自动增减列等等,这些功能都没有,如果是自己写的话又特别麻烦。但是有了DHX后就不要操心了,DHTMLX 表格组件(dhtmlxGrid )会帮你完成这一切的一切,你只需要提供数据给DHX,然后调用set方法设置即可。而且还是跨浏览器的。


       1.使用myeclipse建立web project


       2.加入DHX 支持(js、css、img)

           


       3.提供数据源(此例使用XML 格式,在下载包中含有。附件中有下载)


       4.在jsp页面中嵌入DHX代码 实现其功能

         <body>
        <div id=”gridbox” style=”width:900px;height:150px;background-color:white;”></div>
        <br />
       <script>
      mygrid = new dhtmlXGridObject(‘gridbox’);
     //图片路径
     mygrid.setImagePath(“<%=path%>/img/”);
    //表头设置用逗号分割每列(#master_checkbox 表示表头为checkbox,并支持全选)
     mygrid.setHeader(“#master_checkbox,Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication”);
    //列宽
    mygrid.setInitWidths(“45,57,150,120,80,80,80,80,200″);
    //列位置
    mygrid.setColAlign(“center,right,left,left,right,center,left,center,center”);
    //列类型
    mygrid.setColTypes(“ch,dyn,ed,txt,price,ch,coro,ra,ro”);
    //列排序方式
    mygrid.setColSorting(“na,int,str,str,int,str,str,str,date”);
   //皮肤
   mygrid.setSkin(“dhx_skyblue”);
   mygrid.init();
   //数据列拖拽
   mygrid.enableColumnMove(true);
   //表头列显示/隐藏
   mygrid.enableHeaderMenu();
   //加载数据
   mygrid.loadXML(“<%=path%>/common/grid.xml”);
   </script>
   </body>


   5.运行效果:

      



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
dhtmlxGrid 启用Ajax的JavaScript网格控制与尖端功能,强大的数据绑定,并与大型数据集的出色表现 。组件是易于使用,并提供了极大的灵活性,由于其丰富的客户端 API 。dhtmlxGrid支持不同的数据源(XML,JSON,CSV,JavaScript数组,和HTML表格),也可以从自定义的XML格式加载。 网格组件可以轻松实现丰富的单元格内编辑和内置的好看的DHTML表(通过CSS或预定义的皮肤管理),过滤、搜索和分组功能。众多的事件处理程序,可以添加必要的交互性到您的基于网格 的接口。智能渲染和分页支持,让这个JavaScript的DataGrid有效地开展工作,甚至与庞大的数据集。 作为一个100%的客户端的JavaScript解决方案,dhtmlxGrid可以集成与任何服务器端技术(PHP,JAVA的Ruby - on – Rails等 )。dhtmlxConnector库Ajax支持,提供实时保存和更新服务器上的网格数据的情况下自动重新加载页面的能力。 dhtmlxGrid支持强大的功能,如必要的基于Web的电子表格、合并单元格、拆分模式、网格列拖动和拖放或脚本方法和数据复制到剪贴板(CSV格式) 。AJAX DataGrid的可扩展架构允许您使用自定义单元格编辑器(每一个细胞的基础上)的外部元件,提供的能力,极大地丰富了网格功能。 DHTMLX库的一部分,dhtmlxGrid可以很容易地与其他元件集成在一个共同的应用程序使用的接口 dhtmlxLayout。有了一个新的皮肤,在2.5版 本中引入,所有DHTMLX组件了光滑和干净的外观,它可以完全匹配任何现代的网站或应用程序的设计。 dhtmlxGrid表格展现通过加载XML文件来载入表头、表尾、表格数据实现展现、操作、回写功能。
dhtmlxGrid是一款基于JavaScript的交互式网格,支持各种数据源和格式。它还提供了导出表格数据的功能,可以将表格数据导出为Excel、PDF和CSV等格式。 以下是使用dhtmlxGrid导出表格数据的步骤: 1. 引入dhtmlxGrid库文件和导出插件文件。你可以从官网下载最新的dhtmlxGrid库和导出插件,也可以使用CDN链接引入。 ```html <!-- 引入dhtmlxGrid库文件 --> <script src="https://cdn.dhtmlx.com/grid/edge/dhtmlxgrid.js"></script> <link rel="stylesheet" href="https://cdn.dhtmlx.com/grid/edge/dhtmlxgrid.css"> <!-- 引入导出插件文件 --> <script src="https://cdn.dhtmlx.com/excel/dhtmlxgrid_export.js"></script> ``` 2. 创建表格对象。你需要在HTML页面中创建一个div元素,然后使用JavaScript代码初始化dhtmlxGrid对象,并将其绑定到该div元素上。 ```html <div id="gridbox" style="width: 100%; height: 400px;"></div> <script> var grid = new dhtmlXGridObject('gridbox'); grid.setHeader("Column 1, Column 2, Column 3"); grid.setInitWidths("100,200,*"); grid.init(); </script> ``` 3. 加载表格数据。你可以使用dhtmlxGrid提供的API,从不同的数据源加载表格数据,比如XML、JSON、CSV等。 ```javascript grid.load("data.xml", "xml"); // 从XML文件加载数据 grid.load("data.json", "json"); // 从JSON文件加载数据 grid.load("data.csv", "csv"); // 从CSV文件加载数据 ``` 4. 导出表格数据。你可以使用dhtmlxGrid提供的API,将表格数据导出为Excel、PDF和CSV等格式。 ```javascript // 导出为Excel格式 grid.toExcel("http://localhost/export.php"); // 导出为PDF格式 grid.toPDF("http://localhost/export.php"); // 导出为CSV格式 grid.toCSV("http://localhost/export.php"); ``` 在上面的代码中,我们使用了toExcel、toPDF和toCSV方法来将表格数据导出为Excel、PDF和CSV格式。这些方法需要一个服务器端的脚本来处理导出操作,我们可以将导出数据发送到该脚本并在脚本中进行处理和输出导出文件。 以上就是使用dhtmlxGrid导出表格数据的基本流程。你可以根据自己的需求,对表格样式和导出格式进行进一步的定制和配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值