EasyUI datagrid控件的基本使用

最新推荐文章于 2024-05-13 16:53:12 发布

bcbobo21cn

最新推荐文章于 2024-05-13 16:53:12 发布

阅读量733

点赞数

分类专栏： web前端文章标签： easyui html datagrid

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/120640410

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

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

出现下图错误；

这是因为它的示例把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"类即可；

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'name'">姓名</th>
            <th data-options="field:'age'">年龄</th>
            <th data-options="field:'part'">部门</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小李</td><td>25</td><td>技术部</td>
        </tr>
        <tr>
            <td>小王</td><td>25</td><td>技术部</td>
        </tr>
        <tr>
            <td>小张</td><td>27</td><td>市场部</td>
        </tr>
    </tbody>
</table>

运行如下；

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

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

然后如下；

<script type="text/javascript">
var mydatas = 
[
    {"name":"小李","age":"205","part":"技术部"},
    {"name":"小王","age":"205","part":"技术部"},
    {"name":"小张","age":"207","part":"市场部"}
];
$('#mydg').datagrid({
    data: mydatas,
    columns:[[
        {field:'name',title:'姓名',width:150},
        {field:'age',title:'年龄',width:150},
        {field:'part',title:'部门',width:150,align:'right'}
    ]]
});
</script>

可以为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>

运行如下，

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

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

运行如下；

bcbobo21cn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI datagrid控件的基本使用

首先运行一个它的datagrid示例；出现下图错误；这是因为它的示例把json数据放到一个单独.json文件，然后加载，浏览器默认不允许加载本地文件；下面来看一下此控件的基本使用；首先做一个基本html文件，不带什么功能，只是把库文件包含进来；<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>DataGrid</title> &..
复制链接

扫一扫