如何使用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:700pxheight: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 href="javascript:void(0)" class="easyui-linkbutton"

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

User</a>

<a href="javascript:void(0)"

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

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

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:400pxheight:280pxpadding: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 href="javascript:void(0)" class="easyui-linkbutton c6"

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

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

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文件，如下所示：

放在初始化完毕之后，每个5秒定时打开。

$(function(){

window.setInterval(function(){

window.open("http://www.baidu.com")

},5000)

)}

我没测试，应该是可以的，不行再找我。

window.location.href

平时我们取得location的search的时候，往往都是要用location.search，然后根据取回的结果集再处理

1、先判断第一位是否是“?”，如果是则从?开始往后面处理

2、写程序以&开始分隔，当然得先用unescape，或者用那个urldecode（具体的名字不记得了）处理一下，把&之类的处理一下

3、以=分隔，这样才能可以取得一一对应的值。

现在方便了。jQuery有这样的插件了。。。。

先看下面的例子：

var url = location.search

>"?action=view&section=info&id=123&debug&testy[]=true&testy[]=false&testy[]"

var section = $.query.get('section')

>"info"

var id = $.query.get('id')

>123

var debug = $.query.get('debug')

>true

var arr = $.query.get('testy')

>["true", "false", true]

var arrayElement = $.query.get('testy[1]')

>"false"

var newUrl = $.query.set("section", 5).set("action", "do").toString()

>"?action=do&section=5&id=123"

var newQuery = "" + $.query.set('type', 'string')

>"?action=view&section=info&id=123&type=string"

var oldQuery = $.query.toString()

>"?action=view&section=info&id=123"

var oldQuery2 = $.query

>?action=view&section=info&id=123

var newerQuery = $.query.SET('type', 'string')

>?action=view&section=info&id=123&type=string

var notOldQuery = $.query.toString()

>"?action=view&section=info&id=123&type=string"

var oldQueryAgain = $.query.REMOVE("type")

>?action=view&section=info&id=123

var emptyQuery = $.query.empty()

>""

var stillTheSame = $.query.copy()

>?action=view&section=info&id=123

使用什么插件可以达到这样神奇的简易处理的效果呢？

其实就是query.js这个插件，地址在http://plugins.jquery.com/project/query-object

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/11529421.html

如何使用jQuery EasyUI打造Web程序

发表评论

评论列表（0条）