ExtJS4.2學習(10)分組表格控件--GroupingGrid（轉）

鳴謝網址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html

---------------------------------------------------------------------------------------------

分組表格控件在我們的開發中經常被用到，GroupingGrid分組表格就是在普通表格的基礎上，根據某一列的數據顯示表格中的數據分組的表格控件。舉個例子給大家，比如某些信息用樹形顯示覺得有點大才小用，樹形可以有無限極，但是用了分組表格可以完美的展示信息，看下圖是我的項目中用到的一個例子，將所有評分項顯示出來，并且動態獲取是否有次數，如果有次數將出現可編輯，沒有次數就不可編輯，如果需要扣分就出現鏈接，沒有就不出現，這正好結合了我們前幾節學的知識，看下面的圖：

具體代碼：我這里是在其他組件中彈出的這個分組表格控件，所以大家看重點代碼即可，當時寫這個功能可花費了不少時間，大家好好研究哈~

/*** Grid*/ actions.push(  {  text: '評分',  iconCls: 'gradebtn',  listeners: {  'click' : function() {  var xg = Ext.grid;  var store = new Ext.data.GroupingStore({  autoLoad:true,  reader: new Ext.data.JsonReader({  root: 'data',  totalProperty: 'total',  remoteSort: true  },  [  {name:'groupid'},  {name:'groupname'},  {name:'itemid'},  {name:'itemgroupid'},  {name:'itemname'},  {name:'itemvalue'},  {name:'isnumber'},  {name:'status',type:'boolean'},  {name: 'desc'}  ]),  proxy: new Ext.data.HttpProxy({  url: window.webRoot + 'rest/qaitem/',  method: 'GET'  }),  sortInfo:{field: 'itemname', direction: "ASC"},  groupField:'groupname'  });  var sm = new Ext.grid.CheckboxSelectionModel();  /** 設置次數 setNumber = function(v){ console.info(v); var record = sm.getSelected(); record.set('isNumber',v); } */  var grid = new xg.EditorGridPanel({  store: store,  clicksToEdit: 1,  stripeRows:true,  sm: sm,  listeners: {  beforeedit: function(e) {  if (e.record.get("isnumber") == "NO") {  return false;  }else{  return true;  }  }  },  columns: [  {id:'itemname',header: "選項組名稱", width: 270, sortable: true, dataIndex: 'itemname'},  {header: "次數", width: 30, sortable: true, dataIndex: 'isnumber',  editor: new Ext.form.NumberField(),  renderer: function(v,m,r){  return v;   /* if(v =="YES"){ var showv = (r.data.isnumber=="YES"?'' : r.data.isNumber); return  r.data.isNumber;//"<input type='text' value = '"+showv+"' size='7' onkeyup ='setNumber(this.value)' />"; }else if(v=="NO"){ return "不存在次數"; }else{ return "數據讀取失敗"; } */  }  },  {dataIndex: 'groupid',hidden:true},  {dataIndex: 'itemid',hidden:true},  {dataIndex: 'itemgroupid',hidden:true},  {dataIndex:'status',hidden:true},  {header:'分值', width:20, sortable:true, dataIndex: 'itemvalue',  renderer: function(v,m,r){  
//                                  m.css='x-grid-bak-blue';  var str = "<a href='javascript:void(0); οnclick="+'points()'+"'>"+v+"</a>";  var str1 = "<a href='javascript:void(0); οnclick="+'points(true)'+"'>取消</a>";  if(r.data.isnumber != "NO" ){  return v;  }  return !r.data.status?str : str1;  }  },  {header: "評分選項組", width: 30, sortable: true, dataIndex: 'groupname'}  ],  view: new Ext.grid.GroupingView({  forceFit:true,  groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "項" : "個"]})'  }),  frame:true,  loadMask:true,  layout: 'fit',  width: 950,  height: 450  });  points = function(is){  var r = sm.getSelected();  if(r.data.isnumber != "NO"){  //轉換成int操作  次數和是否扣分了  
                              }  r.set('fenshu', r.data.itemvalue);  r.set('status',!is);  r.commit();  }  var win = new Ext.Window({  title:'質檢評分',  width:955,  height:515,  region:'center',  iconCls: 'gradebtn',  layout: 'fit',  resizable:true,   modal:true,  closeAction:'hide',  items:[grid],  buttons:[{  text:'保存',  listeners : {  'click' : function() {  var fenshu = '',itemname ='';  var status = '',itemgroupid ='';  var isNumber = '',itemid='';  var groupid = '',grouptypeid='',groupname='';  for (var i = 0; i<store.data.items.length; i++) {  var rco = store.getAt(i);  if(i==store.data.items.length-1){  fenshu +=rco.get('itemvalue');  status += rco.get('status');  groupid += rco.get('groupid');  groupname += rco.get('groupname');  itemid += rco.get('itemid');  itemgroupid += rco.get('itemgroupid');  itemname += rco.get('itemname');  if(rco.get('isnumber')=='YES'||rco.get('isnumber')=='NO'||rco.get('isnumber')==''){  isNumber += '0';  }else{  isNumber += rco.get('isnumber')+'';  }  }else{  fenshu +=rco.get('itemvalue')+',';  status += rco.get('status')+',';  groupid += rco.get('groupid')+',';  groupname += rco.get('groupname')+',';  itemid += rco.get('itemid')+',';  itemgroupid += rco.get('itemgroupid')+',';  itemname += rco.get('itemname')+',';  if(rco.get('isnumber')=='YES'||rco.get('isnumber')=='NO'||rco.get('isnumber')==''){  isNumber += '0,';  }else{  isNumber += rco.get('isnumber')+',';  }  }  }  Ext.Ajax.request({  url : window.webRoot + 'rest/qaitemscore/',  params: {  userId:'<%=userId%>',  recordId:rec.get('id'),  ani:rec.get('ani'),  dnis:rec.get('dnis'),  callType:rec.get('callType'),  begintime:formatDateTime(rec.get('beginTime')),  endtime:formatDateTime(rec.get('endTime')),  length:rec.get('callTime'),  extno:rec.get('extNo'),  fileName:rec.get('fileName'),  agentNo:rec.get('agentNo'),  itemvalue: fenshu,  status: status,  isNumber: isNumber,  groupid: groupid,  grouptypeid: grouptypeid,  groupname: groupname,  itemid: itemid,  itemgroupid: itemgroupid,  itemname: itemname,  callId: rec.get('callId'),  assigenederid: rec.get('assigeneder')  },  success: function(res) {  myMask.hide();  var respText = Ext.decode(res.responseText);   if(respText.code == 'OK') {  Ext.Msg.alert('系統提示', '評分成功');  close();  } else {  Ext.Msg.alert('保存失敗', respText.message + "（" + respText.code + "）");  }  },  failure: function(res) {  myMask.hide();  var respText = Ext.decode(res.responseText);  Ext.Msg.alert('保存失敗', respText.message + "（" + respText.code + "）");  },  method: 'POST'  });  }    }  },{  text:'取消',  listeners : {    'click' : function() {  close();  }  }  }]  }).show();  var close=function(){  win.hide();  }  }  }  }  );

上面的是不是覺得有點復雜了？額。。我的錯，下面來看個簡單的：

這個就簡單許多啦，看下主要代碼，相信聰明的你一定能明白：

/*** Grid* 此js演示了ExtJS之分組表格--GroupingGrid*/ 
//表格數據最起碼有列、數據、轉換原始數據這3項
Ext.onReady(function(){var columns = [{header:'編號',dataIndex:'id'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}];var data = [['1','male','name1','descn1'],['2','female','name2','descn2'],['3','male','name3','descn3'],['4','female','name4','descn4'],['5','male','name5','descn5']];var store = new Ext.data.ArrayStore({fields:[{name:'id'},{name:'sex'},{name:'name'},{name:'descn'}],data:data,groupField:'sex', //確定哪一項分組sorter:[{property:'id', //排序屬性direction:'ASC'} //排序方式
        ]});var grid = new Ext.grid.GridPanel({width:300,autoHeight:true,store:store,columns:columns,features:[{ftype:'grouping'}],renderTo:'grid',forceFit:true});
});

這里的fields和data還是原來的示例一樣，主要關注的是groupField，它確定通過哪一項進行分組。store可以設置sorter參數，這個參數對應的值有2項：property是排序的屬性，direction是排序的方式。我們把數據傳入，輸出顯示的就是分成一組一組的數據。但是，如果想顯示成我們期待的那種形式，還需要設置feature為grouping

另外，分組表格控件的視圖是有特殊功效的，通過它可以實現分組表格專用的對應功能，如下代碼所示：

html代碼：

<button id="expand">expand</button>
<button id="collapse">collapse</button>
<button id="one">toggle one</button>
<div id="grid"></div>

js代碼：

//分組表格視圖Ext.get('expand').on('click',function(){grid.view.features[0].expandAll();//grid.view.features[0]:返回grid的第一個features（當前的grid只有一個）
    });Ext.get('collapse').on('click',function(){grid.view.features[0].collapseAll();});Ext.get('one').on('click', function() {var feature = grid.view.features[0];if (feature.isExpanded('female')) {//如果female節點是展開的，返回true
//            feature.expand('female');//展開feature.collapse('female');//閉合} else {
//            feature.collapse('female');//閉合feature.expand('female');//展開
        }});

