EXTJS 中editgrid是可编辑的一个很好用的grid表格吧。

       在初始化editgrid绑定数据时，他可以设置你要显示的数据，要显示几列，列最前边是否要有checkbox，以及它的样式，点击下可以进入编辑状态，在编辑那一列还可以监听事件做你要做的操作。

                

 
  
  1. //初始化EditGrid  
  2.     this.InitEditGrid = function () {  
  3.         var sm = new Ext.grid.CheckboxSelectionModel({});  
  4.  
  5.         var column = new Ext.grid.ColumnModel([  
  6.         //  { header: 'FID', dataIndex: 'FID'},  
  7.             sm,  
  8.             { header: '姓名', dataIndex: 'FName', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },  
  9.             { header: '数量', dataIndex: 'FNum', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },  
  10.             { header: '单价', dataIndex: 'FPrice', width: 100, css: "text-align:left;", editor: new Ext.form.TextField() },  
  11.             { header: '金额', dataIndex: 'FMount', width: 100, css: "text-align:left;", renderer: function (v) {  
  12.                 return "<font color=red> ￥</font>" + v  
  13.             }   
  14.             }  
  15.         ]);  
  16.  
  17.         tp = new Ext.data.Record.create([  
  18.             { name: "FID", type: "string", mapping: "FID" },  
  19.             { name: "FName", type: "string", mapping: "FName" },  
  20.             { name: "FNum", type: "decimal", mapping: "FNum" },  
  21.             { name: "FPrice", type: "decimal", mapping: "FPrice" },  
  22.             { name: "FMount", type: "decimal", mapping: "FMount" }  
  23.         ])  
  24.  
  25.         var reader = new Ext.data.JsonReader({}, tp);  
  26.  
  27.         gridStore = new Ext.data.Store({  
  28.             reader: reader,  
  29.             pruneModifiedRecords: true  
  30.         })  
  31.  
  32.         //初始化store  
  33.         gridStore.loadData([]);  
  34.  
  35.         //定义表格  
  36.         gridEdit = new Ext.grid.EditorGridPanel({  
  37.             width: 800,  
  38.             height: 300,  
  39.             cm: column,  
  40.             store: gridStore,  
  41.             clicksToEdit: 1,  
  42.             columnLines: true,  
  43.             sm: sm,  
  44.             listeners:  
  45.             {  
  46.                 afterEdit: function (a) {  
  47.                     var num = 0;  
  48.                     var price = 0;  
  49.  
  50.                     if (a.field == "FNum") {  
  51.                         num = a.value;  
  52.  
  53.                         price = gridStore.getRange()[a.row].data.FPrice;  
  54.                         if (price == "" || price == undefined) {  
  55.                             gridStore.getRange()[a.row].data.FMount = "";  
  56.                         }  
  57.                         else {  
  58.                             gridStore.getRange()[a.row].data.FMount = parseFloat(num) * parseFloat(price);  
  59.                             gridEdit.getView().refresh();  
  60.                         }  
  61.  
  62.                     }  
  63.                     else if (a.field == "FPrice") {  
  64.                         price = a.value;  
  65.  
  66.                         num = gridStore.getRange()[a.row].data.FNum;  
  67.                         if (num == "" || num == undefined) {  
  68.                             gridStore.getRange()[a.row].data.FMount = "";  
  69.                         }  
  70.                         else {  
  71.                             gridStore.getRange()[a.row].data.FMount = parseFloat(num) * parseFloat(price);  
  72.                             gridEdit.getView().refresh();  
  73.                         }  
  74.                     }  
  75.  
  76.                 }  
  77.             }  
  78.  
  79.         });  
  80.         //渲染  
  81.         gridEdit.render("editGrid");  
  82.     }  
 
  
他还可以包含数据库中没有的数据，例如代码中的FNum，FPrice ，FMount都不是数据库中的哦，他们是可以在本地直接添加，而且他是在afteredit事件之后发生的计算。