EasyUI datagrid控件的基本使用

首先运行一个它的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('添加数据')}
}],
。。。。。。
});

运行如下；

EasyUI datagrid控件的基本使用相关推荐

easyui datagrid 控件全选
easyui datagrid 控件全选在datagrid控件中全选功能都是easyUI给做好的,只需要将负责全选的复选框设置下面的这个属性为false属性即可全部选中 singleSelect:f ...
easyui datagrid控件使用
datagrid控件使用 1.目标把数据库的数据显示到tabs页面中,并且提供查询和分页效果图: **删除修改和新增后面在讲今天讲查询和把数据呈现到表格上面: 首先我们了解datagrid控件是 ...
基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自己主动适应宽带高度...
在默认情况下,EasyUI的DataGrid好像都没有具备自己主动宽度的适应功能,通常是指定像素宽度的.可是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...
http://www.cnblogs.com/wuhuacong/p/4085725.html 在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是 ...
EasyUI中datagrid控件的使用设置多行表头(两行或多行)
EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: 1 $('#divData' ...
使用c#+(datagrid控件)编辑xml文件
作者Blog:http://blog.csdn.net/ouyang76cn/ 使用c#+(datagrid控件)编辑xml文件这个源码是我根据网上一个vb.net编辑xml文件的原理用c#重写的. ...
asp.net中显示DataGrid控件列序号的几种方法
在aps.net中多数据绑定的控件很多,论功能来说,应该属DataGrid最为齐全,但它没有提供现成的显示记录序号的功能,不过我们可以通过它所带的一些参数来间接得到序号,下面来看看怎样得到和显示序号值 ...
使用 ASP+ DataGrid 控件来创建主视图/详细资料视图
Nikhil Kothari Microsoft Corporation 2000年8月简介 Microsoft® Visual Studio.NET 的下一发行版包括 DataGrid Web 控 ...
DataGrid控件读取具体某行某列的值、获取总列数
WPF中的datagrid控件获取总列数的函数是Items.Count来获取. 以下代码是循环获取各行第二列的数据,并存放在一个名为TX的Textbox控件中: for (int i = 0; i & ...

EasyUI datagrid控件的基本使用

EasyUI datagrid控件的基本使用相关推荐

最新文章

热门文章