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);}})