/**
* 使用Jquery EasyUI时经常出现的问题解决方案(如果你需要源代码请直接下载附件)
*
* @Author JiangShui
*
* @Date 2010-10-18
*/
/**
* 清空指定表单中的内容,参数为目标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');来刷新列表数据,因为采用后者,如果日后
* 在修改项目时,要在系统中的所有刷新处进行其他一些操作,那么你将要修改系统中所有涉及刷新
* 的代码,这个工作量非常大,而且容易遗漏;但是如果使用本方法来刷新列表,那么对于这种修
* 该需求将很容易做到,而去不会出错,不遗漏。
*
* @param dataTableId 将要刷新数据的DataGrid依赖的table列表id
*/
function flashTable(dataTableId){
$('#'+dataTableId).datagrid('reload');
}
/**
* 取消DataGrid中的行选择(适用于Jquery Easy Ui中的dataGrid)
* 注意:解决了无法取消"全选checkbox"的选择,不过,前提是必须将列表展示
* 数据的DataGrid所依赖的Table放入html文档的最全面,至少该table前没有
* 其他checkbox组件。
*
* @param dataTableId 将要取消所选数据记录的目标table列表id
*/
function clearSelect(dataTableId) {
$('#'+dataTableId).datagrid('clearSelections');
//取消选择DataGrid中的全选
$("input[type='checkbox']").eq(0).attr("checked",false);
}
/**
* 关闭Jquery EasyUi的弹出窗口(适用于Jquery Easy Ui)
*
* @param dialogId 将要关闭窗口的id
*/
function closeDialog(dialogId) {
$('#'+dialogId).dialog('close');
}
/**
* 自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),
* 注:可以实现列表的各列宽度跟着浏览宽度的变化而变化,即采用该方法来设置DataGrid
* 的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
* 使用方法:(如:{field:'ymName',title:'编号',width:fillsize(0.08),align:'center'},)
*
* @param percent 当前列的列宽所占整个窗口宽度的百分比(以小数形式出现,如0.3代表30%)
*
* @return 通过当前窗口和对应的百分比计算出来的具体宽度
*/
function fillsize(percent){
var bodyWidth = document.body.clientWidth;
return (bodyWidth-90)*percent;
}
/**
* 获取所选记录行(单选)
*
* @param dataTableId 目标记录所在的DataGrid列表的table的id
* @param errorMessage 如果没有选择一行(即没有选择或选择了多行)的提示信息
*
* @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
* @param dataTableId 目标记录所在的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字段,存放本次删除操作成功与失败等一些提示操作用户的信息。
*
* @param dataTableId 将要删除记录所在的列表table的id
* @param requestURL 与后台服务器进行交互,进行具体删除操作的请求路径
* @param confirmMessage 删除确认信息
*/
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);
});
}
});
}
}
分享到:
相关推荐
JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的 UI 组件,如对话框...无论是在表单中选择特定日期,还是在其他场景下需要日期选择功能,JQuery EasyUI 的日历组件都是一个高效且实用的解决方案。
总结起来,SSH+jQuery EasyUI后台管理系统是将SSH的强大学术和企业支持与jQuery EasyUI的易用性和美观性相结合,以提供高效、可维护的后台管理解决方案。通过这种方式,开发者可以专注于业务逻辑,而无需过多关注...
9. **实战示例**:手册通常会包含大量代码示例,帮助读者通过实际操作掌握知识,包括基本组件的使用,复杂功能的实现,以及常见问题的解决方案。 10. **API参考**:提供完整的API文档,列出所有组件的属性、方法和...
### 使用Jquery_EasyUi常见问题解决方案 #### 1. 清空指定表单中的内容 在使用Jquery_EasyUi开发过程中,特别是在处理表单数据时,经常会遇到需要清空表单的情况,例如在弹出窗口中进行数据录入之后需要清除上一次...
在开发过程中,遇到具体问题时,查阅这份文档可以快速找到解决方案。 总之,jQuery EasyUI 是一个强大且易于使用的前端框架,其组件丰富,API 设计合理。通过深入学习和掌握 API,开发者可以构建出高效、美观的 Web...
本教程“jQueryEasyUI从零开始学源码part1”旨在帮助初学者深入理解jQuery EasyUI的工作原理,通过源码分析来提升开发技能。 首先,我们需要了解jQuery EasyUI的基础概念。jQuery是一个轻量级的JavaScript库,简化...
#### 七、常见问题与解决方案 - **Q1:如何解决浏览器兼容性问题?** - A1:确保使用了最新版本的jQuery EasyUI,并在开发过程中进行多浏览器测试。 - **Q2:怎样优化性能?** - A2:减少DOM操作次数,合理使用...
jQuery EasyUI Desktop 是一个基于JavaScript库jQuery和EasyUI框架的桌面化应用程序开发解决方案。它旨在为Web应用提供一种类似于Windows操作系统(特别是Windows 8)的用户交互体验,使得用户可以在浏览器中享受...
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的中文API不太多,而且版本都比较老,索性自己讲EasyUI官网给扣下来,然后做了翻译,文档是2月份过年的时候...
总的来说,这个压缩包是一个完整的jQuery EasyUI开发环境,提供了从文档学习、开发工具到示例演示的一站式解决方案,对于任何使用jQuery EasyUI进行Web开发的人员来说都是极具价值的资源。通过深入学习和实践,...
- **跨浏览器兼容**:EasyUI 支持主流浏览器,如 Chrome、Firefox、Safari 和 IE,减少了浏览器兼容性问题的解决时间。 - **响应式设计**:内置的响应式布局适应不同设备屏幕,有助于构建移动优先的 web 应用。 - **...
在"jQueryEasyUI-1.3.6(含API文档)"这个压缩包中,有两个主要文件:`jEasyUI1.3.6版API中文版(Richie696).chm`和`jquery-easyui-1.3.6`。 `jEasyUI1.3.6版API中文版(Richie696).chm`是jQuery EasyUI 1.3.6版本的API...
对于开发者而言,API文档是学习和理解框架功能的关键工具,它可以提供详尽的函数介绍、参数说明以及使用示例,帮助开发者高效地掌握jQuery EasyUI的使用方法。 jQuery EasyUI 的核心知识点包括: 1. **组件库**:...
总结,这个项目不仅展示了如何使用jQuery EasyUI创建基本的界面原型,还提供了实际问题的解决方案,对于想要学习或提高EasyUI使用技能的开发者来说,是一个宝贵的资源。通过深入研究和实践,开发者能够掌握EasyUI的...
总的来说,"jquery-easyui-1.2.2"作为一个强大的前端开发工具,它以jQuery为基础,提供了一整套完善的UI解决方案。无论你是初学者还是经验丰富的开发者,都可以通过这个框架快速构建出功能强大、界面美观的Web应用。...
4. **常见问题**:收集并解答开发者在使用过程中可能遇到的问题,提供解决方案。 5. **API参考**:列出所有组件的API接口,便于查阅。 14套主题则提供了多种视觉风格,包括颜色、字体、边框等设计元素的组合,使得...
jQuery EasyUI 支持与服务器端的数据交互,可以使用 AJAX 方法获取、提交数据,配合 JSONP 或 CORS 实现跨域请求,轻松实现前后端分离的开发模式。 8. **响应式设计** 虽然 jQuery EasyUI 的主要关注点在于桌面端...
描述中提到,通过学习这些“demo”,你可以迅速熟悉并上手使用jQuery EasyUI。这是因为实践是最好的老师,示例提供了直观的代码和运行效果,使学习过程更具针对性。同时,如果在学习过程中遇到任何疑问,官方的帮助...
另外,还有诸如 `tabs`(选项卡)、`pagination`(分页)、`slider`(滑块)和 `datebox`(日期选择器)等组件,它们都是网页开发中的常见需求,jQuery EasyUI 都提供了对应的解决方案。 在使用过程中,遇到问题时...