首页 > 代码库 > easyUI中datagrid的使用

easyUI中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);

      },

 

      onl oadSuccess: function(data) {

         console.debug("#columnTable onl oadSuccess");

 

      }

   });

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 = http://www.mamicode.com/datas.Contents[i].OrderValue;

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

 

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

                   row.brief = "\

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

                   <a href=http://www.mamicode.com/"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功能还有很多,为了实现多样化的功能,也需要大家根据具体情况,有问题可以查看官网资料和其他资料,也可以相互交流,共同提高。

easyUI中datagrid的使用