easyui中datagrid 操作栏格式化为按钮的数据显示错位问题

yanxin9210 2015-05-11 04:24:54
在使用easyui的过程中,通过使用onLoadSuccess将操作栏格式化成按钮之后,就会出现表格中数据错位的问题;将onLoadSuccess注释掉后,恢复正常。
不知道这里面是有什么问题,下面附上界面截图和datagrid的js代码,希望大牛们帮忙看看~~感激不尽啊!!

图片中红框的左侧是冻结列,右边是非冻结列,就错位了;
如果红框左侧不设置冻结列的话,就是行号和右边的数据列错位。




$(function(){
$('#dg').datagrid({
title:"学员信息",
url:'system/studentinfo/data_getalllist',
toolbar:'#toolbar',
rownumbers:true, //true 显示行号
pagination:true, //true 允许分页
collapsible:true, //true 可折叠
//singleSelect:true, //true 只允许单选
striped:true, //true 就把行条纹化(即奇偶行使用不同背景色)
fitColumns:true, //true 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
fit:true, //true 自动补全
nowrap:false, //false 允许数据换行
loadMsg:"正在加载数据,请稍等", //加载数据时,显示的提示信息
frozenColumns:[[
{field:'student_ID',title:'编号',width:50,align:'center',checkbox:true},
{field:'student_NUM',title:'学号',width:80,align:'center',sortable:true},
{field:'student_NAME',title:'姓名',width:80,align:'center'}
]],
columns:[[
{field:'student_SEX',title:'性别',width:50,align:'center',rowspan:2},
{field:'rank_NAME',title:'级别',width:80,align:'center',rowspan:2},
{field:'student_IS_PAYTUITION',title:'是否已交学费',width:80,align:'center',rowspan:2,
formatter:function(value, record){
if (value == "N") {
value = "未交费";
return '<span style="color:red;">' + value + '</span>';
} else {
value = "已交费";
return value;
}
}
},
{field:'tuition_info',title:'学费信息',align:'center',colspan:3},
{field:'student_STARTTIME',title:'注册时间',width:80,align:'center',rowspan:2},
{field:'student_IS_ONSTUDY',title:'是否在学',width:80,align:'center',rowspan:2,
formatter:function(value, record){
if (value == "Y") {
value = "是";
return value;
} else {
value = "否";
return '<span style="color:red;">' + value + '</span>';
}
}
},
{field:'student_PHONE',title:'联系电话',width:100,align:'center',rowspan:2},
{field:'showdetail',title:'详细',width:100,align:'center',rowspan:2,
formatter:function(value, row, index){
var btn1 = '<a class="detailcls" href="javascript:void(0)" onclick="showdetail('+index+')" ></a>';
return btn1;
}
},
{field:'opr',title:'操作',width:100,align:'center',rowspan:2,
formatter:function(value, row, index){
var btn2 = '<a class="editcls" href="javascript:void(0)" onclick="editStudent('+index+')" ></a>';
return btn2;
}
}],
[{field:'tuition_TYPE',title:'学费类别',width:80,align:'center'},
{field:'student_TUITION_STARTTIME',title:'交费时间',width:80,align:'center'},
{field:'student_TUITION_ENDTIME',title:'到期时间',width:80,align:'center'}
]],
onLoadSuccess:function(data){
$('.detailcls').linkbutton({text:'详细信息',plain:true,iconCls:'icon-edit'});
$('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});
}
})
});

...全文
826 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
yanxin9210 2015-05-11
  • 打赏
  • 举报
回复
在技术问答区已得到“逝_去_的_光_阴”的解答, 在onLoadSuccess里最后加上 $('#dg').datagrid('fixRowHeight'); 解决! 即固定行高
tony4geek 2015-05-11
  • 打赏
  • 举报
回复
冻结过后好像高低变小了。 你统一下看看。 这个你调代码吧,css 样式问题。
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签 1.3.6更新 Bug treegrid: getChecked方法不能返回正确的行. fixed. tree: 异步树,在onlyLeafCheck:true时复选框不显示正确. fixed. Improvement treegrid:继承datagrid组件所有的selecting和checking方法。 linkbutton:图标对齐方式,支持值:'top','bottom','left','right'。 linkbutton:添加"size"属性,支持值:'small','large'。 linkbutton:添加的onClick事件。 menubutton:添加"menuAlign"属性,允许用户设置顶级菜单对齐。 combo:添加"panelAlign"属性,支持值:'left','right'。 calendar:"formatter"、"styler"和"validator"选项可用于自定义日历日期。 calendar:添加的onChange事件。 panel:添加"method","queryParams"和"loader"属性。 panel:添加"onLoadError"事件。 datagrid:添加"onBeginEdit"事件。 datagrid:添加"onEndEdit"事件。 datagrid:添加"sort"方法和"onBeforeSortColumn"事件。 datagrid:"combogrid"编辑器集成到datagriddatagrid:添加"ctrlSelect"属性,允许使用ctrl+click 多选 slider:添加"converter"选项,允许用户决定如何将一个值转换为滑块的位置或滑块位置值。 searchbox:添加"disabled"属性。 searchbox:添加"disabled","enable","clear","reset"方法。 spinner:添加"readonly"属性、"readonly"方法和"onChange事件。
最新版本的jQuery EasyUI 1.3.6版全文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接提供到API包里面,方便没有去官网下载的人直接使用。请大家持续关注我发布的资源,不出意外,我是会一直持续更新本API文档的。本次更新内容大约有30个,Bug修复的只有2个,剩下的全是新增内容,EasyUI的控件已经越来越好用了,顶一个。但是希望能把性能也提升提升,总是感觉在某些情况下EasyUI的性能不是太好。具体更新内容请看下面的说明: jQuery EasyUI 1.3.6版本更新内容: Bug(修复) treegrid:修复“getChecked”方法不能正确的返回被选择的行的问题; tree:修复在“onlyLeafCheck”属性为true时,复选框无法在异步树种正确显示问题。 Improvement(改进) treegrid:所有的选择和选的方法都扩展自datagrid组件; linkbutton:添加图标对齐功能的完整支持,可用值有:“top”、“bottom”、“left”、“right”; linkbutton:添加“size”属性,可用值有:“small”、“large”; linkbutton:添加“onClick”事件; menubutton:添加“menuAlign”属性,该属性允许用户设置顶级菜单对齐; combo:添加“panelAlign”属性,可用值有:“left”、“right”; calendar:添加“formatter”、“styler”和“validator”属性,这些属性允许用于自定义日历日期; calendar:添加“onChange”事件; panel:添加“method”、“queryParams”和“loader”选项; panel:添加“onLoadError”事件; datagrid:添加“onBeginEdit”事件,该事件在一个行进入编辑模式时触发; datagrid:添加“onEndEdit”事件,该事件在完成编辑但是编辑器尚未销毁之前触发; datagrid:添加“sort”方法和“onBeforeSortColumn”事件; datagrid:将“combogrid”编辑器集成到datagriddatagrid:添加“ctrlSelect”属性,在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作; slider:添加“converter”属性,该属性允许用户决定如何将一个值转换为进度条位置或进度条位置值; searchbox:添加“disabled”属性; searchbox:添加“disable”、“enable”、“clear”、“reset”方法; spinner:添加“readonly”属性、“readonly”方法和“onChange”事件。

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