欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript的ExtJS框架中表格的編寫教程

 更新時(shí)間：2016年05月21日 10:52:52   作者：鄭文亮  
ExtJS是一個(gè)MVVM結(jié)構(gòu)的JavaScript框架,在處理表格表單方面則是它的拿手好戲,這里整理了基本的JavaScript的ExtJS框架中表格的編寫教程

ExtJS中表格的特性簡介
表格由類Ext.grid.GridPanel定義，繼承自Ext.Panel，xtype為grid
表格的列信息由Ext.grid.ColumnModel定義
表格的數(shù)據(jù)存儲器由Ext.data.Store定義，根據(jù)解析數(shù)據(jù)的不同，數(shù)據(jù)存儲器可具體分為如下幾種：

JsonStore，SimpleStore，GroupingStore…

一個(gè)表格的基本編寫過程：

1、創(chuàng)建表格列模型

var cm = new Ext.grid.ColumnModel({
 {header: '角色', dataIndex: 'role'},
 {header: '等級', dataIndex: 'grade'},
 {header: '創(chuàng)建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //創(chuàng)建日期類型的數(shù)據(jù)
});

2、創(chuàng)建數(shù)據(jù)數(shù)組

var data = [
  ['士兵','7','2011-07-2412:34:56'],
  ['將軍','10','2011-07-2412:34:56'],
];

3、創(chuàng)建一個(gè)數(shù)據(jù)存儲對象store，包含兩部分：proxy，獲取數(shù)據(jù)的方式；reader，解析數(shù)據(jù)的方式

ArrayReader的mapping用來設(shè)置列的排列順序

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'role', mapping: 1},
    {name: 'grade', mapping: 0}
    {name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'} //創(chuàng)建日期列和顯示格式
  ])
});
store.load();

4、創(chuàng)建GridPanel，裝配ColumnModel和store

var grid = new Ext.grid.GridPanel({
 renderTo: 'grid',
 store: store,
 cm: cm
});

另外獲取遠(yuǎn)程數(shù)據(jù)可以使用ScriptTagProxy,如下所示

var store = new Ext.data.Store({
  proxy: new Ext.data.ScriptTagProxy({
   url:'http://...'}),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'role', mapping: 1},
    {name: 'grade', mapping: 0}
  ]),
  sortInfo: {field: "role", direction: "ASC"} //設(shè)置默認(rèn)排序列，ASC/DESC
});


表格的常用屬性功能

var grid = new Ext.grid.GridPanel({
 enableColumnMove: false, //禁止拖放列
 enableColumnResize: false, //禁止改變列的寬度
 stripeRows: true, //斑馬線效果
 loadMask: true, //讀取數(shù)據(jù)時(shí)的遮罩和提示功能
 renderTo: 'grid',
 store: store
 cm: cm
});

var cm = new Ext.grid.ColumnModel({
 {header: '角色', dataIndex: 'role', width:90, sortable: true}, //width設(shè)置列寬度，默認(rèn)為100px，sortable設(shè)置排序功能
 {id:'grade', header: '等級', dataIndex: 'grade', width:40}
});
var grid = new Ext.grid.GridPanel({
 renderTo: 'grid',
 store: store,
 cm: cm
 viewConfig:{  //讓每列自動填充滿表格
 forceFit: true
 }
 autoExpandColumn: 'grade' //自動延伸列，列的id在ColumnModel中定義
});

渲染表格，為表格設(shè)置特殊樣式
只需要在cm里面增加一個(gè)renderer屬性，添加一個(gè)自定義函數(shù)來渲染傳進(jìn)來（由EXT自動傳遞）的參數(shù)的樣式即可，即在返回value之前拼裝上相應(yīng)的HTML和CSS或者JS響應(yīng)事件。

function renderSex(value) {
  if (value == 'male') {
    return "<span style='color:blue;'>男</span><img src='images/icon_male.png' />";
  } else {
    return "<span style='color:red;'>女</span><img src='images/icon_female.png' />";
  }
}

