easyui datagrid数据表格(一)

版权声明：本文为博主原创文章，转载需注明来源 https://blog.csdn.net/fsxxzq521/article/details/78692925

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