easyui datagrid数据表格(一)

easyui 中的数据表格，功能齐全，强大。对于表格数据操作提供了很多方法。具体全部属性可参考easyui官网。这里直说一些我在项目中使用到的属性，方法与事件。

数据表格的创建很简单。也有两种方法。

（1）html创建方法：

<table class='easyui-datagrid'></table>

(2)js创建方法

<!--html部分-->
<table id='dg'></table>
<!--javaScript部分-->
$(function(){
$('#dg').datagrid({
toolbar:'#xx',//是指工具栏的意思。使用选择器，找到自己写的工具栏的就可以了
striped：true,//这个是使表格条纹化。boolean属性，默认是false
pagination:true,//是否显示分页工具栏，boolean属性，默认是false
singleSelect：true,//定义表格一次选中一行。
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]//这个就是显示在表格上的表头部分了。field属性对应的是json数据中的key值，title属性是显示在表头上的列名,这个地方之所以写两个中括号，这里也是为了做更复杂的表头而做的准备，后面会详细说下
})
})

至于加载数据，可以直接在js创建方法中添加url属性。

$('#dg').datagrid({
url:'...',
})

也可以通过jquery Ajax加载数据

.ajax({
url:'...',
type:'post',
dataType:'json',
success:function(data){
$('#dg').datagrid('loadData',data.xx);
}
})