EasyUI datagrid控件的基本使用

深碍√TFBOYSˉ_ 2022-09-14 11:10 193阅读 0赞

首先运行一个它的datagrid示例；

出现下图错误；

![f5fb5537564d4578b692a61a11fac6d2.PNG][]

这是因为它的示例把json数据放到一个单独.json文件，然后加载，浏览器默认不允许加载本地文件；

下面来看一下此控件的基本使用；

首先做一个基本html文件，不带什么功能，只是把库文件包含进来；

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>DataGrid</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>My DataGrid</h2>
    	
    	<script type="text/javascript">
    
    	</script>
    </body>
    </html>

基本的，可以使用table来做一个datagrid，只要指定"easyui-datagrid"类即可；

运行如下；

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmNib2JvMjFjbg_size_9_color_FFFFFF_t_70_g_se_x_16][]

也可以用js来定义一个datagrid控件；

定义一个table，指定它的id；

然后如下；

可以为datagrid添加工具条；

为datagrid添加toolbar属性，

$('\#dg').datagrid(\{  
    toolbar: '\#mytb'

.......  
\});

之前先定义一个div，定义它的id，在其中定义按钮；  
<div id="mytb">  
    <a href="\#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>  
    <a href="\#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>  
    <a href="\#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">帮助</a>  
</div>

运行如下，

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmNib2JvMjFjbg_size_20_color_FFFFFF_t_70_g_se_x_16][]

如果要触发工具条按钮的前端事件，则这么写，

$('\#mydg').datagrid(\{  
    toolbar: \[\{  
        iconCls: 'icon-add',  
        handler: function()\{alert('添加数据')\}  
    \}\],  
。。。。。。  
\});

运行如下；

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmNib2JvMjFjbg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[f5fb5537564d4578b692a61a11fac6d2.PNG]: /images/20220828/9c0e880978de4e1fbc50b7f857518f51.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmNib2JvMjFjbg_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c664cedb4e7e4feabfc14259281e4644.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmNib2JvMjFjbg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/91bbd2740d844aefaad77750cd000c60.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYmNib2JvMjFjbg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/aa9aff2ba51c448cac1edfab8571fa2f.png