关于easyui 可编辑表格使用心得

使用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
，对应可以把数据传到控制器的对象属性中，加以判断 处理即可！