easyUI中datagrid的使用

Posted 2020-09-14 cooldream2009

asyUI中的datagrid数据表格经常被用到，结合项目中的使用情况，总结一下datagrid使用中需要注意的一些问题。

easyUI中的datagrid数据表格经常被用到，结合项目中的使用情况，总结一下datagrid使用中需要注意的一些问题。使用datagrid展示数据，需要在html、css、js中都要编写代码，html中主要是确定datagrid在网页中的位置，css来设置datagrid的样式，js填充datagrid数据。

一 html部分

示例代码如下：

         <div class="columntablebox" >

            <table id="columnTable" class="easyui-datagrid columntable" fit="false" rownumbers="true" fitColumns="true" pagination="true">

                <thead>

                   <tr>

                      <th data-options="field:\'id\'">文章编号</th>

                      <th data-options="field:\'title\'" >标题</th>

                      <th data-options="nowrap:false,field:\'pic\',align:\'center\',formatter:imgFormatter">图片预览</th>

                      <th data-options="field:\'ordervalue\',editor:\'numberbox\'">排序值</th>

                      <th data-options="field:\'brief1\',formatter:operationFormatter">操作</th>

                   </tr>

                </thead>

            </table>

         </div>

关于datagrid里面属性的含义大家可以在网上查资料进行了解。在这一部分，需要注意的问题有两个，一是需要在datagrid外层包裹一个div。因为一个网页中可能用到多个datagrid，为了便于区分，可以通过外层的div对datagrid进行定位，来找到需要的datagrid元素。第二个需要注意的问题是设置datagrid的单元格内容时，除了正常显示文字外，还有一些特别的要求，比如示例代码中的显示图片、可编辑、包含操作内容等，这就需要对单元格进行格式化设置。如果图片不进行格式化设置，单元格中显示的是图片的链接地址。如果不指定可编辑，默认是不能编辑的状态。如果操作内容不进行设置的话，单元格不能编辑可操作的内容。

二 js部分

1 datagrid的初始化

示例代码：

