jQuery easyUI框架中经常出现的问题

相信开发者对于我们jquery来说都不会陌生吧,jquery为我们的开发提供了很多各式各样的库,满足各种开发的需求,其中我们知道的有轻量级的,但是也有一些基于富客服端的一些重量级库,顾名思义,当我们在使用这些库的时候就难以避免的会出现一些问题,下面我罗列了一些我们在使用easyUI进行企业级开发时常见的一些问题,以及解决办法,希望能够帮助到各位。

1.清空指定表单中的内容,参数为目标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();
}
}

2.刷新DataGrid列表(适用于Jquery Easy Ui中的dataGrid)

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

3.取消DataGrid中的行选择(适用于Jquery Easy Ui中的dataGrid)

/**
*取消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);
}

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

5.自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),

/**
*自适应表格的宽度处理(适用于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;
}

6.获取所选记录行(单选)
*
* @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;
}
}

7.在DataGrid中获取所选记录的id,多个id用逗号分隔

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

8.删除所选记录(适用于Jquery Easy Ui中的dataGrid)(删除的依据字段是id)

/**
*删除所选记录(适用于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-08-02 06:59:57

jQuery easyUI框架中经常出现的问题的相关文章

Jquery Easyui框架中常用的验证

对于validatebox空间,验证其输入字符长度的最大值是否超出数据库中设置的字段长度.方法如下: 1 /** 2 * 验证输入字符长度 3 */ 4 $.extend($.fn.validatebox.defaults.rules, { 5 maxLength: { 6 validator: function(value, param){ 7 if(value.length >= param[0]) { 8 // showMsg("输入信息长度不能超过"+ param[0]

JQuery EasyUI框架学习

前言 新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,需要我这菜鸟对EasyUI框架进行一些基础的入门学习.之后会在学习的过程中将自己遇到的问题和有用的东西记录下来. 关于EasyUI EasyUI框架式基于JQuery的,使用它帮助我们快捷的构建web网页.EasyUI框架是一个简单.易用.强大的轻量级web前端javascript框架.现阶段来说,在开发web项目时,前端的开发我们更喜欢使用

jQuery EasyUI API 中文文档

http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页 jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 2011-11-19 18:51 阅读:25025 评论:3 jQuery EasyUI API 中文文档 - 树(Tree) 风流涕淌 2011-11-18 20:13 阅读:31937 评论:2 jQuery EasyUI 1.2.4 API 中文文档(完整)目录 风流涕淌 2011-11-17

jQuery EasyUI API 中文文档 - ValidateBox验证框

jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 defaults. 用法 代码如下: <input id="vv" required="true" validType="email"> 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

这是由于tabs对href重载的的问题导致,因此我们需要将href更改为其它自定义的属性即可避免此问题的发生. 解决方法如下: 第一步页面端: 循环体开始 <li> <div><a target="tagFrame" href="@n.Url" ><span class="icon icon-sys"> </span>@n.Title</a></div> <

JQuery easyUI框架(一)—Json传值

JQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. easyUI一般通过Json串与后台进行交互,下面具体介绍怎样使用Json. 一.Json JSON:JavaScript 对象表示法(JavaScript ObjectNotation),用于存储和交换文本信息的语法

JQuery easyUi datagrid 中 editor 动态设置最大值最小值

前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagrid 可编辑行的editor属性具有 min 和 max 属性,设置可以输入的最大值和最小值,但是这个是固定的,如下: [html] view plain copy {field:'workRate',title:'<%/*填报*/%><bean:message key="task.wo

jQuery EasyUI API 中文文档 - Panel面板

<html> <head> <title>布局管理器--控制面板</title> <script src="jquery-easyui/jquery.min.js"></script> <script src="jquery-easyui/jquery.easyui.min.js"></script> <script src="jquery-easyui/

jQuery原生框架中的jQuery.fn.extend和jQuery.extend

extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的,而区分这两个 extend 方法是理解 jQuery 的很关键的一部分.先看结论: 1)jQuery.extend(object) 为扩展 jQuery 类本身,为类添加新的静态方法: 2)jQuery.fn.extend(ob