ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件)

原創 菩提树下的杨过 2020-02-24 00:46

這一節，我們將看到ExtJs功能強大的可編輯網格控件，幾乎與VS.Net的GridView功能一樣了，但是ExtJs的可是純JS的UI

 

一.靜態示例(改自ExtJs的官方示例)

a.因爲我們是採用xml做爲數據源的，這裏貼出xml的內容


<?xml version="1.0" encoding="utf-8"?>
<catalog>
  <plant>
    <common>紅竹</common>
    <botanical>產自加拿大</botanical>
    <zone>4</zone>
    <light>喜陰</light>
    <price>2.44</price>
    <availability>03/15/2006</availability>
    <indoor>0</indoor>
  </plant>  
  <plant>
    <common>紫羅蘭</common>
    <botanical>Erythronium americanum</botanical>
    <zone>4</zone>
    <light>半陰半光</light>
    <price>9.04</price>
    <availability>02/01/2006</availability>
    <indoor>1</indoor>
  </plant> 
</catalog>


b.ExtJs調用頁面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>     
    <title>可編輯的網格</title>
</head>
<body>

<script type="text/javascript">  

    Ext.onReady(function() {
        Ext.QuickTips.init();

        function formatDate(value) {
            return value ? value.dateFormat('Y年m月d日') : '';
        };
        
        
        var fm = Ext.form;

        //定義複選框列
        var checkColumn = new Ext.grid.CheckColumn({
            header: "室內?",
            dataIndex: 'indoor',
            width: 55
        });

        //定義網格的列模板
        var cm = new Ext.grid.ColumnModel([{
            id: 'common',
            header: "名稱",
            dataIndex: 'common',
            width: 220,
            editor: new fm.TextField({
                allowBlank: false
            })
        }, {
            header: "光照",
            dataIndex: 'light',
            width: 130,
            editor: new Ext.form.ComboBox({
                allowBlank:false,
                typeAhead: true,
                triggerAction: 'all',
                transform: 'sellight',
                lazyRender: true,
                listClass: 'x-combo-list-small'
            })
        }, {
            header: "售價",
            dataIndex: 'price',
            width: 70,
            align: 'right',
            renderer: 'usMoney',
            editor: new fm.NumberField({
                allowBlank: false,
                allowNegative: false,
                maxValue: 100000
            })
        }, {
            header: "上市時間",
            dataIndex: 'availDate',
            width: 105,
            renderer: formatDate,
            editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: '目前還未上市'
            })
        },
        checkColumn
    ]);

        
        cm.defaultSortable = true;

        //定義記錄的類型
        var Plant = Ext.data.Record.create([        
           {name: 'common', type: 'string' },
           { name: 'botanical', type: 'string' },
           { name: 'light' },
           { name: 'price', type: 'float' },            
           { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
           { name: 'indoor', type: 'bool' }
      ]);

        //創建數據源
        var store = new Ext.data.Store({            
            url: 'plants.xml',            
            reader: new Ext.data.XmlReader({                
                record: 'plant'
            }, Plant),
            sortInfo: { field: 'common', direction: 'ASC' }
        });

        //創建可編輯的網格
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 'editor-grid',
            width: 600,
            height: 180,
            autoExpandColumn: 'common',
            title: '可編輯的網格',
            frame: true,
            plugins: checkColumn,
            clicksToEdit: 1,

            tbar: [{
                text: '增加記錄',
                handler: function() {
                    var p = new Plant({
                        common: '新品種1',
                        light: '喜光',
                        price: 1.0,
                        availDate: (new Date()).clearTime(),
                        indoor: 1
                    });
                    grid.stopEditing();
                    store.insert(0, p);
                    grid.startEditing(0, 0);
                }
}]
            });

            //加載數據
            store.load();
        });

        //複選框列改變時，保存gird的id列值
        Ext.grid.CheckColumn = function(config) {
            Ext.apply(this, config);
            if (!this.id) {
                this.id = Ext.id();
            }
            this.renderer = this.renderer.createDelegate(this);
        };

        Ext.grid.CheckColumn.prototype = {
            init: function(grid) {
                this.grid = grid;
                this.grid.on('render', function() {
                    var view = this.grid.getView();
                    view.mainBody.on('mousedown', this.onMouseDown, this);
                }, this);
            },

            onMouseDown: function(e, t) {
                if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
                    e.stopEvent();
                    var index = this.grid.getView().findRowIndex(t);
                    var record = this.grid.store.getAt(index);
                    record.set(this.dataIndex, !record.data[this.dataIndex]);
                }
            },

            renderer: function(v, p, record) {
                p.css += ' x-grid3-check-col-td';
                return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-cc-' + this.id + '"> </div>';
            }
        };
