EasyUi Datagrid 的使用介绍(1 )
easyui 提供了封装好的界面，使前台开发变得很简洁，下面以Datagrid数据表格组件来介绍下easyui的使用方法，希望给想我一样的初学者以提示。
利用easyui创建相应的组件一般有两种方式：
一：直接在页面的body中创建，比如这个数据表格：
<table id="dg" title="" class="easyui-datagrid" style="width:700px;height:250px" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true" fit="true" border="0" url="../servlet/Table_Do" > <thead> <tr> <th field="name" width="50">姓名</th> <th field="age" width="50">年龄</th> <th field="phone" width="50">电话</th> <th field="email" width="50">邮箱</th> </tr> </thead> </table>
在table标签中可以赋给这个表格属性值。
二：可以在javaScript中创建，上例可写成：
现在<body>中创建一个<table>标签：
<table id="dg"></table>
再通过选择器在javaScript中选择到这个id添加组件及属性：
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'name',title:'姓名',width:50},
{field:'age',title:'年龄',width:50},
{field:'age',title:'年龄',width:50},
{field:'email',title:'邮箱',width:50}
]],
toolbar:'#toolbar',
pagination:'true'
...
});
一般用到组件的属性多的话可以用javaScript的方式创建，使代码更整洁；用到属性少的话就用在body中创建，更简单写。
下编介绍下，如何添加按钮事件，datagrid按钮事件，这里使用一种方法做个例子：
上述代码在表格中显示列表信息，下面介绍添加、删除、新建等操作。
首先在<script>中定义方法：
//表格按钮事件
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','新建');
$('#fm').form('clear');
//url = 'save_user.php.htm'/*tpa=http://jeasyui.com/tutorial/app/crud/save_user.php*/;
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','编辑');
$('#fm').form('load',row);
//url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: '../servlet/Add_Do',
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')'); //定义返回类型 相当于 dataType:json
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
$.messager.show({
title: '提示',
msg: '操作成功'
});
/* } else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}*/
}
});
}
function removeUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if (r){
$.post('remove_user.php.htm'/*tpa=http://jeasyui.com/tutorial/app/crud/remove_user.php*/,{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.msg
});
}
},'json');
}
});
}
}
在<table>里面定义工具栏按钮：
<!-- 显示列表工具栏 --> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除</a> <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadUser()">刷新</a> </div>
<!-- 添加窗口工具栏 -->
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveUser()">保存</a> <a href="#" class="easyui-linkbutton"
iconCls="icon-cancel"
onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
这样就可以了。今晚先写到这吧，这些东西其实可以看api或easyui整站文件里面的Demo学习的。明天总结一下怎么利用Datagrid向后台数据库请求数据，显示列表。