首页 > 代码库 > 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的使用