jqueryeasyui封装，jquery封装组件

jquery-easyui-1.3.5怎么安装

最先需要引用下jquery-x.x.x.min.js，也就是jquery的js，其中x.x.x为jquery的版本号，这个到jquery的官网可以下载到。

Jquery easyui控件位置如何确定

将表格放在前后两个div里面，上下两个div可以设置padding 或者margin属性来控制距离；

顺序问题就是你执行顺序控制啦；

复用的话，表格生成写成一个方法即可。

（PS:我在实际工作中很少用到easyui的表格，一般都是自己画，前后台都可以画，更加灵活。）

如何使用jQuery EasyUI打造Web程序

工具/原料

笔记本电脑或是台式机

互联网

jQuery EasyUI

方法/步骤

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

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

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

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

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

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

!DOCTYPE html

html

head

meta charset="UTF-8"

titleBasic CRUD Application - jQuery EasyUI CRUD Demo/title

link rel="stylesheet" type="text/css" href=""

link rel="stylesheet" type="text/css" href=""

link rel="stylesheet" type="text/css" href=""

link rel="stylesheet" type="text/css" href=""

script type="text/javascript" src=""/script

script type="text/javascript" src=""/script

/head

body

h2Basic CRUD Application/h2

pClick 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="lastname" width="50"Last Name/th

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

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

/tr

/thead

/table

div id="toolbar"

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

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:400px;height:280px;padding:10px 20px"

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

div class="ftitle"User Information/div

form id="fm" method="post" novalidate

div class="fitem"

labelFirst Name:/label

input name="firstname" class="easyui-textbox" required="true"

/div

div class="fitem"

labelLast Name:/label

input name="lastname" class="easyui-textbox" required="true"

/div

div class="fitem"

labelPhone:/label

input name="phone" class="easyui-textbox"

/div

div class="fitem"

labelEmail:/label

input name="email" class="easyui-textbox" validType="email"

/div

/form

/div

div id="dlg-buttons"

a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px"Save/a

a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px"Cancel/a

/div

script type="text/javascript"

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

style type="text/css"

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

link rel="stylesheet" type="text/css" href=""

link rel="stylesheet" type="text/css" href=""

link rel="stylesheet" type="text/css" href=""

link rel="stylesheet" type="text/css" href=""

script type="text/javascript" src=""/script

script type="text/javascript" src=""/script

easyui 怎么设置form所有元素不可改

jquery easyui对表单的提交进行了封装，提交的方式采用ajax方式，在开发时应注意如下事项：

1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交时，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。

2、慎用使用其他UI表单组件。目前Jquery提供了足够的表单控件，也能够满足我们实际的需求。

如果在表单中使用了其他Ui表单组件，将会发现用其他表单组件提交的参数，在后台接受不到相关的参数。这是由于jqeury easyui中的form表单不能够识别其他UI表单组件。

3、异常情况：

在添加窗口添加完相关表单内容之后，不要刷新页面直接对添加的记录进行修改，结果修改一直无效，内容一直是添加的内容。

从这种现象看来应该是，在修改的时候提交的表单一直添加页的。找到代码查看了添加表单的id和修改表单的id尽然是一样的。

总结：在进行定义表单的id时最好不要重复，防止表单提交出错。

当然还有其他解决方式，那就是对添加完成后，销毁表单内容或直接将表单的内容clear。

jqueryeasyui封装的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery封装组件、jqueryeasyui封装的信息别忘了在本站进行查找喔。