var cm = new Ext.grid.ColumnModel([
  {header:'id',dataIndex:'id'},
  {header:'name',dataIndex:'name'},
  {header:'sex',dataIndex:'sex',renderer:renderSex},
]);

var data = [
  ['1','Jason','male'],
  ['2','Kate','female']
];

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'id'},
    {name: 'name'},
    {name: 'sex'}
  ])
});
store.load();

var grid = new Ext.grid.GridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm
});

自動顯示行號，只要在創(chuàng)建cm時(shí)創(chuàng)建一個(gè)RowNumberer就可以了

var cm = new Ext.grid.ColumnModel([
 new Ext.grid.RowNumberer(),  //顯示行號
  {header:'id',dataIndex:'id'},
  {header:'name',dataIndex:'name'},
  {header:'sex',dataIndex:'sex',renderer:renderSex},
]);

刪除列

store.remove(store.getAt(i));

刷新表格

grid.view.refresh();

為表格添加復(fù)選框
需要使用CheckboxSelectionModel
SelectionModel sm在使用時(shí)要放到cm和表格中

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),
  sm,
  {header:'編號',dataIndex:'id'},
  {header:'名稱',dataIndex:'name'}
]);

var data = [
  ['1','name1'],
  ['2','name2']
];

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'id'},
    {name: 'name'}
  ])

});
store.load();

var grid = new Ext.grid.GridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm,
  sm: sm
});

通過RowSelectionModel設(shè)置只選擇一行：

var grid = new Ext.grid.GridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm,
  sm: new Ext.grid.RowSelectionModel({singleSelect:true})
});

使用選擇模型獲取數(shù)據(jù)

grid.on('click', function() {
  var selections = grid.getSelectionModel().getSelections();
  for (var i = 0; i < selections.length; i++) {
    var record = selections[i];
    Ext.Msg.alert(record.get("id"));
  }
});

表格視圖
從MVC的思想來看表格控件：
* Ext.data.Store可看做模型
* Ext.grid.GridPanel可看做控制器
* Ext.grid.GridView可看做視圖
* 一般GridView由GridPanell自動生成，如果想設(shè)置GridView的屬性時(shí)，可以通過Ext.grid.GridPanel的getView()獲得視圖實(shí)例

Ext.get('button1').on('click', function() {
 grid.getView().scrollToTop();
  grid.getView().focusCell(0, 0);
  var cell = grid.getView().getCell(0, 0);
  cell.style.backgroundColor = 'red';
});

使用GridPanel的viewConfig在創(chuàng)建表格時(shí)設(shè)置GridView的初始化參數(shù)

var grid = new Ext.grid.GridPanel({
  height: 100,
  width: 400,
  renderTo: 'grid',
  store: new Ext.data.Store({
    autoLoad: true,
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, meta)
  }),
  columns: meta,
  viewConfig: {
    columnsText: '顯示的列', //設(shè)置下拉菜單提示文字
    scrollOffset: 30,  //設(shè)置右側(cè)滾動條的預(yù)留寬度
    sortAscText: '升序',  //設(shè)置下拉菜單提示文字
    sortDescText: '降序',  //設(shè)置下拉菜單提示文字
    forceFit: true  //自動延展每列的長度
  }
});

為表格添加分頁工具條
* 可以使用GridPanel的bbar屬性，并創(chuàng)建Ext.PagingToolbar分頁工具條對象
* 注意，如果配置了分頁工具條，store.load()就必須在構(gòu)造表格以后執(zhí)行。

var grid = new Ext.grid.GridPanel({
  renderTo: 'grid',
  autoHeight: true,
  store: store,
  cm: cm,
  bbar: new Ext.PagingToolbar({
    pageSize: 10,  //每頁顯示10條數(shù)據(jù)
    store: store,
    displayInfo: true,  //顯示數(shù)據(jù)信息
    displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
    emptyMsg: "沒有記錄"  //沒有數(shù)據(jù)時(shí)顯示的信息
  })
});
store.load();