當然實現上面的代碼功能必須要有3個button了，每個id設置對應的點擊事件，上例中expandAll()展示所有分組，collapseAll()折疊所有分組。如果想自動判斷分組的狀態進行對應的折疊或展開操作---當分組都已折疊時執行展開所有分組，當分組都已展開時執行折疊所有分組，這就需要我們自己寫代碼來判斷分組的狀態了。這部分還存在著一個初始化的小問題，每次雖然分組顯示的都是展開，但是feature.isExpanded()返回的都是false，所以要重復調用collapse()和expand()兩個函數，才能實現正常切換。

（經測試這句話是有誤的）。

下面是全部的js代碼：

/*** Grid* 此js演示了ExtJS之分組表格--GroupingGrid*/ 
//表格數據最起碼有列、數據、轉換原始數據這3項
Ext.onReady(function(){var columns = [{header:'編號',dataIndex:'id'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}];var data = [['1','male','name1','descn1'],['2','female','name2','descn2'],['3','male','name3','descn3'],['4','female','name4','descn4'],['5','male','name5','descn5']];var store = new Ext.data.ArrayStore({fields:[{name:'id'},{name:'sex'},{name:'name'},{name:'descn'}],data:data,groupField:'sex', //確定哪一項分組sorter:[{property:'id', //排序屬性direction:'ASC'} //排序方式
        ]});var grid = new Ext.grid.GridPanel({width:300,autoHeight:true,store:store,columns:columns,features:[{ftype:'grouping'}],renderTo:'grid',forceFit:true});//分組表格視圖Ext.get('expand').on('click',function(){grid.view.features[0].expandAll();//grid.view.features[0]:返回grid的第一個features（當前的grid只有一個）
    });Ext.get('collapse').on('click',function(){grid.view.features[0].collapseAll();});Ext.get('one').on('click', function() {var feature = grid.view.features[0];if (feature.isExpanded('female')) {//如果female節點是展開的，返回true
//            feature.expand('female');//展開feature.collapse('female');//閉合} else {
//            feature.collapse('female');//閉合feature.expand('female');//展開
        }});
});