</script>

<select name="sellight" id="sellight" style="display: none;">
    <option value="陰">陰</option>
    <option value="喜陰">喜陰</option>
    <option value="半陰半光">半陰半光</option>
    <option value="喜光">喜光</option>
    <option value="日光">日光</option>
</select>

<div id="editor-grid"></div>
</body>
</html>

 

二.結合WCF動態讀取
1.WCF服務端


[OperationContract]
        [WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetData")]
        public T_Class[] GetData()
        {
            List<T_Class> _Result = new List<T_Class>();
            using (DBDataContext db = new DBDataContext())
            {
                _Result = db.T_Classes.Where(c => (new string[] { "shop", "product" }).Contains(c.F_Type.ToLower())).Take(30).ToList();               
                db.Connection.Close();
            }
            return _Result.ToArray();
        }

 

注意:爲使linq to sql中的類支持WCF數據契約，還是要手動對類添加[DataContract]標誌，對字段添加[DataMember]標誌，否則無法序列化；另外對於System.DateTime類型的字段，最終序列化成xml時，格式類似<F_AddTime>2007-03-07T15:48:04</F_AddTime>，ExtJs不能正確識別這種格式，無奈之下，只好手動修改*.designer.cs文件中自動生成的T_Class類，把F_AddTime手動修改爲System.String類型，同時人工處理返回格式，如下：

Code

這裏，我調用了自己寫的一個工具庫的FormatDateString方法，當然大家也可以自己定義返回的格式，只要ExtJs能識別就可以了

2.前端頁面，跟靜態示例幾乎一樣，貼一下代碼:

 


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="03_Grid_Editable.aspx.cs" Inherits="Ajax_WCF._3_Grid_Editable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
    <link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" /> 
     <script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script>    
    <script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
    <title>可編輯的網格</title>
</head>
<body>
<script type="text/javascript">  

    Ext.onReady(function() {
        Ext.QuickTips.init();

        function newGuid() {
            var guid = "";
            for (var i = 1; i <= 32; i++) {
                var n = Math.floor(Math.random() * 16.0).toString(16);
                guid += n;
                if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
                    guid += "-";
            }
            return guid;
        }

        function formatDate(value) {
            return value ? value.dateFormat('Y年m月d日') : '';
        };

        var fm = Ext.form;
        
        //定義複選框列
        var checkColumn = new Ext.grid.CheckColumn({
            header: "顯示?",
            dataIndex: 'F_isShow',
            width: 55
        });

        //定義網格的列模板
        var cm = new Ext.grid.ColumnModel([{
            id: 'F_ID',
            header: "分類ID",
            dataIndex: 'F_ID',
            width: 220,
            editor: new fm.TextField({
                allowBlank: false
            })
        }, {
            header: "分類名稱",
            dataIndex: 'F_ClassName',
            width: 130,
            editor: new fm.TextField({
                allowBlank:false               
            })
        },{
            header: "類別",
            dataIndex: 'F_Type',
            width: 130,
            editor: new fm.ComboBox({
                allowBlank:false,
                typeAhead: true,
                triggerAction: 'all',
                transform: 'selType',
                lazyRender: true,
                listClass: 'x-combo-list-small'
            })
        }, {
            header: "排序號",
            dataIndex: 'F_Orders',
            width: 70,
            align: 'right',           
            editor: new fm.NumberField({
                allowBlank: false,
                allowNegative: false,
                maxValue: 100000
            })
        }, {
            header: "添加時間",
            dataIndex: 'F_AddTime',
            width: 105,
            renderer: formatDate,
            editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: '不能早於2001年01月06日'
            })
        },
        checkColumn
    ]);

        
        cm.defaultSortable = true;

        //定義記錄的類型
        var T_Class = Ext.data.Record.create([        
           { name: 'F_ID', type: 'string' },
           { name: 'F_ClassName', type: 'string' },
           { name: 'F_ShortName',type:"string" },
           { name: 'F_ParentID', type: 'string' },
           { name: 'F_Depth', type: 'float' },
           { name: 'F_RootID', type: 'float' },
           { name: 'F_Orders', type: 'float' },
           { name: 'F_ParentIDStr', type: 'string' },
           { name: 'F_ParentNameStr', type: 'string' },
           { name: 'F_ReadMe', type: 'string' },
           { name: 'F_AddTime', type: 'date', dateFormat: 'Y-m-d' },
           { name: 'F_Type' ,type:"string"},
           { name: 'F_MaxPage', type: "float" },
           { name: 'F_No', type: "float" },
           { name: 'F_isShow', type: "bool" },
           { name: 'F_AutoID', type: "float" }           
      ]);

        //創建數據源
        var store = new Ext.data.Store({            
            url: 'MyService.svc/GetData',            
            reader: new Ext.data.XmlReader({                
                record: 'T_Class'
            }, T_Class),
            sortInfo: { field: 'F_ID', direction: 'ASC' }
        });

        //創建可編輯的網格
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 'editor-grid',
            width: 750,
            height: 300,
            autoExpandColumn: 'F_ID',
            /*title: '基本網格示例',*/
            viewConfig: { columnsText: '顯示列', sortAscText: '升序', sortDescText: '降序' },
            frame: false,
            plugins: checkColumn,
            clicksToEdit: 1,

            tbar: [{
                text: '增加記錄',
                handler: function() {
                var p = new T_Class({
                        F_ID:newGuid(),
                        F_ClassName:"新分類1",
                        F_ShortName:"",
                        F_ParentID:"",
                        F_Depth:0,
                        F_RootID:0,
                        F_Orders:0,
                        F_ParentIDStr:"",
                        F_ParentNameStr:"",
                        F_ReadMe:"",
                        F_AddTime:(new Date()).clearTime(),
                        F_Type:"shop",
                        F_MaxPage:0,
                        F_No:"",
                        F_isShow:0,
                        F_AutoID:0                         
                    });
                    grid.stopEditing();
                    store.insert(0, p);
                    grid.startEditing(0, 0);
                }
}]
            });

            //加載數據
            store.load();
        });

        //複選框列改變時，保存gird的id列值
        Ext.grid.CheckColumn = function(config) {
            Ext.apply(this, config);
            if (!this.id) {
                this.id = Ext.id();
            }
            this.renderer = this.renderer.createDelegate(this);
        };

        Ext.grid.CheckColumn.prototype = {
            init: function(grid) {
                this.grid = grid;
                this.grid.on('render', function() {
                    var view = this.grid.getView();
                    view.mainBody.on('mousedown', this.onMouseDown, this);
                }, this);
            },

            onMouseDown: function(e, t) {
                if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
                    e.stopEvent();
                    var index = this.grid.getView().findRowIndex(t);
                    var record = this.grid.store.getAt(index);
                    record.set(this.dataIndex, !record.data[this.dataIndex]);
                }
            },

            renderer: function(v, p, record) {
                p.css += ' x-grid3-check-col-td';
                return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-cc-' + this.id + '"> </div>';
            }
        };