從后臺腳本獲取分頁數(shù)據(jù)

使用HttpProxy傳遞請求，獲取服務(wù)器的JSON數(shù)據(jù)，交給JsonReader解析

var cm = new Ext.grid.ColumnModel([
  {header:'編號',dataIndex:'id'},
  {header:'名稱',dataIndex:'name'}
]);
var store = new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({url:'page.jsp'}),
  reader: new Ext.data.JsonReader({
    totalProperty: 'totalProperty',
    root: 'root'
  }, [
    {name: 'id'},
    {name: 'name'}
  ])
});
var grid = new Ext.grid.GridPanel({
  renderTo: 'grid',
  autoHeight: true,  //數(shù)據(jù)傳回來之前高度未知，所以要使用自適應(yīng)高度
  store: store,
  cm: cm,
  bbar: new Ext.PagingToolbar({
    pageSize: 10,
    store: store,
    displayInfo: true,
    displayMsg: '顯示第 {0} 條到 {1} 條記錄 / 共 {2} 條',
    emptyMsg: "沒有記錄"
  })
});
store.load({params:{start:0,limit:10}});

如果想讓分頁工具條顯示在表格的頂部，可以使用GridPanel的tbar屬性設(shè)置添加工具條

讓ExtJS在對返回的數(shù)據(jù)進(jìn)行分頁

* 需要在頁面中引入examples/locale目錄下的PagingMemoryProxy.js文件
* 再使用PagingMemoryProxy設(shè)置代理

var store = new Ext.data.Store({
  proxy: new Ext.data.PagingMemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'id'},
    {name: 'name'},
    {name: 'descn'}
  ])
});
//在創(chuàng)建GridPanel之后調(diào)用
store.load({params:{start:0,limit:3}});

可編輯表格控件EditorGrid的使用

制作一個(gè)簡單的EditorGrid的步驟：

1、定義列ColumnModel，在里面添加editor屬性

var cm = new Ext.grid.ColumnModel([{
  header: '編號',
  dataIndex: 'id',
  editor: new Ext.grid.GridEditor(
    new Ext.form.TextField({
      allowBlank: false //不允許在TextField中輸入空值
    })
  )
}, {
  header: '名稱',
  dataIndex: 'name',
  editor: new Ext.grid.GridEditor(
    new Ext.form.TextField({
      allowBlank: false
    })
  )
}]);

2、準(zhǔn)備一個(gè)數(shù)組

var data = [
  ['1','Jason'],
  ['2','Jay']
];

3、創(chuàng)建Ext.data.Store，設(shè)置內(nèi)存代理，設(shè)置ArrayReader解析數(shù)組

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'id'},
    {name: 'name'}
  ])
});

4、加載數(shù)據(jù)，創(chuàng)建EditorGridPanel

store.load();
var grid = new Ext.grid.EditorGridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm
});

為可編輯表格添加和刪除數(shù)據(jù)

1、使用Record的create方法創(chuàng)建一個(gè)記錄集MyRecord,MyRecord相當(dāng)于一個(gè)類

var MyRecord = Ext.data.Record.create([
  {name: 'id', type: 'string'},
  {name: 'name', type: 'string'}
]);
store.load();

2、創(chuàng)建EditorGridPanel面板，在屬性tbar中創(chuàng)建Ext.Toolbar