?

轉載于:https://www.cnblogs.com/wql025/p/4979663.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/256398.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/256398.shtml
英文地址，請注明出處：http://en.pswp.cn/news/256398.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

九個Console命令，讓js調試更簡單

九個Console命令，讓js調試更簡單

一、顯示信息的命令 1: <!DOCTYPE html>2: <html>3: <head>4: <title>常用console命令</title>5: <meta http-equiv"Content-Type" content"text/html; charsetutf-8" />6: </head>7: <body>8: …
閱讀更多...
numpy——axis

numpy——axis

size()和max()中的含義 以前我理解axis0代表行&#xff0c;axis1代表列&#xff1b; 但是這種含義在函數size()和max()中恰恰相反&#xff1b; 其實不是這樣的&#xff0c;我們回到單詞axis本身&#xff0c;它的意思是“軸”&#xff0c;沒錯軸就是代表一個方向&#xff0c;像…
閱讀更多...
Android ListView幾個重要屬性

Android ListView幾個重要屬性

1、transciptMode屬性&#xff0c;需要用ListView或者其它顯示大量Items的控件實時跟蹤或者查看信息&#xff0c;并且希望最新的條目可以自動滾動到可視范圍內。通過設置的控件transcriptMode屬性可以將Android平臺的控件&#xff08;支持ScrollBar&#xff09;自動滑動到最底部…
閱讀更多...
Halcon例程（基于GMM模型的分類）詳解 —— classify_citrus_fruits.hdev