</script>

<select name="selType" id="selType" style="display: none;">
    <option value="shop">商家分類</option>
    <option value="product">產品分類</option>
    <option value="place">地區分類</option>    
</select>
<form id="form1" runat="server">
    <div id="editor-grid"></div>
</form>
</body>
</html>

 轉載請註明來自"菩提樹下的楊過"http://www.cnblogs.com/yjmyzz/archive/2008/08/29/1279307.html




發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端面試題 - 說一下原型和原型鏈？

前端面試題 - 說一下原型和原型鏈？ JavaScript 中，萬物皆對象，對象分爲普通對象和函數對象。 所有的函數都是函數對象（typeof f === 'function'），其他都是普通對象（typeof o === 'object'

原創 2024-04-24 23:51:10

Oracle數據庫中的索引類型分類

唯一索引（Unique Index）：保證索引列的值是唯一的，即重複值不允許。 非唯一索引（Non-Unique Index）：允許重複值存在。 組合索引（Composite Index）：在表的多個列上創建索引。 反向鍵索引（Rever

原創 2024-04-23 21:54:53

從用戶中來，到用戶中去：IPD集成產品開發之FFAB模型，讓你的產品供不應求！

IPD（集成產品開發）模型的核心價值在於它改變了企業對於產品研發的固有觀點，將企業產研的重點由“技術爲導向”升級爲“用戶需求爲導向”，強調企業在產品的研發過程中堅持以用戶/客戶爲中心。 在IPD（集成產品開發）的模式中，需要企業或者團隊在限

原創 2024-04-13 00:50:45