$(\'#columnTable\').datagrid({

      pageSize:5,

      pageList:[5],//设置每页显示内容数

      width:\'auto\',

      //设置列的宽度

      columns:[[{field:\'id\',title:\'文章编号\',width:getWidth(0.14),align: \'center\'},{field:\'title\',title:\'标题\',width:getWidth(0.28),align: \'center\'},{field:\'pic\',title:\'图片预览\',width:getWidth(0.22),formatter:imgFormatter,align: \'center\'},{field:\'ordervalue\',title:\'排序值\',width:getWidth(0.11),editor:\'numberbox\',align: \'center\'},{field:\'brief1\',title:\'操作\',width:getWidth(0.18),formatter:operationFormatter,align: \'center\'}]],

      //去掉行点击后的效果

      onClickRow:function(rowIndex,rowData){

            $(this).datagrid(\'unselectRow\',rowIndex);

      },

 

      onLoadSuccess: function(data) {

         console.debug("#columnTable onLoadSuccess");

 

      }

   });

datagrid的初始化部分主要用到datagrid的属性和事件，datagrid的属性和事件比较多，大家根据需要选择使用，分页用到了pageSize，每页显示的数据量，例子中设置了每页显示5个数据，pageList数据设置可以选择每页显示的数据量，我在这里就写了5，也就是只能选择5，根据需要可以多设置一些，比如[5,10,15]。columns是对列进行设置，和html中设置有些类似，不过列的宽度可以动态设置，比如例子中用getWidth(0.28)函数来动态获取宽度值。datagrid中有一些默认的事件，比如点击行以后，行背景色会发生变化，表示这行已经选择过了，我们的项目中，不需要这种默认效果，初始化的时候对onClickRow事件进行处理，编写代码去掉点击行以后的选中效果。onLoadSuccess事件是对datagrid成功加载数据后的处理，比如数据加载后，对数据进行进一步的处理等等。

2 datagrid的分页及数据加载

（1）分页示例代码

   $("#columnTable").datagrid(\'getPager\').pagination({

      onSelectPage: function(pageNumber, pageSize) {

         column_pageno = pageNumber;

         column_pagesize = pageSize;

 

         //显示栏目数据列表

         listColumns();

      }

   });

在分页中会涉及到两个参数，每页显示的数据条数column_pagesize，还有页码column_pageno，这两个参数在显示数据列表的函数中会用到，也就是通过这两个参数想后台请求数据。

（2）数据加载示例代码

   $.post(g_ServerAPI + "Column",

      {

         cmd:\'get_adapt\',

         id:originalId,

         pagesize: column_pagesize,

         pageno: column_pageno

     },

      function(data, status) {

         if(status == "success") {

            var datas = $.parseJSON(data); 

            // 对返回的数据进行二次处理

            if(datas.rows.length>0) {

                for(var i = 0; i < datas.Contents.length; i++) {

                   total = datas.total;

                   var row = {};

 

                   row.id = datas.Contents[i].ID;

                   row.pic = datas.Contents[i].pic;

                   row.ordervalue = datas.Contents[i].OrderValue;

                   row.title = "<div class=\'articleDrop easyui-droppable\' ><a  href=\\"javascript:showArticleContent(" + row.objectid + ")\\" >" + datas.Contents[i].Article.Title + "</a></div>";

 

                   // 注意：这里借用了brief字段做操作处理

                   row.brief = "\\

                   <a href=\\"javascript:editObjectOrderValue(" + datas.Contents[i].ID+ "," + datas.Contents[i].ObjectID + ")\\" >编辑</a>\\

                   <a href=\\"javascript:deleteColumn(" + datas.Contents[i].ID + ")\\" >删除</a>";

                      rows.push(row);

                }

 

                col_datas.total = total;

                col_datas.rows = rows;

                $("#columnTable").datagrid("loadData", col_datas);

            }

         }

   });

基本思路是先从后台取出数据，然后对得到的数据进行处理，将数据处理后放到col_datas中，col_datas是按照datagrid的填充数据格式进行构造，数据处理完成后，加载到datagrid的表中。

经过以上两个步骤，调试后在html中就可以看到后台的数据，但是datagrid的显示还要进行格式的调整。

三 css部分

要设置数据表格的样式，首先要明确数据表格的结构。在html中写的数据表格比较简单，但实际中easyUI会自动生成很多东西，在css中需要对生成的一些表格进行设置样式，达到我们的目的。

 

easyUI的datagrid结构如上图所示。

总起来说，分为两个部分，一个是表格，类名是datagrid-view，一个是分页，类名是datagrid-pager。这是两个大的部分。

datagrid-view表格部分又分为两个部分，datagrid-view1和datagrid-view2，datagrid-view1表示表格左侧序号列。datagrid-view2表示我们展示的后台数据。它们都包括表头datagrid-header、表主体datagrid-body和表底部datagrid-footer三个部分。

datagird-view2的表头datagrid-header和表主体datagrid-body是展示数据最主要的部分，需要重点进行设置。表头datagrid-header包含一个类名为datagird-htable的表格，表主体包含一个类名为datagird-btable的表格，如果需要对展示数据的行或者单元格进行设置，则通过表格的类名找到行tr和单元格td进行进一步的设置。

部分示例代码如下

.columntablebox{padding:8px; width: 99%;height: 812px;}

.columntablebox .datagrid .panel-body{height: 739px;width: 80%;border:none}

.columntablebox .datagrid-wrap{border: none;}

.columntablebox .datagrid-view{width: 100%;height: 739px;}

.columntablebox .pagination table{float: right;margin-right: 5px;}

.columntablebox .pagination-info{float: left;display: none;}

.columntablebox .datagrid-header{font-size: 15px;color: #303030;font-weight: bold;}

.columntablebox .datagrid-header-row td{font-size: 15px;color: #404040;font-weight: bold;}

.columntablebox .datagrid-header .datagrid-cell span{font-size: 15px;}

.columntablebox .datagrid-row{height: 98px;}

.columntablebox .datagrid-view2 .datagrid-body{width: 100%;}

.columntablebox .datagrid-header-row{width:10%;height: 36px;}

通过这html、js和css三个方面的基本编码，基本上能够实现easyUI datagrid的使用，当然datagrid功能还有很多，为了实现多样化的功能，也需要大家根据具体情况，有问题可以查看官网资料和其他资料，也可以相互交流，共同提高。