关于easyui 可编辑表格使用心得
来源:互联网 发布:js animate 编辑:程序博客网 时间:2024/05/16 16:06
使用easyui框架也两个多月了,由于项目需要,对于组件可编辑表格(editable datagrid)的性能曾经深深沮丧过,竟然到了噩梦的程度,且听我细细道来:
由于组件中对行的动态添加、选择操作 都需要获取某行的焦点(beginEdit和endEdit参数),并且行数增多时候操作极其不便,很容易造成浏览器脚本停止执行,浏览器卡死导致设置的数据丢失,这对用户操作无疑是几近崩溃;并且由于项目中每行用到了combobox组件实现下拉框的选择设置,对于新增行的默认选项置空,都需要用户自己点击,页面很容易卡死,造成数据安全问题,用户体验差。综上所述,终是不得不放弃,寻求新的思路,新的解决方法。
想到easyui框架中对可编辑表格必然大量的封装、复制,必然代价很高,于是开始使用最原始的、纯html、jQuery实现动态复制、添加行数据,动态删除行,等等操作,这么做下来,发现生成行数据性能几乎大幅度提升,大概十几倍,并且对于下拉框select标签的选择也很easy,不需要再获取焦点了~。~,这无疑是大快人心,大声疾呼啊!<ps:很多人可能会担心页面样式丑陋,尤其是datagrid-toolbar和表格行datagrid-view的样式,但是可以将easyui的样式加进去,采用组件的样式,用火狐浏览器控制台将代码扣下来,加进去自己为表格定义的样式和id。对其整理抽离还是不难的!例如:
//添加行换色效果
$(".datagrid-row").bind('mouseenter mouseleave',function(){
$(this).toggleClass("datagrid-row-over");//使用组件的样式
});>
由于可编辑表格是处于easyui的窗口window中,window的content属性加载另外一个iframe页面内容,这样做虽然导致了引入资源文件浪费,但是对于这种js代码逻辑比较多的还是值得的,我们也知道使用window的href属性只能加载body内容,这不可行;由于项目需要还需要一个数据加载中的 遮罩效果提示示,可是window的loadMsg发现不起作用,于是乎查看源码,细细琢磨,终于发现解决思路:在window的onOpen函数这样定义:
onOpen:function(){
var _self = $(this);//此为window窗口本身
var msg=$("<div class=\"datagrid-mask-msg\" style=\"display:block\"></div>").html('数据加载中请稍后......').appendTo(_self);//此为将div层添加进窗口中,class属性是datagrid-mask-msg后面会用到
msg.css("left",(_self.width()-msg._outerWidth())/2);//使其居中显示
}
之后,在window的content加载的另外一个iframe页面,js脚本$(document).ready(function(){ window.parent.$(.datagrid-mask-msg).hide()});意为当iframe中的文档结构加载完毕后将这个数据加载中的div隐藏,这样就实现了数据加载中的效果,而并非需要用传统的js定时器去机械的实现,增加了灵活机动性;
最后还有一点,关于在iframe中操作window使其关闭,可以这么写:获取父窗口为window.parent.,则window.parent.$("#windowId").window('close');这样就可以使用easyui window组件中的close方法;
done!噩梦不再来。
发现还是需要耐心 细心 ,遇到问题不需要惊慌,慢慢解决,总会有解决办法的!
本人使用的是spring mvc 框架,表格每行的数据name为map['keyn'],或者list[n],对应可以把数据传到控制器的对象属性中,加以判断 处理即可!
- 关于easyui 可编辑表格使用心得
- easyui 可编辑表格
- EasyUI-可编辑的表格
- 关于Easyui 可编辑的数据表格中的计算
- jQuery-easyUI的使用:datagrid实现可编辑表格
- easyUI可编辑表格编辑器添加事件
- easyui可编辑表格编辑器设置值
- jquery-easyui 中将表格变为可编辑的
- easyui表格编辑
- EasyUI datagrid可编辑
- easyui 可编辑单元格
- 可编辑表格TableCell
- Javascript:可编辑表格
- 可编辑的表格
- 实现可编辑表格
- js可编辑表格
- JQuery_可编辑表格
- 实现可编辑表格
- PMI、国家外专局-项目管理高端论坛在深圳召开
- Java 使用split函数分割url成为单词
- 策略模式lua实现
- 重温C语言 - 静态库与动态库
- 移动安全系列 - SELinux发行版的支持
- 关于easyui 可编辑表格使用心得
- Android Activity.startActivity流程简介
- tracker服务功能实现分析
- alpha blend图层混合算法
- eclipse maven plugin 插件 安装 和 配置
- Html_表单提交
- 函数的本质
- cmd重启电脑代码和方法
- Android中bindService的使用方法