Halcon例程（基于GMM模型的分類）詳解 —— classify_citrus_fruits.hdev

一、例程簡介 該例程比較有代表性&#xff0c;屬于Halcon里的分類方法之一&#xff0c;直接調用Halcon封裝好的GMM分類器&#xff08;高斯混合模型&#xff09;對橘子和檸檬進行分類。GMM屬于概率分類方法&#xff0c;屬于P(Y|X)&#xff0c;通過對樣本的概率密度分布進行估計…
閱讀更多...
正則表達式匹配不包含特定字符串解決匹配溢出問題

正則表達式匹配不包含特定字符串解決匹配溢出問題

匹配溢出問題在正則表達式當中算是比較常見的問題&#xff0c;它常常導致我們匹配結果莫名其妙的出錯&#xff0c;本文專門為你講解如何通過匹配不包含特定字符串的方法來解決這類問題。 那么&#xff0c;什么是匹配溢出呢&#xff1f; 下面我們來看個例子&#xff1a; 源文本&…
閱讀更多...
numpy——mgrid

numpy——mgrid

x1,x2 np.mgrid(x1min:x1max:num1j,x2min:x2max:num2j)x1返回的是x1min到x1max間均勻分成num1個數&#xff0c;進行橫向擴展為方陣 x2返回的是x2min到x2max間均勻分成num2個數&#xff0c;進行縱向擴展為方陣 Examples -------- >>> np.mgrid[0:5,0:5] array([[[0,…
閱讀更多...
Halcon例程（基于3D形狀匹配識別方法）詳解 —— create_shape_model_3d_lowest_model_level.hdev

Halcon例程（基于3D形狀匹配識別方法）詳解 —— create_shape_model_3d_lowest_model_level.hdev

一、例程簡介 最近在研究3D識別方面的東西&#xff0c;查了不少資料&#xff0c;發現halcon里有不少關于三維物體識別的例程&#xff0c;這里對其中一個做出詳解。該例程是基于三維匹配方法的&#xff0c;因為有三維模型SM3&#xff0c;所以不需要自己創建&#xff1b;另因為例…
閱讀更多...
15.瀑布流、測量

15.瀑布流、測量

排行界面TopProtocol &#xff1a;json數據就是寫字符串&#xff0c;所以不需要寫bean對象public class TopProtocol extends BaseProtocol<List<String>> { Override public List<String> paserJson(String json) { List<String> datasnew ArrayList&…
閱讀更多...
linear-gradient線性漸變

linear-gradient線性漸變

background:linear-gradient(180deg, sliver 20%, skyblue 80%, gray 100%);180deg 是線性漸變的角度,水平方向;如果是90deg,則是垂直方向. silver 20% 是最上面的顏色和該顏色所在的位置,可以為負值,,如 linear-gradient(180deg, silver -7%, pink 80%, skyblue 127%);的效果是…
閱讀更多...
numpy——stack

numpy——stack

np.stack(array,axis,outNone)&#xff0c;函數原型。 其中最重要是的這個axis怎么理解的。 舉例說明&#xff1a;arrays [np.random.randn(3, 4) for _ in range(10)] 會生成一個 10 *( 3 * 4 )的矩陣列表。十個矩陣&#xff0c;每個矩陣是(3 * 4)大小。 首先說明一下axis的映…
閱讀更多...
C# —— 簡單工廠設計模式詳述

C# —— 簡單工廠設計模式詳述

一、基本概念 眾所周知&#xff0c;C#是一種面向對象的語言&#xff0c;而其中封裝&#xff0c;繼承&#xff0c;多態是面向對象的三大重要特征&#xff0c;簡單工廠的設計模式則可以完全體現這些特征。要徹底理解這個模式&#xff0c;必須要先將封裝&#xff08;訪問修飾符的…
閱讀更多...
【計算機視覺】計算機視覺、模式識別、機器學習常用牛人主頁鏈接

