easyui使用总结使用,总结,使用小结
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
easyui使用总结
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口jquery post方式传递多个参数值后台以数组的方式进行接收
阅读：1620次&&&时间： 12:32:39&&
在用jquery的post方式传递多个值时，在后台页面可以用数组形式接收 如下所示 复制代码 代码如下:&script type="text/javascript"& $(function () { timestamp = 0; $("#chatform").submit(function () { var message = $("#msg").val(); var name = $("#author").val(); var action = "postmsg"; var time = $.post( "backend.aspx", { arr: message+","+name+","+action+","+time }, function (xml) { //清空消息文本框中的内容 $("#msg").val(""); //调用解析xml的函数 addMessages(xml); });
}) }) &/script&以$.post方式不支持以数组的形式传递参数，所以在以上的jquery代码中把它作为字符串进行传递，在后台的aspx页面可以在接收后以数组的形式拆分，代码如下复制代码 代码如下:string arr = Request["arr"].ToString(); string[] myarr = arr.Split(','); string message = myarr[0]; string name = myarr[1]; string action = myarr[2]; string time = myarr[3];这样就能得到相应的值了。
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
[商业源码]&
Copyright &
All Rights Reserved当前位置：&>&&>&&>&
Jquery easyui中Form表单提交注意事项
发布时间：编辑：
本文介绍了Jquery easyui中Form表单提交的一些注意事项，需要的朋友参考下。
easyui对的提交进行了封装，提交的方式采用ajax方式，在开发时应注意如下事项：
1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交时，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。
2、慎用使用其他UI表单组件。目前Jquery提供了足够的表单控件，也能够满足我们实际的需求。
如果在表单中使用了其他Ui表单组件，将会发现用其他表单组件提交的参数，在后台接受不到相关的参数。这是由于jqeury easyui中的form表单不能够识别其他UI表单组件。
3、异常情况：
在添加窗口添加完相关表单内容之后，不要直接对添加的记录进行修改，结果修改一直无效，内容一直是添加的内容。
从这种现象看来应该是，在修改的时候提交的表单一直添加页的。找到代码查看了添加表单的id和修改表单的id尽然是一样的。
总结：在进行定义表单的id时最好不要重复，防止出错。
当然还有其他解决方式，那就是对添加完成后，销毁表单内容或直接将表单的内容clear。
附，网友问题：
能够把表单中的内容提交到后台，
是的。用的$.post 方法
这样是不可以的！$post不能够把表单中的内容提交到后台，而你必须使用jquery easyui本身带的$(&#id&).form({});进行表单的提交；
是的。用的$.post 方法
那个 你知道 easyui 弹出页面上 使用 上传的东西 提交方式吗？
为什么我 用这个 +springmvc 到后台取不到上传文件的值呢?
不知道你是否在提交表单的时候应用了jquery easyui表单提交的方式？
那个 你知道 easyui 弹出页面上 使用 上传的东西 提交方式吗？
为什么我 用这个 +springmvc 到后台取不到上传文件的值呢?
与 Jquery easyui中Form表单提交注意事项 有关的文章
本文标题：
本页链接：
12345678910在Asp.Net中使用JQueryEasyUI
最近做一个小工具，列表显示页面准备使用JQuery的UI框架，因为之前知道有jQWidgets这个框架,所以直接就下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现有几个问题就果断放弃了使用jQWidgets:
页面加载速度比较慢;
当列表字段过多出现横向滚动条时,拖动滚动条非常卡(在IE下都很卡,Chrome好点);
分页取数稍显麻烦,也可能是我没研究透。
经过一番比较选择了JQueryEasUI，目前最新版本为1.3.1：
其实是用类似的框架，看看官网的文档也就OK了，本文是我最近是用JQueryEasyUI的一个总结，也可以让初使用JQueryEasyUI的朋友少走弯路。
下载后解压的文件目录如下图：
demo：JQueryEasyUI的一些示例页面，在项目使用可以将该目录删除；
locale：该目录中是一些本地化文件，用来支持不同的语言，如中文可以引用其中的easyui-lang-zh_CN.js；
plugins和src：这两个目录中是支持JQueryEasyUI各种功能的js文件；
themes：主题目录，目录中有三种主题，default、gray和metro，另外还有一个icons目录和icon.css，在页面使用引用icon.css即可。
使用JQueryEasyUI需要引用四个文件，两个css和两个js文件：
&link rel=&stylesheet& type=&text/css& href=&../Scripts/jqueryeasyui/themes/gray/easyui.css& /&
&link rel=&stylesheet& type=&text/css& href=&../Scripts/jqueryeasyui/themes/icon.css& /&
&script type=&text/javascript& src=&../Scripts/jqueryeasyui/jquery-1.8.0.min.js&&&/script&
&script type=&text/javascript& src=&../Scripts/jqueryeasyui/jquery.easyui.min.js&&&/script&
如果需要使用本地化 还需要引用：
&script type=&text/javascript& src=&../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js&&&/script&
JQueryEasyUI Grid的分页
根据官网的文档可以很容易的构建Grid，期初我没有引用本地化文件easyui-lang-zh_CN.js，列表的分页栏显示出来是英文的，在网上查阅后得知可以用代码的方式重新构建分页栏：
//设置分页控件& var p = $('#dg').datagrid('getPager');
$(p).pagination({
&&& pageSize: 10, //每页显示的记录条数，默认为10& pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表& beforePageText: '第', //页数文本框前显示的汉字
&&& afterPageText: '页&&& 共 {pages} 页',
&&& displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
&&& /*onBeforeRefresh:function(){&&&&&&&&&&&&& $(this).pagination('loading');&&&&&&&&&&&&& alert('before refresh');&&&&&&&&&&&&& $(this).pagination('loaded');&&&&&&&&& }*/
后来发现只需要引用本地化文件easyui-lang-zh_CN.js后分页栏就自动显示为中文了。引用本地化文件还可以解决日历控件格式的问题，所以如果是做中文建议还是在页面中引用本地化文件。
JQueryEasyUI控件的取值
使用JQuery取控件的值很简单，如下：
$(&#CstName&).val();
$(&#TaskNo&).val(),
如果要使用JQueryEasyUI的日历控件、下拉控件或其他的一些控件，给普通的input、select控件添加一个class即可：
&input id=&FeedBackDate& name=&FeedBackDate& class=&easyui-datebox& maxlength=&10&
&style=&width: 150& /&
&select id=&IsKfCl& class=&easyui-combobox& name=&IsKfCl& style=&width:150&&
&&& &option value=&&&&/option&&&
&&& &option value=&是&&是&/option&&
&&& &option value=&否&&否&/option&&
现在取这些控件的值需要使用下面的方法：
$(&#FeedBackDate&).datebox(&getValue&);
$(&#IsKfCl&).combobox(&getValue&);
Grid ToolBar的两种方式
通常在Grid列表控件的上方会添加一些按钮如：新增、编辑、删除等，如下面效果：
在JQueryEasyUI中可以使用ToolBar来实现，ToolBar可以在DataGrid初始化时定义，如下：
$('#dg').datagrid({
&&& collapsible: false,
&&& fitColumns: true,
&&& singleSelect: true,
&&& remoteSort: false,
&&& sortName: 'RoleName',
&&& sortOrder: 'desc',
&&& nowrap: true,
&&& method: 'get',
&&& loadMsg: '正在加载数据...',
&&& url: '...',
&&& frozenColumns: [[
&&&&&&& { field: 'ck', checkbox: true }
&&& columns: [[
&&&&&&& { field: 'ID', title: 'ID',& 80, sortable: true },
&&&&&&& { field: 'Name', title: '名称',& 100,sortable:true }
&&& pagination: true,
&&& pageNumber: 1,
&&& rownumbers: true,
&&& toolbar:
&&&&&&&&&&& id: 'btnAdd',
&&&&&&&&&&& text: '添加',
&&&&&&&&&&& iconCls: 'icon-add',
&&&&&&&&&&& handler: function() {
&&&&&&&&&&&&&&& $(&#name&).val(&&);
&&&&&&&&&&&&&&& add();
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& '-',
&&&&&&&&&&& id: 'btnEdit',
&&&&&&&&&&& text: '编辑',
&&&&&&&&&&& iconCls: 'icon-edit',
&&&&&&&&&&& handler: function() {
&&&&&&&&&&&&&&& var selected = $('#dg').datagrid('getSelected');
&&&&&&&&&&&&&&& if (selected) {
&&&&&&&&&&&&&&&&&&& var name = selected.N
&&&&&&&&&&&&&&&&&&& $(&#Name&).val(name);
&&&&&&&&&&&&&&&&&&& edit();
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& '-',
&&&&&&&&&&& id: 'btnDelete',
&&&&&&&&&&& text: '删除',
&&&&&&&&&&& disabled: true,
&&&&&&&&&&& iconCls: 'icon-remove',
&&&&&&&&&&& handler: function() {
&&&&&&&&&&& }
&&&&&&& });
还有一种方法就是将ToolBar单独定义在div中，然后在DataGrid的初始化时关联div的ID，首先定义ToolBar的div，ID为tb：
&!--工具栏--&
&div id=&tb& style=&padding: 5 height:display:&&
&&& &div style=&margin-bottom: 5px&&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-add& onclick=&add()&&新增&/a&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-edit& onclick=&edit()&&编辑-&/a&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-edit& onclick=&copyAdd()&&拷贝&&/a&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-cut& onclick=&copyVss()&&复制地址&&/a&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-save& onclick=&downReg()&&下载REG&/a&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-remove& onclick=&del()&&删除y&/a&
&&&&&&& &!--查询区域--&
&&&&&&& 区域:&input id=&seaArea& style=&width: 100px& /&
&&&&&&& 客户名称:&input id=&seaCstName& style=&width: 100px& /&
&&&&&&& &a href=&#& class=&easyui-linkbutton& iconcls=&icon-search& onclick=&searchSrcCode()&&查询&/a&
&&& &/div&
在DataGrid的初始化时设置toobar属性值为tb：
pagination: true,
pageNumber: 1,
rownumbers: true,
toolbar: '#tb',
单独定义ToolBar个人认为要灵活些，也会让JS代码简洁些。
Form表单的提交
上面说过了列表的显示，下面就来讲下数据的提交，有两种方式可以实现：
自己组织数据然后用Ajax（GET POST）提交；
使用Form表单提交的方式。
我在刚使用的时候是使用的第一种方法：
function saveFeedBackLog(mode,id) {
&&& $.ajax({
&&&&&&& type: &POST&,
&&&&&&& dataType: &json&,
&&&&&&& //cache:true,
&&&&&&& url: &../Ajax/FeedBackLogAjax.ashx?Method=SaveFeedBackLog&,
&&&&&&& data: { FeedBackDate: $(&#FeedBackDate&).datebox(&getValue&),
&&&&&&&&&&& CstName: $(&#CstName&).val(),
&&&&&&&&&&& TaskNo: $(&#TaskNo&).val(),
&&&&&&&&&&& FeedBackContent: $(&#FeedBackContent&).val(),
&&&&&&&&&&& CsZrr: $(&#CsZrr&).combobox(&getValue&),
&&&&&&&&&&& CsYzResult: $(&#CsYzResult&).val(),
&&&&&&&&&&& IsKfCl: ,
&&&&&&&&&&& KfZrr: $(&#KfZrr&).combobox(&getValue&),
&&&&&&&&&&& EndDate: $(&#EndDate&).datebox(&getValue&),
&&&&&&&&&&& KfClDate: $(&#KfClDate&).val(),
&&&&&&&&&&& Wtyy: $(&#Wtyy&).val(),
&&&&&&&&&&& Mode:mode,
&&&&&&&&&&& ID:id
&&&&&&& },
&&&&&&& success: function (data) {
&&&&&&& //..........
当页面字段比较多的时候会比较麻烦，保存时需要将每个字段的值逐一取出传送到后台，编辑时也需要将行中各字段的值逐一取出赋给表单中的控件，后来发现JQueryEasyUI提供Form的Ajax提交的方式，会使代码精简很多,而且使用Form表单提交的方式还能用到JQueryEasyUI提供的一些验证控件。
编辑时赋值给表单
function edit() {
&&& var rowData = $('#dg').datagrid('getSelections');
&&& if (rowData.length == 0) {
&&&&&&& $.messager.alert('提示', '请选择要编辑的项！','info');
&&& else if (rowData.length & 1) {
&&&&&&& $.messager.alert('提示', '只能选择一项进行编辑！','info');
&&& else {
&&&&&&& _mode = &2&;
&&&&&&& var row = $('#dg').datagrid('getSelected');
&&&&&&& openDialog();
&&&&&&& $('#fm').form('load', row);
&&&&&&& _srcCodeManageID = row.SrcCodeManageID;
&&&&&&& url = &../Ajax/SrcCodeManageAjax.ashx?Method=SaveSrcCodeManage&ID=& + row.SrcCodeManageID+&&Mode=&+_
function saveSrc() {
&&& $('#fm').form('submit', {
&&&&&&& url: url,
&&&&&&& onSubmit: function () {
&&&&&&&&&&& return $(this).form('validate');
&&&&&&& },
&&&&&&& success: function (data) {
&&&&&&&&&&& if (data ==&Success&) {
&&&&&&&&&&&&&&& $('#dlg').dialog('close');&&&&& // close the dialog&
&&&&&&&&&&&&&&& $('#dg').datagrid('reload');&&& // reload the user data&
&&&&&&&&&&&&&&& $.messager.alert('提示', '保存成功!', 'info');
&&&&&&&&&&& }
&&&&&&&&&&& else if (data==&Error&)
&&&&&&&&&&& {
&&&&&&&&&&&&&&& $.messager.alert('错误', '系统出错!', 'error');
&&&&&&&&&&& }
可以看出第二种方法相比第一种代码精简了很多，而且保存时还能用到表单的一些校验，比如设置必填项、电话、邮件格式等。
当然JQueryEasyUI还有很多其他的控件和功能，有待以后慢慢研究，希望本文对你有所帮助。}