var grid = new Ext.grid.EditorGridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm,
  tbar: new Ext.Toolbar(['-', { //-表示菜單分隔符
    text: '添加一行',
    handler: function(){
      var p = new MyRecord({
        id:'',
        name:''
      });
      grid.stopEditing(); //關(guān)閉表格的編輯狀態(tài)
      store.insert(0, p); //創(chuàng)建的Record插入store的第一行
      grid.startEditing(0, 0); //激活第一行第一列的編輯狀態(tài)
    }
  }, '-', {
    text: '刪除一行',
    handler: function(){
      Ext.Msg.confirm('信息', '確定要?jiǎng)h除？', function(btn){
        if (btn == 'yes') {
          var sm = grid.getSelectionModel(); //獲取表格的選擇模型
          var cell = sm.getSelectedCell();  //獲取選中的單元格
          var record = store.getAt(cell[0]); //通過行號得到store這一行對應(yīng)的Record
          store.remove(record);  //移除數(shù)據(jù)
        }
      });
    }
  }, '-'])
});

為可編輯表格保存修改的結(jié)果

在上面例子的基礎(chǔ)之上，添加一個(gè)保存按鈕

text: '保存',
handler: function(){
  var m = store.modified.slice(0); //獲得store中修改過得數(shù)據(jù)
  for (var i = 0; i < m.length; i++) { //驗(yàn)證表格信息是否正確，是否包含空格
    var record = m[i];
    var fields = record.fields.keys;

    for (var j = 0; j < fields.length; j++) {
      var name = fields[j];
      var value = record.data[name];

      var colIndex = cm.findColumnIndex(name);
      var rowIndex = store.indexOfId(record.id);
      var editor = cm.getCellEditor(colIndex).field;

      if (!editor.validateValue(value)) {
        Ext.Msg.alert('提示', '請檢查輸入的數(shù)據(jù)是否正確！', function(){
          grid.startEditing(rowIndex, colIndex);
        });
        return;
      }
    }
  }
  var jsonArray = [];
  Ext.each(m, function(item) {
    jsonArray.push(item.data); //把修改過得數(shù)據(jù)放到j(luò)sonArray中
  });

  Ext.lib.Ajax.request(  //使用Ajax請求提交給后臺
    'POST',
    'save_data.jsp',
    {success: function(response){ //返回成功
      Ext.Msg.alert('信息', response.responseText, function(){
        store.reload();
      });
    },failure: function(){  //返回失敗
      Ext.Msg.alert("錯(cuò)誤", "服務(wù)器保存數(shù)據(jù)出錯(cuò)！");
    }},
    'data=' + encodeURIComponent(Ext.encode(jsonArray))
  );
}

另外store可以設(shè)置屬性pruneModifiedRecords: true。這樣，每次remove或load操作時(shí)store會自動清除modified標(biāo)記，可以避免出現(xiàn)下次提交時(shí)還會把上次那些modified信息都帶上的現(xiàn)象。


限制表格輸入的數(shù)據(jù)類型

NumberField

{
  header:'ID',
  dataIndex:'id',
  editor:new Ext.grid.GridEditor(new Ext.form.NumberField({ //NumberField限制只能輸入數(shù)字
    allowBlank: false,
    allowNegative: false, //不能輸入減號
    maxValue: 10
  }))
}

ComboBox

var comboData = [
  ['0','Java'],
  ['1','Android']
];
{
  header:'ComboBox',
  dataIndex:'combo',
  editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
    store: new Ext.data.SimpleStore({
      fields:['value','text'],
      data: comboData
    }),
    emptyText: '請選擇',
    mode: 'local',
    triggerAction: 'all',
    valueField: 'value',
    displayField: 'text',
    readOnly:true
  })),
  renderer: function(value){
    return comboData[value][1];
  }
}

DateField

{
  header:'Date',
  dataIndex:'date',
  editor:new Ext.grid.GridEditor(new Ext.form.DateField({
    format: 'Y-m-d',
    minValue: '2011-07-24',
    disabledDays: [0, 6],
    disabledDaysText: '選擇周一到周六之間的日期'
  })),
  renderer: function(value) {
    return value.format("Y-m-d");
  }
}

屬性表格控件PropertyGrid的使用
是在EditorGrid的基礎(chǔ)上開發(fā)的更智能的高級表格組件

