使用Jquery EasyUi常见问题解决方案

/**
*清空指定表单中的内容,参数为目标form的id
*注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史
*数据,此时通常采用的方法是对每个输入组件进行置空操作:$("#name").val(""),这样做,
*当输入组件比较多时会很繁琐,产生的js代码很长,这时可以将所有的输入组件放入个form表单
*中,然后调用以下方法即可。
*
*@param formId将要清空内容的form表单的id
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
}

/**
*刷新DataGrid列表(适用于Jquery Easy Ui中的dataGrid)
*注:建议采用此方法来刷新DataGrid列表数据(也即重新加载数据),不建议直接使用语句
*$(‘#dataTableId‘).datagrid(‘reload‘);来刷新列表数据,因为采用后者,如果日后
*在修改项目时,要在系统中的所有刷新处进行其他一些操作,那么你将要修改系统中所有涉及刷新
*的代码,这个工作量非常大,而且容易遗漏;但是如果使用本方法来刷新列表,那么对于这种修
*该需求将很容易做到,而去不会出错,不遗漏。
*
*@paramdataTableId将要刷新数据的DataGrid依赖的table列表id
*/
function flashTable(dataTableId) {
$(‘#‘ + dataTableId).datagrid(‘reload‘);
}

/**
*取消DataGrid中的行选择(适用于Jquery Easy Ui中的dataGrid)
*注意:解决了无法取消"全选checkbox"的选择,不过,前提是必须将列表展示
*数据的DataGrid所依赖的Table放入html文档的最全面,至少该table前没有
*其他checkbox组件。
*
*@paramdataTableId将要取消所选数据记录的目标table列表id
*/
function clearSelect(dataTableId) {
$(‘#‘ + dataTableId).datagrid(‘clearSelections‘);
//取消选择DataGrid中的全选
$("input[type=‘checkbox‘]").eq(0).attr("checked", false);
}

/**
*关闭Jquery EasyUi的弹出窗口(适用于Jquery Easy Ui)
*
*@paramdialogId将要关闭窗口的id
*/
function closeDialog(dialogId) {
$(‘#‘ + dialogId).dialog(‘close‘);
}

/**
*自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),
*注:可以实现列表的各列宽度跟着浏览宽度的变化而变化,即采用该方法来设置DataGrid
*的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
*使用方法:(如:{field:‘ymName‘,title:‘编号‘,width:fillsize(0.08),align:‘center‘},)
*
*@parampercent当前列的列宽所占整个窗口宽度的百分比(以小数形式出现,如0.3代表30%)
*
*@return通过当前窗口和对应的百分比计算出来的具体宽度
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}

/**
* 获取所选记录行(单选)
*
* @paramdataTableId目标记录所在的DataGrid列表的table的id
* @paramerrorMessage 如果没有选择一行(即没有选择或选择了多行)的提示信息
*
* @return 所选记录行对象,如果返回值为null,或者"null"(有时浏览器将null转换成了字符串"null")说明没有
*选择一行记录。
*/
function getSingleSelectRow(dataTableId, errorMessage) {
var rows = $(‘#‘ + dataTableId).datagrid(‘getSelections‘);
var num = rows.length;
if (num == 1) {
return rows[0];
} else {
$.messager.alert(‘提示消息‘, errorMessage, ‘info‘);
return null;
}
}

/**
* 在DataGrid中获取所选记录的id,多个id用逗号分隔
* 注:该方法使用的前提是:DataGrid的idField属性对应到列表Json数据中的字段名必须为id
* @paramdataTableId目标记录所在的DataGrid列表table的id
*
* @return 所选记录的id字符串(多个id用逗号隔开)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
var rows = $(‘#‘ + dataTableId).datagrid(‘getSelections‘);
var num = rows.length;
var ids = null;
if (num < 1) {
if (null != noOneSelectMessage) $.messager.alert(‘提示消息‘, noOneSelectMessage, ‘info‘);
return null;
} else {
for (var i = 0; i < num; i++) {
if (null == ids || i == 0) {
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
}
}
return ids;
}
}

/**
*删除所选记录(适用于Jquery Easy Ui中的dataGrid)(删除的依据字段是id)
*注:该方法会自动将所选记录的id(DataGrid的idField属性对应到列表Json数据中的字段名必须为id)
*动态组装成字符串,多个id使用逗号隔开(如:1,2,3,8,10),然后存放入变量ids中传入后台,后台
*可以使用该参数名从request对象中获取所有id值字符串,此时在组装sql或者hql语句时可以采用in
*关键字来处理,简介方便。
*另外,后台代码必须在操作完之后以ajax的形式返回Json格式的提示信息,提示的json格式信息中必须有一个
*message字段,存放本次删除操作成功与失败等一些提示操作用户的信息。
*
*@paramdataTableId将要删除记录所在的列表table的id
*@paramrequestURL与后台服务器进行交互,进行具体删除操作的请求路径
*@paramconfirmMessage 删除确认信息
*/

function deleteNoteById(dataTableId, requestURL, confirmMessage) {
if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
confirmMessage = "确定删除所选记录?";
}
var rows = $(‘#‘ + dataTableId).datagrid(‘getSelections‘);
var num = rows.length;
var ids = null;
if (num < 1) {
$.messager.alert(‘提示消息‘, ‘请选择你要删除的记录!‘, ‘info‘);
} else {
$.messager.confirm(‘确认‘, confirmMessage, function (r) {
if (r) {
for (var i = 0; i < num; i++) {
if (null == ids || i == 0) {
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
}
}
$.getJSON(requestURL, { "ids": ids }, function (data) {
if (null != data && null != data.message && "" != data.message) {
$.messager.alert(‘提示消息‘, data.message, ‘info‘);
flashTable(dataTableId);
} else {
$.messager.alert(‘提示消息‘, ‘删除失败!‘, ‘warning‘);
}
clearSelect(dataTableId);
});
}
});
}
}

时间: 2024-10-08 00:33:57

使用Jquery EasyUi常见问题解决方案的相关文章

jquery easyui常见问题:

1.jquery easyui1.4.2 demo在ie10 上加载json的时候没有效果 从官网上下载了jquery easyui1.4.2 里面有个demo文件夹,但是发现底下的demo在IE.360等IE核浏览器上加载json的时候没有效果,而在火狐下很正常.另附: 以demo地下的datagrid的columngroup.html 设置了url 但是不生效.在ie8以下会出现一些脚本错误,ie9以上是没提示错误,但就是数据显示不出来.请各位大侠指点指点把demo整个例子放到iis 上后,

jquery easyui 1.3.4 datagrid pageNumber 設置導致兩次請求的解决方案

$('#table').datagrid({ url: '/get/data/path/to/your/server', pageNumber: 2, pageSize: 10, ... }); 當手動設置 pageNumber >= 2 時,查看網络請求會有兩次,並且第二次的請求的 pageNumber == 1: 二.原因: jquery.easyui.min.js 1.3.4 的 7821-7828 行代碼: 因为分頁控件初始化参數 total == 0, pageNumber == 1,

【转】 jquery easyui Tab 引入页面的问题

原地址:http://blog.csdn.net/superdog007/article/details/8225518 jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段. 加载远程url时有遮罩效果,也就是“等待中……”效果

jquery easyui tab加载内容的几种方法

转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: content方式加载数据的特点: 简单总结: href常见问题: 1.href只加载目标URL的html片段 2.短暂的页面混乱: 3.html片段的

jquery easyui Tab 引入页面的问题

jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段. 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好. 当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser

jQuery EasyUI Datagrid性能优化专题(转)

jQuery  EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能 都望而却步了.本博客以后会带着分析Datagrid组件的性能问题,并且给出优化方案,也希望大家能集思广益,给出一些好的想法. 慢在哪些方面 以目前对Datagrid的了解程度去看待性能问题,主要有以下几点: 加载大数据量时比较慢(不考虑服务端返回数据的时间),这点尤其体现在IE浏览器里面: 大数据量时,加载后,操作很不流畅,勾选慢,sin

jQuery EasyUI Datagrid VirtualScrollView视图简单分析

大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中,这样

开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo(转)

热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI.它有完整的demo和强大AIP手册,使我在开发过程中得心 应手.以下是这篇博文Demo程序的演示效果: 解决方案如图1所示 图1 Domain:领域模型 Dao:持久层 Service:服务层 WebSite:表示层 Common:通用类 首页如图2所示,可以选择中文和English. 图2 英文首