前言:easyui是一个非常实用的java前端工具,虽然写起来没有一点技术含量,纯粹是复制粘贴过去的,但是用起来非常方便,里面的内容也有很多,今天这次主要写一下使用datagrid的具体内容,记录下datagrid的使用心得
首先,引用些easyui的资源文件
easyui资源文件:[easyui资源文件]
(http://download.csdn.net/download/wz15660175331/10139180)
Datagrid的主要属性:
data:数据加载
method:该方法类型请求远程数据。
url: 一个URL从远程站点请求数据。
rownumbers:如果为true,则显示一个行号列。
singleSelect:如果为true,则只允许选择一行。
checkOnSelect:如果为true,当用户点击行的时候该复选框就会被选中或取消选中。
第一种方式:通过 table 标签创建DataGrid控件。在表格内使用 th 标签定义列。
<div id="tt" class="easyui-tabs" style="height: 1000px">
<table id = "dg" class="easyui-datagrid" style="width: 500px; height: 300px"
data-options="url:'api/tree',fitColumns:true,rownumbers:true,
checkOnSelect:true">
<thead>
//field:对应json文件内的键
<th data-options="field:'id',width:100">id</th>
<th data-options="field:'text',width:100">text</th>
<th data-options="field:'url',width:100,formatter:format">url</th>
</tr>
</thead>
</table>
</div>
第二种方式: 也允许使用Javascript去创建DataGrid控件
$('#dg').datagrid({
url:'api/tree',
fitColumns:true,
rownumbers:true,
checkOnSelect:true,
//toolbar 顶部工具栏的DataGrid面板。
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('编辑按钮')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮助按钮')}
}],
columns:[[
{field:'id',title:'id', width:80},
{field:'text',title:'text', width:80},
{field:'url',title:'url', width:80,
//单元格formatter(格式化器)函数
formatter: function(value,row,index){
return value+value;
}
}
]]
});
页面展示
好了,DataGrid的一些简单实现方法已经写完啦,在数据表格中往往还包括一些分页查询,DataGrid也帮我们弄好了方法,但是需要后台代码的配合,实现起来比较麻烦,具体的代码在下一章博客中会为大家展现出来