在网上找了一些资料,都是关于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中的全选
$("#"+dataTableId).datagrid('unselectAll');
}
/**
*关闭Jquery EasyUi的弹出窗口(适用于Jquery Easy Ui)
*
*@paramdialogId将要关闭窗口的id
*/
function closeDialog(dialogId) {
$('#'+dialogId).dialog('close');
}
/**
*自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),除了datagrid自带的fitColumns属性外还可以自己封装个
*注:可以实现列表的各列宽度跟着浏览宽度的变化而变化,即采用该方法来设置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 row = $('#'+dataTableId).datagrid('getSelected');
if(null != row){
return row;
}else{
$.messager.alert('提示','记录为空','info');
return null;
}
}
/**
* 在DataGrid中获取所选记录的id,多个id用逗号分隔
* 注:该方法使用的前提是:DataGrid的idField属性对应到列表Json数据中的字段名必须为id,
* easyui有个小BUG,必须把主键单独列出,不然不能多选删除
* @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);
});
}
});
}
}
分享到:
相关推荐
使用Jquery_EasyUi常见问题解决方案
使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效
jquery EasyUI的API,方便使用easyui查看。。。。。。
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui 帮助文档 非常好用的
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的中文API不太多,而且版本都比较老,索性自己讲EasyUI官网给扣下来,然后做了翻译,文档是2月份过年的时候...
使用Jquery EasyUI制作的日历,单击input控件弹出日历选择日期,代码很简单,仅供参考
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jQuery EasyUI中文参考手册.chm
jQuery EasyUI将复杂的JavaScript细节加以隐藏,开发者接触的只是最简单的标签代码,因此学习和使用jQuery EasyUI都是十分容易的。 jQuery EasyUI 1.0.5主要包括如下改进: 1. jQuery EasyUI 1.0.5修正了panel...