數據結構筆記淺記（三）空間複雜度

用於衡量算法佔用內存空間隨着數據量變大時的增長趨勢。這個概念與時 間複雜度非常類似，只需將“運行時間”替換爲“佔用內存空間”。   算法在運行過程中使用的內存空間主要包括以下幾種。         ‧ 輸入空間：用於存儲算法的輸入數據。  

原創 2024-03-23 00:43:15

uniapp rich-text處理富文本里的圖片寬度自適應

/**  * 處理富文本里的圖片寬度自適應  * 1.去掉img標籤裏的style、width、height屬性  * 2.img標籤添加style屬性：max-width:100%;height:auto  * 3.修改所有style裏的

原創 2024-03-09 02:59:11

JWT 簽名用對稱加密還是非對稱加密？

一 概念梳理 對稱加密和非對稱加密是兩種基本的加密方法，它們在現代密碼學中扮演着核心角色，用於保護數據的安全和隱私。 1.1 對稱加密（Symmetric Encryption） 對稱加密是指加密和解密使用同一個密鑰的過程。這意味着發送方和

原創 2024-06-03 13:17:51

SSE簡介

SSE（Server-Sent Events）是一種用於實現服務器主動向客戶端推送數據的技術，也稱爲“事件流”（Event Stream）。它基於 HTTP 協議，利用了其長連接特性，在客戶端與服務器之間建立一條持久化連接，並通過這條連接實

原創 2024-04-19 09:31:29

一文搞懂5種內存溢出案例，內含完整源碼

本文分享自華爲雲社區《10分鐘搞懂各種內存溢出案例！！（含完整源碼，建議收藏）》，作者：冰 河。 作爲程序員，多多少少都會遇到一些內存溢出的場景，如果你還沒遇到，說明你工作的年限可能比較短，或者你根本就是個假程序員！哈哈，開個玩笑。今天，我

原創 2024-06-05 10:56:55

AppBuilder低代碼體驗：構建雅思大作文組件

Ai technology 前言 AppBuilder上線了低代碼製作組件功能，可以通過工作流的方式構建自定義組件，完成簡單Agent無法完成的複雜功能，使得生成的文本更加定製化，

原創 2024-05-16 00:15:54

有點意思的 Java 遞歸調用

最近在刷一些問題的時候看到有下面一個問題     上面問的是當輸入的字符串爲什麼的時候返回 True 總結 在做題目的時候，第一次還做錯了。 這是因爲解答這個題目的時間只有 3 分鐘，沒有自己看題目 後來拿着程序跑了下。 p

原創 2024-05-13 02:41:48

基於Redis實現基本搶紅包算法

簡介: 搶紅包是我們生活常用的社交功能, 這個功能最主要的特點就是用戶的併發請求高, 在系統設計上, 可以使用非常多的辦法來扛住用戶的高併發請求, 在本文中簡要介紹使用Redis緩存中間件來實現搶紅包算法, Redis是一個在內存中基

原創 2024-04-17 11:18:19

Java中拼接字符串方式(+、StringBuilder/StringBuffer)分析

字符串是 Java 程序中最常用的數據結構之一。在 Java 中 String 類已經重載了"+"，字符串可以直接使用"+"進行連接，也可以用StringBuilder/StringBuffer（StringBuilder是J2SE5 及以

原創 2024-04-09 21:31:20

Java中String 、StringBuilder 、StringBuffer 的區別

Java 平臺提供了兩種類型的字符串操作方式：String 和 StringBuffer/StringBuilder，它們都可以儲存和操作字符串，區別如下： String 是隻讀字符串，也就意味着 String 引用的字符串內容是不能被改

原創 2024-04-08 09:31:31

JPA不識別MySQL的枚舉類型

1 枚舉好用嗎？ 數據字典型字段，枚舉比Integer好： 限定值，只能賦值枚舉的那幾個實例，不能像Integer隨便輸，保存和查詢的時候特別有用 含義明確，使用時不需要去查數據字典 顯示值跟存儲值直接映射，不需要手動轉換，比如1在頁面上

原創 2024-04-02 01:07:56

go-Channel

1 概述 通道是Golang提供的一種基本類型，它可以實現在協程之間的單向通信和雙向通信、發送和接收數據、以及協程同步。 channel的本質是一個隊列，遵循先進先出原則。channel是線程安全的，在任何給定時間，一個數據被設計爲只有一

原創 2024-03-24 00:10:06