ASP.NET-FineUI开发实践-12

1.网上找到了行合并的示例,extjs写的,我把它挪过来改了下,FineUI也能用,就是只能放着看,选择和编辑行扩展列没有测试,放出来大家看着用吧。

    <script>
        F.ready(function () {
            //方法span 参数(grid实例,行号,列号,合并状态,合并数量)
            var span = function (grid, row, col, type, num) {
                //这是一个列隐藏机制,发现列隐藏了合并的效果会错位
                var hiddens = [], columns = grid.columns;
                var b = true;
                Ext.Array.each(columns, function (column, index) {
                    if (column.isHidden()) {
                        //如果要隐藏的列隐藏了
                        if (col == index + 1) {
                            //合并单元格不生效
                            b = false;
                        }
                    }
                });
                if (b) {
                    switch (type) {
                        //类型,行
                        case ‘row‘:
                            //getNode 找到节点 row 就是找到行,query,用JQuery所搜所有行的td,可以看出grid其实用表格拼的
                            tds = Ext.get(grid.view.getNode(row)).query(‘td‘);
                            //通过列号找到列,编辑属性 rowspan=num 合并数量
                            Ext.get(tds[col]).set({ rowspan: num });
                            //加入垂直居中属性,当然可以自己写
                            Ext.get(Ext.get(tds[col])).setStyle({ ‘vertical-align‘: ‘middle‘ });
                            //循环被盖住的单元格,destroy 扔掉
                            for (i = row + 1; i < row + num; i++) {
                                Ext.get(Ext.get(grid.view.getNode(i)).query(‘td‘)[col]).destroy();
                            }
                            break;
                        case ‘col‘:
                            //合并列的,跟行的一样,没试,自己写写
                            tds = Ext.get(grid.view.lockedView.getNode(row)).query(‘td‘);
                            Ext.get(tds[col]).set({ colspan: num });
                            break;
                    }
                }
            };
            //执行合并方法,注意参数
            span(F(‘<% =Grid1.ClientID%>‘), 2, 2, ‘row‘, 3);
            //在列隐藏和显示时执行合并行,否则会错位
            F(‘<% =Grid1.ClientID%>‘).on(‘columnhide‘, function () {
                span(F(‘<% =Grid1.ClientID%>‘), 2, 2, ‘row‘, 3);
            });
            F(‘<% =Grid1.ClientID%>‘).on(‘columnshow‘, function () {
                var grid = F(‘<% =Grid1.ClientID%>‘);
                span(grid, 2, 2, ‘row‘, 3);
            });
        });
    </script>

把这个沾到grid下看看就知道了没必要发例子了。

2.加了个列头上的过滤控件,当然可以加别的

查询可以用到,有兴趣的可以自己写写,还是说方法,其实以前就提到了好多遍,就是加了个属性,然后就没了。

我在源码的GridCloumn.cs里加了两个属性,filter和filterName,记录显示的东西和开启显示控件

        private bool _filter = false;
        /// <summary>
        /// 启用过滤功能
        /// </summary>
        [Category(CategoryName.OPTIONS)]
        [DefaultValue(true)]
        [Description("启用过滤功能")]
        public virtual bool filter
        {
            get
            {
                return _filter;
            }
            set
            {
                _filter = value;
            }
        }
        private string _filterName = "";
        /// <summary>
        /// 过滤功能的列
        /// </summary>
        [Category(CategoryName.OPTIONS)]
        [DefaultValue(true)]
        [Description("过滤功能的列")]
        public virtual string filterName
        {
            get
            {
                return _filterName;
            }
            set
            {
                _filterName = value;
            }
        }

这个一看就明白了,然后我再列上用这俩个属性,

     <f:BoundField Width="100px" filter="true" filterName=‘PanelGrid1_textName‘ ColumnID="Name"
                DataField="Name" DataFormatString="{0}" HeaderText="姓名" />

注意filterName的参数,数控件的ClientID,这个我想用asp.net写法绑着,不成功,只能手写了。

PanelGrid1_textName是个text控件,我还写了个事件,编辑回发过滤刷新表格。

属性加好了就是实现,当然是OnFirstPreRender方法里,绘制事件,加上这句就可以了,可以看到就是加了个属性items 是哪个控件,当然是PanelGrid1_textName。最后一个true是原格式输出的意思,如果要加多个控件这个items就应该是个数组,这个还没有试。

到这就算成功了。

3.给grid加了个又侧栏,现在有底部的bar,extjs里叫bbar,其实还有tbar和rbar lbar,加了个rbar,可以参照自己加,感觉没啥大用。

还是改源码,这回改的是Grid.cs文件,先找到PageItems,PageItems就是bbar那我写一个PageRItems,

就是照贴,改个名。

