如何使用jQuery EasyUI打造Web程序
的有关信息介绍如下:jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
本经验分享如何使用jQuery EasyUI打造Web程序。
在百度搜索引擎中搜索“jQuery EasyUI”关键词,如下图所示。
访问JQuery EasyUI中文网,如下图所示。
点击导航栏上的【JQuery EasyUI下载】超链接,访问JQuery EasyUI下载页面,如下图所示。
选择GPL 版本,点击下方的【官方下载】按钮,如下图所示。
解压JQuery EasyUIGPL 版本,工程目录如下图所示。
以下用一个Basic CRUD Application(基本增删改查应用程序)为例,来介绍JQuery EasyUI的用法。、
Basic CRUD Application
Click the buttons on datagrid toolbar to do crud actions.
First Name | Last Name | Phone |
---|
closed="true" buttons="#dlg-buttons">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_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.errorMsg
});
}
},'json');
}
});
}
}
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
.fitem input{
width:160px;
}
该案例运行效果,如下图所示。
在该案例中,需要引入以下CSS和js文件,如下所示: