easyui demo(如何使用jQuery EasyUI打造Web程序)

编程之家2023-11-02106次浏览

其实easyui demo的问题并不复杂，但是又很多的朋友都不太了解如何使用jQuery EasyUI打造Web程序，因此呢，今天小编就来为大家分享easyui demo的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

如何用easyui实现复杂页面布局

第一步，打开eclipse IDE工具，创建web动态项目；在web项目目录WebContent下创建静态页面index.html，如下图所示：

第二步，引入EasyUI中的主题样式文件easyui.css、icon.css、demo.css，以及引入jQuery核心js和EasyUI相关的js文件，如下图所示：

第三步，创建EasyUI框架布局控件layout，并设置五个方向东南西北中的样式，如下图所示：

第四步，预览该静态页面，这时在浏览器看到页面被分成五个部分，每个部分都有一个标题，如下图所示：

第五步，在jquery初始化函数里编写某一部分折叠方法函数，调用layout()方法，如下图所示：

第六步，再次预览页面，会看到为“南”的部分被折叠起来了，如下图所示：

easyui和extjs哪个好

作为ExtJs和EasyUI都用得很熟练的一个老资格程序员，我发表一下我的看法。

首先两个框架的组件都很丰富，商业应用都要收费。ExtJS的动态性和扩展性更好，从使用效果看，easyui的组件相对体验更好一点。

ExtJS

优点：1.完全开源，我说的开源的意思并不是说不收费。

2.我非常赞赏它的架构设计，完全的面向对象的组件化设计。所有的组件都是从一些基础的组件派生出来的，并且提供了overide,extend等扩展方式，可以说能够任意扩展。可能一些半桶水的人觉得ExtJS很难用，那是因为他们只懂皮毛。

3.ExtJS的文档和实例做得比EasyUI要好得多，基础比较好的开发人员只用看官方的文档、demo、适当参考源码就能够完成任何工作，遇到问题完全不用去百度或论坛问其他人。

4.可以完全动态开发,代码都写在JS文件里，不像ExtJS那样非得在页面放一个DOM元素。所以可以自己定制组件在任意页面引用，复用性好。

缺点：1.可能太多人用，造成审美疲劳，反正我看腻了它的界面，自己定制界面主题有太难。

2.可能因为它太庞大，不像easyUI那样基于页面已有的HTML

DOM渲染，所以一般人觉得比较难(但是话有说会来，如果使用者的水平高的话，这其实也是也是它的优点。因为你要是在同一个界面点击不同按钮要动态显示各种各样不同的window、form等等的话，只要把这些JS引用到当前页面就可以吧，见上述优点4）。

easyui

优点：

1.在页面的DOM元素加一些属性然后加几行JS就可以动态构造出相应的组件。开发方式相对ExtJS直观和简洁一些。

2.组件相对体验更好一点，界面好像跟干净简洁。

缺点：1.半开源，对于一个高手来说看不到源代码是很痛苦的，事，因为他们总有这样那样的扩展需求。

2.一定要在页面上放置相应的DOM元素才能渲染（如果不对dom元素设置隐藏的话，在页面没有渲染过程中会显示一堆乱七八糟的东西）所以无法自己定制组件在其他页面引用，要复用的话得搬砖一样把JS和DOM都复制过来，遇到非常复杂的页面那是相当杂乱和痛苦的。

如何使用jQuery EasyUI打造Web程序

在百度搜索引擎中搜索“jQuery EasyUI”关键词，如下图所示。

访问JQuery EasyUI中文网，如下图所示。

点击导航栏上的【JQuery EasyUI下载】超链接，访问JQuery EasyUI下载页面，如下图所示。

选择GPL版本，点击下方的【官方下载】按钮，如下图所示。

解压JQuery EasyUI GPL版本，工程目录如下图所示。

以下用一个Basic CRUD Application（基本增删改查应用程序）为例，来介绍JQuery EasyUI的用法。、

<!DOCTYPE html>

<html>

<head>

<title>Basic CRUD Application- jQuery EasyUI CRUD Demo</title>

</head>

<body>

<h2>Basic CRUD Application</h2>

<p>Click the buttons on datagrid toolbar to do crud actions.</p>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"

url="get_users.php"

toolbar="#toolbar" pagination="true"

rownumbers="true" fitColumns="true" singleSelect="true">

<thead>

<tr>

<th field="firstname" width="50">First Name</th>

<th field="phone" width="50">Phone</th>

<th field="email" width="50">Email</th>

</tr>

</thead>

</table>

<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:void(0)" class="easyui-linkbutton"

iconCls="icon-add" plain="true" onclick="newUser()">New

User</a>

<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:void(0)"

class="easyui-linkbutton" iconCls="icon-edit" plain="true"

onclick="editUser()">Edit User</a>

rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:void(0)" class="easyui-linkbutton"

iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove

User</a>

</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"

closed="true" buttons="#dlg-buttons">

<div class="ftitle">User Information</div>

<label>First Name:</label>

</div>

</div>

<label>Phone:</label>

</div>

<label>Email:</label>

</div>

</form>

</div>

<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:void(0)" class="easyui-linkbutton c6"

iconCls="icon-ok" onclick="saveUser()"

style="width:90px">Save</a>

rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:void(0)" class="easyui-linkbutton"

iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"

style="width:90px">Cancel</a>

</div>

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');

}

});

}

</script>

#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;

}

</style>

</body>

</html>

该案例运行效果，如下图所示。

在该案例中，需要引入以下CSS和js文件，如下所示：

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！

北京网站建设公司北京网站建设的大公司百度竞价排名，百度推广中什么是百度竞价排名