/**
* 使用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常见问题解决方案
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的中文API不太多,而且版本都比较老,索性自己讲EasyUI官网给扣下来,然后做了翻译,文档是2月份过年的时候...
用 easyui 1.1.1 做的一组界面原型,可用于学习easyui的使用. 针对 easyui 使用中的一些问题给出了解决方案.
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的API不太多,而且版本都比较老,索性自己将EasyUI官网给扣下来,做成了一份离线API,由于开发现场是封闭...
在开发您的解决方案时,没有任何限制。没有任何种类的版税 允许对该软件进行修改,但您可能不会: a) 分发修改的软件或独立的应用程序作为它的部件 b) 从属许可、出租、租赁或借给软件的任何部分修改或删除任何...
主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
jquery easyui 1.3.6 是最新的版本,里面包含新的技术,新的视觉体验,新加了一些功能,本文件包含demo 以及使用说明,还有解决问题的一些方法。
easyUI 1.4版本 easyui-numberbox输入不了小数点bug 解决办法: 第一种方法:升级当前easyUI版本(鄙视) 第二种方法:官方提供了bug的解决办法,办法如下
——学习参考资料:仅用于个人学习使用! javascript代码-使用代码解决Jquery给easyui的表单元素赋值,获取值总结的源代码
项目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好处自然是页面不刷新,用户感觉比较好,同时也减少了一部分数据量的传输。
jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...
在使用UasyUI的时候,在一般的input输入框上...目前我有三种方案,其中方案一最好,因为他是在EasyUI的基础上的方案,其他两种也能解决,但是方案二要加图标或按钮,相信大多人都不愿意,方案三是原生的JS起的作用。
NULL 博文链接:https://wangyispider.iteye.com/blog/788804
主要介绍了jQuery EasyUI Tab 选项卡问题小结,在项目开发阶段很多朋友都遇到过此问题,其实解决办法很简单的,下面小编给大家分享下问题原因及解决办法,需要的朋友可以参考下
主要介绍了jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法,较为详细的描述了出现的问题、问题的原因及相应的解决方法,需要的朋友可以参考下
于是想到了是jquery-easyui 对界面的"渲染"不正确引起. 起初以为是因为加了 处理重复的代码引起,但是去掉后总是依旧: 进而考虑到界面"渲染"的前后关系,于是尝试对代码片段进行延迟执行,问题解决.原问题...
除提供常规EasyUI组件美化,还拥有InsdepUI提供的EasyUI兼容组件及第三方开源插件如:百度编辑器、cropper、Highcharts、justgage、plupload等各类适应兼容解决方案与插件美化补丁。Insdep UI致力于打造后端工程师的...