【計算機視覺】計算機視覺、模式識別、機器學習常用牛人主頁鏈接

計算機視覺、模式識別、機器學習常用牛人主頁鏈接 牛人主頁&#xff08;主頁有很多論文代碼&#xff09; Serge Belongie at UC San DiegoAntonio Torralba at MITAlexei Ffros at CMUCe Liu at Microsoft Research New EnglandVittorio Ferrari at Univ.of EdinburghKristen G…
閱讀更多...
C# 中的 ConfigurationManager類引用方法

C# 中的 ConfigurationManager類引用方法

c#添加了Configuration;后&#xff0c;竟然找不到 ConfigurationManager 這個類&#xff0c;后來才發現&#xff1a;雖然引用了using System.Configuration;這個包&#xff0c;但是還是不行的。 后來終于找到一個解決方法&#xff0c;就是在解決方案資源管理器里找到類文件選擇…
閱讀更多...
機器學習——支持向量機SVM之python實現簡單實例一（含數據預處理、交叉驗證、參數優化等）

機器學習——支持向量機SVM之python實現簡單實例一（含數據預處理、交叉驗證、參數優化等）

目錄 一、SVM理論 二、numpy的相關函數介紹 三、python實現之準備 1、數據集的下載
閱讀更多...
工業相機常用類型詳述

工業相機常用類型詳述

一、工業相機定義 工業相機是應用于工業領域、安防和交通等對相機要求較高領域的攝像機&#xff0c;功能就是將光信號轉變成有序的電信號&#xff0c;此信號經過模數轉換為數字信號&#xff0c;然后傳遞給圖像處理器。與一般的家用相機相比&#xff0c;其具有更高的穩定性能&a…
閱讀更多...
機器學習——SVM之python實現數據樣本標準化和歸一化

機器學習——SVM之python實現數據樣本標準化和歸一化

目錄 一、標準化和歸一化的目的 1、標準化 2、歸一化 二、標準化和歸一化常用的理論公式 1、歸一化 2、標準化 三、python實現SVM樣本數據標準化和歸一化 1、標準化 2、歸一化 本文源代碼&#xff1a;《機器學習——支持向量機SVM之python實現簡單實例一》 一、標準化…
閱讀更多...
[黑群暉經典教程] 一步一步建立自己的黑群暉

[黑群暉經典教程] 一步一步建立自己的黑群暉

【申明&#xff1a;本文并非本人所作&#xff0c;為內部網絡中一位大神所寫&#xff0c;個人覺得寫得很好&#xff0c;遂原文搬了過來&#xff0c;如有侵犯原作者的權利&#xff0c;請及時與我聯系】 PS:有好幾個兄弟覺得我擅自轉發&#xff0c;不是很妥。解釋一下&#xff1a;…
閱讀更多...
Java為什么能跨平臺運行

Java為什么能跨平臺運行

因為java程序編譯之后的代碼不是能被硬件系統直接運行的代碼&#xff0c;而是一種“中間碼”--字節碼。不同的硬件平臺上裝有不同的java虛擬機&#xff08;JVM&#xff09;&#xff0c;由JVM來把字節碼再翻譯成所對應的硬件平臺能夠執行的代碼&#xff0c;因此java可以跨平臺運…
閱讀更多...
C++和Opencv4.5 實現全景圖像拼接

C++和Opencv4.5 實現全景圖像拼接

前言 最近剛下了最新版的opencv4.5&#xff0c;急不可待的試下操作&#xff0c;就用了opencv自帶的Stitcher類拼接下圖像&#xff0c;結果傻眼了&#xff0c;程序顯示Stitcher沒有createDefault成員&#xff0c;看了好久&#xff0c;終于找到了解決方法。 Stitcher原理 Stit…
閱讀更多...
機器學習——python實現SVM模型w,b的查看

機器學習——python實現SVM模型w,b的查看

基于源代碼&#xff1a;《機器學習——支持向量機SVM之python實現簡單實例一》進行講解 1、線性模型 這里以二特征三類&#xff0c;一對多策略為案例 kernel “linear”&#xff1a;線性核&#xff0c;參數有w&#xff0c;b 線性模型的決策邊界是&#xff1a;w0iTx0i w1i…
閱讀更多...
最新文章

Copyright @ 2022~2023