`
单一色调
  • 浏览: 86306 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

使用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'
);
returnnull
;
}
}

/*
*
* 在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'
);
returnnull
;
}
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);
});
}
});
}
}

分享到:
评论

相关推荐

    使用Jquery_EasyUi常见问题解决方案

    ### 使用Jquery_EasyUi常见问题解决方案 #### 1. 清空指定表单中的内容 在使用Jquery_EasyUi开发过程中,特别是在处理表单数据时,经常会遇到需要清空表单的情况,例如在弹出窗口中进行数据录入之后需要清除上一次...

    jquery easyUi使用文档pdf 和 word版本

    4. **常见问题解答**:收集并解答了使用过程中可能遇到的问题,帮助开发者快速解决问题。 5. **最佳实践**:分享了一些开发经验,如何优化代码结构,提高页面性能,以及遵循的良好编程习惯。 总的来说,这两份文档...

    jQuery EasyUI中文手册

    9. **实战示例**:手册通常会包含大量代码示例,帮助读者通过实际操作掌握知识,包括基本组件的使用,复杂功能的实现,以及常见问题的解决方案。 10. **API参考**:提供完整的API文档,列出所有组件的属性、方法和...

    jQuery EasyUI 1.5.1 离线中文API文档 含完整开发工具包+皮肤+扩展+演示+各版权API chm 最新 最全 纯净

    总的来说,这个压缩包是一个完整的jQuery EasyUI开发环境,提供了从文档学习、开发工具到示例演示的一站式解决方案,对于任何使用jQuery EasyUI进行Web开发的人员来说都是极具价值的资源。通过深入学习和实践,...

    李炎恢jQuery EasyUI视频教程

    #### 七、常见问题与解决方案 - **Q1:如何解决浏览器兼容性问题?** - A1:确保使用了最新版本的jQuery EasyUI,并在开发过程中进行多浏览器测试。 - **Q2:怎样优化性能?** - A2:减少DOM操作次数,合理使用...

    使用Jquery EasyUi长出现的问题解决方案

    本文将探讨一些常见的问题及其解决方案。 1. **加载顺序问题**:jQuery EasyUI依赖于jQuery库,因此确保jQuery先于EasyUI加载至关重要。如果顺序错误,可能导致组件无法正常工作。解决方法是在HTML中先引入jQuery,...

    jQueryEasyUI-1.3.6(含API文档)

    在"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...

    用 jquery easyui 做的一组界面原型

    总结,这个项目不仅展示了如何使用jQuery EasyUI创建基本的界面原型,还提供了实际问题的解决方案,对于想要学习或提高EasyUI使用技能的开发者来说,是一个宝贵的资源。通过深入研究和实践,开发者能够掌握EasyUI的...

    JQueryEasyui1.3.6+电子书文档+14套主题

    4. **常见问题**:收集并解答开发者在使用过程中可能遇到的问题,提供解决方案。 5. **API参考**:列出所有组件的API接口,便于查阅。 14套主题则提供了多种视觉风格,包括颜色、字体、边框等设计元素的组合,使得...

    jQuery EasyUI 1.4

    另外,还有诸如 `tabs`(选项卡)、`pagination`(分页)、`slider`(滑块)和 `datebox`(日期选择器)等组件,它们都是网页开发中的常见需求,jQuery EasyUI 都提供了对应的解决方案。 在使用过程中,遇到问题时...

    jQuery EasyUI 1.5.2 版 API 中文版 .rar

    总结来说,jQuery EasyUI 1.5.2 版 API 中文版是开发人员不可或缺的工具,它提供了一套完整的解决方案,让开发者能够专注于业务逻辑,而不是繁琐的界面实现。通过深入学习和利用这个API,可以大大提升开发效率,创建...

    jQuery EasyUI 1.3.6 离线简体中文API文档CHM

    7. **兼容性和注意事项**:文档会提到jQuery EasyUI与不同浏览器的兼容性,以及在使用过程中需要注意的问题和常见问题的解决方案。 通过这个CHM文档,开发者不仅可以学习到jQuery EasyUI的各种功能,还能掌握如何将...

    jQuery EasyUI 1.5.1文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建...通过深入研究文档,你可以了解到每个组件的具体用法、参数设置以及常见问题的解决方案,从而在实际项目中得心应手。

    jquery Easyui 后台 系统

    开发者可以通过学习和分析这个示例,了解如何将 EasyUI 的组件应用到实际项目中,解决实际问题。 总结,jQuery EasyUI 是一个强大且易用的前端框架,适用于快速构建后台管理系统。通过掌握其主要组件和实践技巧,...

    jquery.easyui 整站html模板漂亮,兼容性很好

    对于那些还需要兼容旧版 Internet Explorer 的项目,jQuery EasyUI 提供了宝贵的解决方案,避免了因浏览器兼容性问题而带来的额外开发成本。 使用 jQuery EasyUI 创建整站HTML模板,开发者可以快速搭建出响应式布局...

    jquery easyui 和easyui帮助手册

    "帮助手册"则是一份详细的文档,通常会涵盖每个组件的使用方法、属性、事件和方法的详细说明,以及一些最佳实践和常见问题解答。通过查阅这份手册,开发者可以迅速查找所需信息,解决在开发过程中遇到的问题。手册中...

    jquery easyui 1.3.3 离线手册

    手册也会提供一些常见问题的解决方案,以及性能优化的建议,帮助开发者避免和解决潜在的问题。 总之,《jQuery EasyUI 1.3.3 离线手册》是开发人员的宝贵工具,它涵盖了从基本组件使用到高级功能实现的全方位指导...

    Jquery EasyUI学习资料集合

    4. **常见问题与解决方案**:汇总了开发过程中遇到的问题和对应的解决办法,有助于解决实际开发中的疑惑。 学习jQuery EasyUI,你需要熟悉它的核心组件和它们之间的协同工作方式。通过阅读API文档,你可以了解每个...

    jquery-easyui-1.3.5

    此外,EasyUI 的文档齐全,涵盖了各个组件的详细用法,使得开发者在遇到问题时能迅速找到解决方案。 "标签" "jquery" 和 "easyui" 分别代表了这个框架的基础和核心。jQuery 是一个流行的JavaScript库,以其简洁的...

    jQuery easyUI中英文api

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。这个框架是基于轻量级的 jQuery 库,使得开发者能够快速构建功能丰富的交互式...

Global site tag (gtag.js) - Google Analytics