【jquery easyUI 拓展

jquery-easyui自己没有提供列锁定/解锁的接口，而且其原有的列隐藏/显示在符合表头的状况下会出现错位，我在项目中遇到了这两个问题，在参考了网上许多解决方案后，编写了一个拓展插件，基本上解决了这两个问题。

解决问题的思路

网上不少人都是经过拓展和复写easyui原有的方法来对html进行操做，这种方法基本上能解决问题，可是我却纠结与后续升级的问题-万一下个版本的easyui页面结构变了咋办？
为了解决这个问题，我使用了一种取巧的办法：

var refactorView = function(target,opts){ if(!opts){return;} var t = $(target); var data = t.datagrid('getData');//获取当前数据 var url = opts.url;//获取url opts.url='';//清空url避免从新请求服务器 t.datagrid(opts);//重构表格布局 t.datagrid('loadData',data);//加载数据 t.datagrid('options').url = url;//恢复请求服务器能力 }; $.extend($.fn.datagrid.methods,{ /*refactor view&&unrelod data 重构视图&&不从新加载数据*/ refactorView:function (jq, option) { return jq.each(function () { refactorView(this, option); }); } });

 

拓展的这个方法很简单，做用是在不从新请求远程数据的前提下重构当前的页面结构。
以后须要作的事情就很简单了，在用户执行锁定/解锁、隐藏/取消隐藏等操做的时候，直接经过js改变options的结构，而后从新渲染视图就ok了。
固然这里面还涉及到对操做的存储等问题，简单说下具体细节：
在第一次执行锁定/解锁、隐藏/取消隐藏操做时，我会给option中的columns和frozenColumns中的columnOption增长一个属性coordinate

arrayUtil.each(frozenColumns,function(level,line){ arrayUtil.each(line,function(index,columnOption){ columnOption.coordinate = { level:level, index:index, preIndex:index>0?index - 1:-1 }; }); });

 

这样一来全部的列都有了惟一的坐标，不论我对这些列怎么操做，最后都能根据这个坐标将其恢复
http://download.csdn.net/detail/tianxiawudi0720/8986419
附上源码（另：因为时间问题，复核表头的子表头在锁定的时候只是简单的把他移动到锁定列里了，有兴趣能够参考隐藏/显示列的功能把这块儿补全，代码位置以下图：）