ext.net 开发学习——GridView 操作（七）

细节决定成败

把遇到的一些细节上面的问题 总结下， 虽是小问题，但往往 就是小问题 会阻止你前进的步伐……

壹：GridView 列锁定

一、前台代码实现：

复制代码
 <ext:GridPanel ID="GridPanel1" TrackMouseOver="true" StripeRows="true" runat="server"
                                                Border="false" Title="人员信息" AutoScroll="true">
                                                <Store>
                                                    <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                                                        <Reader>
                                                            <ext:JsonReader>
                                                                <Fields>
                                                                </Fields>
                                                            </ext:JsonReader>
                                                        </Reader>
                                                    </ext:Store>
                                                </Store>
                                                <SelectionModel>
                                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                                </SelectionModel>
                                                <LoadMask ShowMask="true" />
                                                <BottomBar>
                                                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="30" StoreID="Store1">
                                                    </ext:PagingToolbar>
                                                </BottomBar>
                                                <ColumnModel>
                                                    <Columns>
                                                    </Columns>
                                                </ColumnModel>
                                                <Listeners>
                                                    <DblClick Handler="addTab('idEmployeeInfo', 'EmployeeDetail.aspx','员工明细');" />
                                                </Listeners>
                                                <View>
 <ext:LockingGridView ID="LockingGridView1" runat="server">
 </ext:LockingGridView>
 </View>
                                            </ext:GridPanel>
复制代码



二、后台代码实现：

复制代码
　　　　　　　　　　　　　　　　Column   col = new Column(); 
                            col.Header = fieldTable.Rows[i]["FieldCaption"].ToString();
                            string index = fieldTable.Rows[i]["FieldAlias"].ToString();
                            col.DataIndex = index;
                            if (index == "ProNo" || index == "ItemNo" || index == "CustItemNo" || index == "Item_C_Name") 
                                col.Locked = true;

                            col.Width = Int32.Parse(string.IsNullOrEmpty(fieldTable.Rows[i]["ColWidth"].ToString()) ? "80" : fieldTable.Rows[i]["ColWidth"].ToString());
                            if (fieldTable.Rows[i]["ControlType"].ToString().Contains("Combobox"))
                                col.Renderer = new Renderer() { Fn = "rendererMeterTypeCombobox" };
                            col.Editor.Add(GetFiledControl(fieldTable.Rows[i]));
                            base.ColumnModel.Columns.Add(col);
复制代码

别忘了给你的GridView添加这个属性    base.View.Add(new LockingGridView());//列锁定属性

效果：

贰：GridView日期格式

Ext.Net默认日期显示格式是英文的 “Thu Nov 3 00:00:00 UTC+0800 2011” 第一感觉是直接格式化转化。有属性DateFormat 但是设置了还是不管用。此时注意：不要被Ext的Column忽悠了，它还有一个DateColumn ： DateColumn dtCol = new DateColumn(); dtCol.Format = "yyyy-MM-dd"; 即可

 

处理下效果：

 

叁：行号

见图说话

需要在红框左边添加 “行号”

GridView.ColumnModel.Columns.Add(new RowNumbererColumn());

效果：

 

反之  删除就不显示

 

 2011-11-05

肆：列统计

 

复制代码
  　　　　//列统计计算
        function GridSum() {
            var src = storehide.getValue();//查找那些列需要进行统计 eg：“txtTotProdAmt,sum,NTSaleAmt|txtTotVAT,sum,VAT"
            var str = src.split('|');
            for (var i = 0; i < str.length; i++) {
                var strs = str[i].split(',');
                var sum = 0;
                store2.each(function(record) {//Grid源Store ID:store2
                    if (strs[1] == "sum") {
                        if (Number(record.get(strs[2])) > 0)
                            sum += Number(record.get(strs[2]));
                    }
                });
                Ext.getCmp(strs[0]).setValue(sum);
            }
        }
复制代码

HTML