下一步又找到了OnFirstPreRender方法,往里加就可以了,

            if (PageRItems.Count > 0)
            {
                OptionBuilder RBuilder = new OptionBuilder();
                //RBuilder.AddProperty("displayInfo", true);
                //RBuilder.AddProperty("store", Render_GridStoreID, true);
                JsArrayBuilder ab = new JsArrayBuilder();
                foreach (ControlBase item in PageRItems)
                {
                    if (item.Visible)
                    {
                        ab.AddProperty(String.Format("{0}", item.XID), true);
                    }
                }
                //cls: ‘x-toolbar-paging‘,
                RBuilder.AddProperty("cls", "‘x-toolbar-paging x-docked-bottom x-toolbar-docked-bottom x-toolbar-docked-bottom‘", true);
                RBuilder.AddProperty("items", ab.ToString(), true);
                //rbarScript = String.Format("var {0}=Ext.create(‘Ext.ux.SimplePagingToolbar‘,{1});", Render_RBarID, RBuilder);
                OB.AddProperty("rbar", RBuilder, true);
            }

这里就用到了数组,可以研究下怎么拼的,最后加到rbar里,items是PageRItems里的的item。

到了前台的话没有问题就可以看到PageRItems了和PageItems平级

可以写写事件什么的,他自己就竖着排了

时间: 2024-11-13 10:04:44

ASP.NET-FineUI开发实践-12的相关文章

ASP.NET5+EntityFramework7开发实践(三)

1.说明 在<ASP.NET5+EntityFramework7开发实践(一)>介绍过仓储模式,只是没有在控制器中如何使用? 本章重新补充一下.注意,也会使用ASP.NET5中的依赖注入. 2.仓储模式 先看接口: 1 public interface IRoleRepository:IDisposable 2 { 3 //IEnumerable和IQueryable 4 //二者在EF都会延迟加载,不同的是: 5 //IEnumerable是数据加载到内存,刷选在内存中的数据上执行 6 //

FineUI开发实践-目录

FineUI初学手册 下载,实例项目搭建 ASP.NET-FineUI开发实践-1 实际开发环境是FineUI 4.0.4,编辑页面回发,__doPostBack应用 ASP.NET-FineUI开发实践-2 1.Window控件显示2.显示隐藏控件4.直接通过行号修改指定列内容5.获取iframe ASP.NET-FineUI开发实践-3 1.参照模拟数据库分页通过缓存重写内存分页,优化页面响应速度2.得到指定行指定列的值后台3.按钮至少选择一项的通用方法,OnClientClick+=累加.

ASP.NET5+EntityFramework7开发实践(一)

 1.创建项目 创建“空白解决方案”,名为GiveCase. 在解决方案里,添加ASP.NET5 Empty模板项目,名为GiveCase.Web.  2.实体类 实体基类: 1 /// <summary> 2 /// 实体 抽象基类 3 /// </summary> 4 /// <typeparam name="TKey">主键类型</typeparam> 5 public abstract class EntityBase<TK

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

现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的. 1.FineUI引用的extjs是ext-part1.js,这就不说了,以前截过图,这个文件是压缩的,参数也是简化的不好看,其实这个就是ext-all.js,ext-all哪来的呢,就是extjs官方实例里下的,下来之后也是压缩的,旁边还有个不压缩的,ext-all-debug.js ,完全可以看,那我

ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

转自:http://www.cnblogs.com/mzwhj/p/3592895.html 上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东西没有理由不支持. 附件的上传同样基于KindEditor实现,可以上传图片,flash,影音,文件等. 目录 ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一)

【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到

ASP.NET程序开发范例宝典

在整理资料时发现一些非常有用的资料源码尤其是初学者,大部分是平时用到的知识点,可以参考其实现方法,分享给大家学习,但请不要用于商业用途. 如果对你有用请多多推荐给其他人分享. 点击对应章节标题下载本章节下所有源代码. 目录: 第2章 HTML开发与实践 15 2.1 框架的使用 16 实例009 使用FrameSet框架布局聊天室 16 实例010 使用IFrame框架布局企业管理系统 17 2.2 滚屏的实现 18 实例011 滚动显示博客公告 18 实例012 滚屏效果并实现超级链接 20

asp.net 网站开发流程总结

由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网上查阅,总结出的粗略的网站开发流程以及一些所需要学的知识.可能存在很多漏洞和缺陷,如大家看到了也希望大家指导..... 总结一 asp.net建网站的主要步骤 1. 首先是需求分析了,分析你打算做哪些功能,涉及哪些因素以及他们的关联关系等等. 2. 数据库设计,根据功能定义出可能的数据对象,设计出数

【新书推荐】《微软开源跨平台移动开发实践》--带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到