ASP.NET-FineUI开发实践-9(四)

简介: 现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的。 1.

现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的。

1.FineUI引用的extjs是ext-part1.js,这就不说了,以前截过图,这个文件是压缩的,参数也是简化的不好看,其实这个就是ext-all.js, ext-all哪来的呢,就是extjs官方实例里下的,下来之后也是压缩的,旁边还有个不压缩的, ext-all-debug.js ,完全可以看,那我直接看它就等于看 ext-part1.js了,下面我要找到生成grid表头的类,搜Ext.grid.一个一个找看到有Ext.grid.header,header就是头的意思,再在这里找,找到getColumnMenu,恩,字面意思就能看出得到列菜单,怎么确定呢,看到个属性是checkHandler 选择的意思,就是选择事件,触发的是onColumnCheckChange,
  1. onColumnCheckChange:function(checkItem, checked){
    var header =Ext.getCmp(checkItem.headerId);
    header[checked ?'show':'hide']();
    },
    

      

看到show,hide ,显示和隐藏的意思。进一步测试,找到 ext-part1.js下onColumnCheckChange,改了它,加个alert('1'),保存,刷新,当我勾选列隐藏和显示时弹出1,触发成功,就是改它。
2.位置找到了就是改,直接改 ext-part1.js?那 ext-part2就失去意义了, ext-part2是干嘛的,FineUI自己重写替换了好多方法,也新增了好多方法方便交互或修补bug,我直接找到了Ext.grid.Panel,就照着这个重写就行,看到
  1. if(Ext.grid.Panel){
    Ext.override(Ext.grid.Panel,{
    

      

分析下,如果是 Ext.grid.Panel就是引用的是 Ext.grid.Panel类, override搜了下API就是覆盖重写的意思,那好,直接重写 onColumnCheckChange, onColumnCheckChange上面的列是Ext.grid.header.Container,那么在Ext.gird.Panel上面写:
  1. if(Ext.grid.header.Container){
    Ext.override(Ext.grid.header.Container,{
    onColumnCheckChange:function(checkItem, checked){
    var header =Ext.getCmp(checkItem.headerId);
    header[checked ?'show':'hide']();
    F.customEvent("触发后台操作");
    }
    });
    }
    

      

又用到customEvent,咋用就不写了功能是Alert.Show(),编译,保存,刷新,成功触发后台方法。
3.干触发了没参数我保存啥,看见接受了两个参数,checkItem和checkd,意思是项和选择状态, checkItem可定就是选择的项,他都有什么属性呢,还是找到 ext-all-debug.js下这个方法,
  1. for(; i < itemsLn; i++){
    item = items[i];
    menuItem =newExt.menu.CheckItem({
    text: item.text,
    checked:!item.hidden,
    hideOnClick:false,
    headerId: item.id,
    menu: item.isGroupHeader ?this.getColumnMenu(item):undefined,
    checkHandler:this.onColumnCheckChange,
    scope:this
    });
    

      

首先循环项,就是循环的列头总数,一个一个来,创建一个菜单选择元素,然后就是属性,那 checkItem的属性就是 menuItem的属性,那么有
  1. if(Ext.grid.header.Container){
    Ext.override(Ext.grid.header.Container,{
    onColumnCheckChange:function(checkItem, checked){
    var header =Ext.getCmp(checkItem.headerId);
    header[checked ?'show':'hide']();
    F.customEvent("触发后台操作保存该列隐藏显示状态,列名:"+checkItem.text+" 列ID :"+checkItem.headerId+" 选择状态:"+checked+";gridID:"+this.grid.id);
    }
    });
    }
    

      

 
在试试,触发后台方法,输出结果为预期。
 
更改了 ext-part2.js就要保存好,如果项目里用了,升级的时候覆盖掉就没有了,另外还要介绍自己修改和添加FineUI控件的属性,好像以前提到过在 ASP.NET-FineUI开发实践-6(三) 7 里,处理了 TriggerBox的回车触发,怎么找到的就是转到定义找到FineUI项目的文件再搜索就可以了,用到的不是特别多,可以结合 ext-part2.js再次做一些改进,就不细谈了。
 

 

目录
相关文章
|
4月前
|
存储 缓存
.NET 6中Startup.cs文件注入本地缓存策略与服务生命周期管理实践:AddTransient, AddScoped, AddSingleton。
记住,选择正确的服务生命周期并妥善管理它们是至关重要的,因为它们直接影响你的应用程序的性能和行为。就像一个成功的建筑工地,工具箱如果整理得当,工具选择和使用得当,工地的整体效率将会大大提高。
161 0
|
8月前
|
人工智能 芯片
D1net阅闻|OpenAI员工疯狂暗示,内部已成功开发ASI?被曝训出GPT-5但雪藏
D1net阅闻|OpenAI员工疯狂暗示,内部已成功开发ASI?被曝训出GPT-5但雪藏
|
6月前
|
SQL 小程序 API
如何运用C#.NET技术快速开发一套掌上医院系统?
本方案基于C#.NET技术快速构建掌上医院系统,结合模块化开发理念与医院信息化需求。核心功能涵盖用户端的预约挂号、在线问诊、报告查询等,以及管理端的排班管理和数据统计。采用.NET Core Web API与uni-app实现前后端分离,支持跨平台小程序开发。数据库选用SQL Server 2012,并通过读写分离与索引优化提升性能。部署方案包括Windows Server与负载均衡设计,确保高可用性。同时针对API差异、数据库老化及高并发等问题制定应对措施,保障系统稳定运行。推荐使用Postman、Redgate等工具辅助开发,提升效率与质量。
199 0
|
10月前
|
Linux API C#
基于 .NET 开发的多功能流媒体管理控制平台
基于 .NET 开发的多功能流媒体管理控制平台
152 9
|
10月前
|
Web App开发 前端开发 调度
一款基于 .NET + Blazor 开发的智能访客管理系统
一款基于 .NET + Blazor 开发的智能访客管理系统
133 8
|
10月前
|
前端开发 JavaScript C#
基于.NET8+Vue3开发的权限管理&个人博客系统
基于.NET8+Vue3开发的权限管理&个人博客系统
132 7
|
10月前
|
网络协议 C#
基于.NET WinForm开发的一款硬件及协议通讯工具
基于.NET WinForm开发的一款硬件及协议通讯工具
105 7
|
10月前
|
监控 前端开发 API
一款基于 .NET MVC 框架开发、功能全面的MES系统
一款基于 .NET MVC 框架开发、功能全面的MES系统
237 5
|
前端开发 JavaScript
ASP.NET-FineUI开发实践-8(二)
把上回的做一些改进 1.点击grid2的行改变TriggerBox1的值 var v = $(item).find('.x-grid-cell-Name div.
842 0
|
JavaScript API 前端开发
ASP.NET-FineUI开发实践-9
用了FineUI有一段时间了,还是分享下我咋改的吧,没想的那么难,我也是从小白来的。 基础是要懂JQ和EXTJS,主要是要懂JQ和EXTJS能干啥,这里有两个网站 http://www.w3school.
985 0