【jquery easyUI 拓展
2024-09-18 20:57:59
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
附上源码(另:由于时间问题,复核表头的子表头在锁定的时候只是简单的把他移动到锁定列里了,有兴趣可以参考隐藏/显示列的功能把这块儿补全,代码位置如下图:)
最新文章
- 关于ReSharper
- C语言:输入输出
- 腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版
- 《Diagnostic use of facial image analysis software in endocrine and genetic disorders: review, current results and future perspectives》学习笔记
- 2013/11/21工作随笔-PHP开启多进程
- html插入视频
- DBCP数据库连接池
- uc浏览器qq浏览器广告过滤
- Swift伟大的编程语言数据采集
- linux系统被入侵后处理经历【转】
- bootstrap快速入门笔记(七)-表格,表单
- 黑科技:纯CSS定制文本省略
- android的ADK下载地址
- Linux中ctrl+z 、ctrl+c、 ctrl+d区别
- oracle--数据筛选
- boolean表达式与在if条件中的运用
- 44)django-环境变量设置
- 索引视图DEMO2
- android 调用系统照相机拍照后保存到系统相册,在系统图库中能看到
- HTTPS简单原理介绍
热门文章
- unity 实现自定义class深度拷贝 deep copy 深度复制 引用类型复制
- JAVA虚拟机14 类加载器
- Java Day 2
- vue项目部署在nodejs+express
- 3 .NET Core笔试题
- Xmake v2.7.7 发布,支持 Haiku 平台,改进 API 检测和 C++ Modules 支持
- 都在用 AI 生成美少女,而我却。。。
- Atcoder题解:Arc156_c
- 深度学习框架Pytorch学习笔记
- UVM——通过一个简单的testbench来了解UVM组件的phase执行顺序