var grid = new Ext.grid.PropertyGrid({
  title: '屬性表格控件PropertyGrid',
  autoHeight: true,
  width: 400,
  renderTo: 'grid',
  viewConfig: {
    forceFit: true
  },
  source: {
    "String": "String",
    "Date": new Date(Date.parse('07/24/2011')),
    "boolean": false,
    "float": .01
  }
});

禁用PropertyGrid編輯功能的方法

grid.on('beforeedit', function(e){
 e.cancel = true;
 return false;
});

根據(jù)表格的name獲取value

grid.store.getById('Jason').get(value);


ExtJS中實(shí)現(xiàn)嵌套表格
先看效果：

2016521104833438.jpg (433×300)

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Lib/ExtJs/2_2/resources/css/ext-all.css" />
<script type="text/javascript" src="Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Lib/ExtJs/2_2/ext-all-debug.js"></script>
<script type="text/javascript" src="Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="Lib/ExtJs/plus/RowExpander.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var testData=[
  ["lugreen","男",26,[["數(shù)學(xué)",100],["語文",150]]]
  ,["lisi","男",25,[["數(shù)學(xué)",100],["語文",150]]]
  ,["zhangsan","男",27,[["數(shù)學(xué)",120],["語文",158]]]  
];
//
storeTest= new Ext.data.SimpleStore({
  fields: ["name","sex","age","grade"]
  ,data: testData
});
var expander = new Ext.grid.RowExpander({
    tpl : new Ext.XTemplate(
    '<div class="detailData">',
    '',
    '</div>'
    )
    });
expander.on("expand",function(expander,r,body,rowIndex){
 //查找 grid 
 window.testEle=body;
 //alert(body.id);
 if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
   //alert("a");
   var data=r.json[3];
   var store=new Ext.data.SimpleStore({
      fields: ["class","degrade"]
      ,data:data
     });
   var cm = new Ext.grid.ColumnModel([
   {header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true}
   ,{header: "成績",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true}
   ]);
   Ext.DomQuery.select("div.detailData")[0];
 var grid = new Ext.grid.GridPanel(
 {
  store:store,
  cm:cm,
  renderTo:Ext.DomQuery.select("div.detailData",body)[0],
  autoWidth:true,
  autoHeight:true
  }
 );
 
 }
});
//var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});
  var cm = new Ext.grid.ColumnModel([
  expander
  ,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false}
  ,{header: "性別",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}
  ,{header: "年齡",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true}
  ]);
 var grid = new Ext.grid.GridPanel(
 {
  id:'testgrid',
  store:storeTest,
  cm:cm,
  renderTo:"grid1",
  width:780,
  autoHeight:false,
  height:300,
  listeners:{},
   plugins:[expander]
  }
  );
});
</script>
<style type="text/css">
#div2 h2 {
  font-weight:200;
  font-size:12px;
}
.c1 h2 {
  font-weight:200;
}
</style>
</head>
<body>
<div id="grid1">
 
</div>
<div id="grid2">
 
</div>
</body>
</html>

其中使用到的"RowExpander.js"為extjs官方示例中自帶的。

實(shí)現(xiàn)這個(gè)嵌套表格要注意兩點(diǎn)技巧：
1.提供給外層表格的dataStore的數(shù)據(jù)源以嵌套數(shù)組的形式表示細(xì)節(jié)區(qū)的數(shù)據(jù),如下面的黑體所示。

var testData=[
  ["lugreen","男",26,[["數(shù)學(xué)",100],["語文",150]]]
  ,["lisi","男",25,[["數(shù)學(xué)",100],["語文",150]]]
  ,["zhangsan","男",27,[["數(shù)學(xué)",120],["語文",158]]]  
];

使用數(shù)組集中record對象的json屬性來獲取以細(xì)節(jié)區(qū)數(shù)據(jù)

var data=r.json[3];

2.在rowExpander的 expand事件中添加嵌套表格.

相關(guān)文章

最新評論