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

最新推荐文章于 2022-08-28 09:38:30 发布

herb777

最新推荐文章于 2022-08-28 09:38:30 发布

阅读量1.4w

点赞数

分类专栏： JSP及相关web开发学习文章标签： myeclipse table date path list sql

JSP及相关web开发学习专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用DHTMLX (DHX) 在网页上高效地展示和管理表格数据，包括设置表头、列宽、列类型等功能，并提供一个使用XML作为数据源的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>