EasyUI-1.Datagrid 数据网格

什么是datagrid？

       datagrid显示数据表格格式和选择提供了丰富的支持,排序,组织和编辑数据。 datagrid被设计来减少开发时间和从开发人员不需要特定的知识。 它是不重要的和功能丰富的。 细胞融合,多列标题,冻结的列和页脚只是几个特性。



官方API文档：http://www.jeasyui.com/documentation/datagrid.php

如何创建DataGrid

     我们一般是使用javascript来创建

1.在创建前需要在网页上有一个div

<div id="dataInfo">

</div>

2.写javascript代码

$('#<span style="font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;">dataInfo</span><span style="font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;">').datagrid({</span>
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});

注意：这里使用ID选择器选中DIV,然后使用" .datagrid "方法来创建datagrid。如果你要创建一个窗口则只需要用".window"方法就可以了。

常用DataGrid属性
url：ajax异步提交数据的地址
        如：url:'/house/pageSearchHouseAction'

columns：设置datagrid的列属性(包括 标题、宽度等)
先看一段JSON数据

{"rows":[{"id":1004,"streetEntity":{"districtEntity":{"name":"海淀"},"name":"中关村大街"},"title":"中关村两居"}],"total":3}

这段JSON数据是服务器响应到客户端的，其中rows和total两个键的名字是固定的，因为DataGrid会自动获取这两个键的值。rows获取的是要显示的数据，total获取本次总共查询出多少条数据来。此外也要注意rows的数据格式“[
{},{} ]”，rows是一个集合，在这个集合中包含多个对象。注意：DataGrid会根据你返回的total的值和你每页显示数量来自动的算出总页数。
下面看如何创建columns

columns:[[{field:'id',title:'编号',width:100,align:"center"},
{field:'title',title:'房屋信息',width:300},
{field:'streetEntity',title:'区域',width:100, formatter:function (value,row,index) {
return value.districtEntity.name + "   " + value.name;
}}
]]

创建columns使用的是json对象创建，注意格式“[[ {},{} ]]”。其中field属性的值，就是你JSON对象中的rows属性中存放的键的值，例如上一段json数据中存在键名为id的键，那么想获取到数据就需要指定field属性为id。
但是有些时候我们获取出来的值是一个对象，例如streetEntity中存放的就是一个对象，这个时候我们就需要使用列属性formatter方法来获取到，streetEntity中某个对象的属性。
为此属性指定一个方法，在这个方法中有三个参数
value:字段值。 
rowData:行记录数据。 
rowIndex:行索引。
因为我们使用field取出了streetEntity中的值，这个时候value中存放的值就相当于

{"districtEntity":{"name":"海淀"},"name":"中关村大街"}

此时我们就可以使用"value." 来获取到想要的值了，获取到最会返回就可以了。

fit：用于设置DataGrid是否占满整个父容器。取值true | false
fitColumns：设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
pagination：设置为 true，则在数据网格（datagrid）底部显示分页工具栏。

注意：在选择页数，或调整每页显示数量的时候，都会向后台提交请求参数，rows为每页显示数量，page为当前页数。如果忘记了这两个参数可以通过谷歌浏览器的开发者工具箱来查看请求参数。



pageSize：当设置了 pagination 属性时，初始化页面尺寸。说白了就是默认每页显示几条
                             如：pageSize:1 表示每页显示一条
pageList：当设置了
pagination 属性时，初始化页面尺寸的选择列表。如果不设置此属性则默认的选项为10 20 30 40 50
                             如：pageList:[1,5,10]  表示 我们的选项有   1   5   10
loadMsg：当从远程站点加载数据时，显示的提示消息。
                             如：loadMsg:"正在加载消息..."
rowStyler：我一般用来设置某一行的样式，例如各行变色

rowStyler:function (index, row) {
if(index % 2 != 0){
return 'background-color:#CCFF99;';
}
}

本笔记代码http://download.csdn.net/detail/gxy1317/9620962