复制代码
    <ext:Store runat="server" ID="store2" AutoLoad="true" OnRefreshData="stGrid_Refresh"
            ShowWarningOnFailure="false" SkipIdForNewRecords="false" RefreshAfterSaving="Always"
            OnBeforeStoreChanged="stGrid_BeforeChanged">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="ProNo" Type="String"/>
                        <ext:RecordField Name="ItemNo" Type="String"/>
                        <ext:RecordField Name="CustItemNo" Type="String"/>
                        <ext:RecordField Name="Item_C_Name" Type="String"/>
                        <ext:RecordField Name="Item_C_Spec" Type="String"/>
                        <ext:RecordField Name="BUnit" Type="String"/>
                        <ext:RecordField Name="CBUnit" Type="String"/>
                        <ext:RecordField Name="UTRM" Type="String"/>
                        <ext:RecordField Name="UTR" Type="String"/>
                        <ext:RecordField Name="Unit" Type="String"/>
                        <ext:RecordField Name="CUnit" Type="String"/>
                        <ext:RecordField Name="Brand" Type="String"/>
                        <ext:RecordField Name="Color" Type="String"/>
                        <ext:RecordField Name="Material" Type="String"/>
                        <ext:RecordField Name="PTFID" Type="String"/>
                        <ext:RecordField Name="ManufNote" Type="String"/>
                        <ext:RecordField Name="Packing" Type="String"/>
                        <ext:RecordField Name="AddFld1" Type="String"/>
                        <ext:RecordField Name="AddFld2" Type="String"/>
                        <ext:RecordField Name="AddFld3" Type="String"/>
                        <ext:RecordField Name="AddFld4" Type="String"/>
                        <ext:RecordField Name="AddFld5" Type="String"/>
                        <ext:RecordField Name="AddFld6" Type="String"/>
                        <ext:RecordField Name="AddFld7" Type="String"/>
                        <ext:RecordField Name="AddFld8" Type="String"/>
                        <ext:RecordField Name="AddFld9" Type="String"/>
                        <ext:RecordField Name="AddFld10" Type="String"/>
                        <ext:RecordField Name="AddFld11" Type="String"/>
                        <ext:RecordField Name="AddFld12" Type="String"/>
                        <ext:RecordField Name="AddFld13" Type="String"/>
                        <ext:RecordField Name="AddFld14" Type="String"/>
                        <ext:RecordField Name="AddFld15" Type="String"/>
                        <ext:RecordField Name="AddFld16" Type="String"/>
                        <ext:RecordField Name="AddFld17" Type="String"/>
                        <ext:RecordField Name="AddFld18" Type="String"/>
                        <ext:RecordField Name="AddFld19" Type="String"/>
                        <ext:RecordField Name="AddFld20" Type="String"/>
                        <ext:RecordField Name="AddFld21" Type="String"/>
                        <ext:RecordField Name="AddFld22" Type="String"/>
                        <ext:RecordField Name="AddFld23" Type="String"/>
                        <ext:RecordField Name="AddFld24" Type="String"/>
                        <ext:RecordField Name="AddFld25" Type="String"/>
                        <ext:RecordField Name="BSaleQty" Type="Float"/>
                        <ext:RecordField Name="BSalePrice" Type="Float"/>
                        <ext:RecordField Name="SaleQty" Type="Float"/>
                        <ext:RecordField Name="OrgSalePrice" Type="Float"/>
                        <ext:RecordField Name="OffRT" Type="Float"/>
                        <ext:RecordField Name="OffAmt" Type="Float"/>
                        <ext:RecordField Name="SalePrice" Type="Float"/>
                        <ext:RecordField Name="SaleAmt" Type="Float"/>
                        <ext:RecordField Name="VATRT" Type="Float"/>
                        <ext:RecordField Name="VAT" Type="Float"/>
                        <ext:RecordField Name="NTSalePrice" Type="Float"/>
                        <ext:RecordField Name="NTSaleAmt" Type="Float"/>
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <Listeners>
                <AfterRender Handler="GridSum();"/>
 <Update Handler="GridSum();"/>
            </Listeners>
        </ext:Store>
复制代码



 

 

 

伍：行统计

 

源码：

复制代码
var afterEdit = function(e) {
            var hid = hidRow2.getValue();
            var strList = hid.split('|');
            var strs;
            var str;
            var varRecord;
            var varSelected;
            var index;
            var sum;
            varRecord = gp2.getSelectionModel().getSelected();//gp2： Grid ID
            index = store2.indexOf(varRecord); //获取选中了那一行  store2 ：Grid数据源ID
            if (index < 0)
                return;
            for (var i = 0; i < strList.length; i++) {
                strs = strList[i].split(',');
                if (strs[0].indexOf("["+e.field+"]") == -1)
                    continue;
                if (strs.length < 2)
                    return;
                str = strs[2].split('#'); //strs[] = [NTSaleAmt]+[VAT],SaleAmt,NTSaleAmt#VAT
                for (var j = 0; j < str.length; j++) {//循环替换
                    varSelected = store2.getAt(index).get(str[j]); //取指定的值
                    strs[0] = strs[0].replace('[' + str[j] + ']', varSelected).replace(str[j], varSelected);
                }
                store2.getAt(index).set(strs[1], eval(strs[0])); //给指定赋值  strs[] = [NTSaleAmt]+[VAT],SaleAmt,NTSaleAmt#VAT
            }
        };
复制代码

注意：

事件要给到Grid 不是Store

GridPanel.Listeners.AfterEdit.Fn = "afterEdit";

陆：单击取行值

 

 

源码：

  

复制代码
    <script language="javascript" type="text/javascript">
        function details() {
            var gsm = gpList.getSelectionModel(); //gpList：GridPanel ID
            var rows = gsm.getSelections();  
            if (rows.length > 0) {
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    var data = row.get('ScNo');//ScNo 要取值的列名
                    alert(data);
                } 
            }
        }
    </script>
复制代码

 

柒：One to Many

需求效果：见图

                    

源码：

方案一：

给上面主GridPanel 添加 属性

 <Listeners>
<Click Fn="details" />
</Listeners> 

<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true">

</ext:RowSelectionModel>
</SelectionModel>

这个不可缺少

JS代码： 

　　

 

CS: 

　　

方案二：

根据在线DEMO 

前台代码

　　CS：

　

　　

 

 

方案叁2011-11-21：

上周功能是实现了，领导说好像有点慢……

分析了一下发现性能上不好，因为单击选择一行“一对多” 多个一起加载 性能上大打折扣。

 今天整理下

给“一对多”的这个“多”Panel 每个加一个事件Listeners

<Listeners>
<Activate Handler="#{storeGoods}.reload();" />
</Listeners>

 当TabPanel中的Panel切换到当前Panel则执行事件

protected void storeGoods_Refresh(object sender, StoreRefreshDataEventArgs e)

读取数据加载……

 

效果一样精彩，目前来说推荐方案叁  。。。。。

 

 

 

 

 

 

八：Store OnBeforeStoreChanged

      

 

protected void store_BeforeChanged(object sender, BeforeStoreChangedEventArgs e)
{
XmlDocument xml = e.DataHandler.XmlData;
ChangedData("5", xml, store5);//根据条件修改GridPanl 中Store值
Refresh(1, store, "5"); //修改完 再加载Store
}

 

 

 

 

 

继续跟进……


作者：PEPE
出处：http://pepe.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

posted @   PEPE YU  阅读(3943)  评论(9)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae