Extjs之Grid详细
Grid的展示选中排序选中事件。
附图:
代码:
<script type="text/javascript">Ext.onReady(function () {var store = Ext.create('Ext.data.Store', {fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObjectName", "cataeditstatusName","cataPublishName", "cataEndDate", "holyUpdateTime", "catapushtime"],pageSize: 20, //页容量5条数据//是否在服务端排序 (true的话,在客户端就不能排序)remoteSort: false,remoteFilter: true,proxy: {type: 'ajax',url: '/Tools/106.ashx?method=getAllCatalog',reader: { //这里的reader为数据存储组织的地方,下面的配置是为json格式的数据,例如:[{"total":50,"rows":[{"a":"3","b":"4"}]}]type: 'json', //返回数据类型为json格式root: 'rows', //数据totalProperty: 'total' //数据总条数}},sorters: [{//排序字段。property: 'ordeId',//排序类型,默认为 ASC direction: 'desc'}],autoLoad: true //即时加载数据});var grid = Ext.create('Ext.grid.Panel', {renderTo: Ext.getBody(),store: store,height: 400,width:800,selModel: { selType: 'checkboxmodel' }, //选择框columns: [ { text: '型录ID', dataIndex: 'cataId', align: 'left', maxWidth: 80 },{ text: '型录编号', dataIndex: 'cataNo', maxWidth: 120 },{ text: '助记标题', dataIndex: 'cataTitle', align: 'left', minWidth: 80 },{ text: '应用对象', dataIndex: 'cataObjectName', maxWidth: 80, align: 'left' }, { text: '发布状态', dataIndex: 'cataPublishName', maxWidth: 80 },{ text: '活动截止日期', dataIndex: 'cataEndDate',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s' },{ text: '更新时间', dataIndex: 'holyUpdateTime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'},{ text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}],bbar: [{xtype: 'pagingtoolbar',store: store,displayMsg: '显示 {0} - {1} 条,共计 {2} 条',emptyMsg: "没有数据",beforePageText: "当前页",afterPageText: "共{0}页",displayInfo: true }],listeners: { 'itemclick': function (view, record, item, index, e) {Ext.MessageBox.alert("标题",record.data.cataId);}},tbar:[{text:'新增',iconCls:'a_add',handler:showAlert},"-",{text:'编辑',iconCls:'a_edit2',handler:showAlert},"-",{text:'停用/启用',iconCls:'a_lock'},"-",{text:'发布',iconCls:'a_upload',handler:showAlert},"-",{text:'组织型录',iconCls:'a_edit',handler:showAlert},"-",{text:'管理商品',iconCls:'a_edit',handler:showAlert},"-","->",{ iconCls:"a_search",text:"搜索",handler:showAlert}], });function showAlert (){var selectedData=grid.getSelectionModel().getSelection()[0].data;Ext.MessageBox.alert("标题",selectedData.cataId);}}); </script>
注释:
一、gridPanel几个必须配置的项:store(数据格式组织、存储),columns(展示到页面的格式,数据组织)。
1、store里面有个fields配置,为需要的数据字段,跟读取到的数据(本地,或远程获取的)字段对应。
2、columns中的text为grid展示的列标题,dataIndex绑定字段与store中fields配置字段的对应。
二、数据获取
proxy: {type: 'ajax',url: '/Tools/106.ashx?method=getAllCatalog',reader: { //这里的reader为数据存储组织的地方,下面的配置是为json格式的数据,例如:[{"total":50,"rows":[{"a":"3","b":"4"}]}]type: 'json', //返回数据类型为json格式root: 'rows', //数据totalProperty: 'total' //数据总条数}},sorters: [{//排序字段。property: 'ordeId',//排序类型,默认为 ASC direction: 'desc'}],
1、传递的参数为:method=getAllCatalog&page=1&start=0&limit=20&sort=[{"property":"ordeId","direction":"desc"}]
2、传回数据为:{"rows":[{"rowNum":"1","cataId":"852","cataNo":"10000809","cataTitle":"","cataObject":"4","cataObjectName":"华悦购物","cataType":"1","cataTypeName":"默认","cataeditstatus":"2","cataeditstatusName":"待提交","cataPublishStatus":"2","cataPublishName":"已发布","cataRemark":"banner广告","cataObjectType":"2","apptypename":"销售","cataEndDate":"2014-09-27","holyCreateTime":"2013-11-24 16:02:04","holyUpdateTime":"","catapushtime":"","holyCreateUser":"lhcs"}]}
三、分页(不带搜索条件):
bbar: [{xtype: 'pagingtoolbar',store: store,displayMsg: '显示 {0} - {1} 条,共计 {2} 条',emptyMsg: "没有数据",beforePageText: "当前页",afterPageText: "共{0}页",displayInfo: true }]
1、store为grid的store
2、store中的remoteSort配置为true。
3、传递参数为:你点的列标题绑定字段+desc/asc,组织格式为:method=getAllCatalog&page=1&start=0&limit=20&sort:[{"property":"cataNo","direction":"DESC"}]
四、选中行
1、选中行点击事件
listeners: { 'itemclick': function (view, record, item, index, e) {Ext.MessageBox.alert("标题",record.data.cataId);}
2、外部操作选中行
function showAlert (){var selectedData=grid.getSelectionModel().getSelection()[0].data;Ext.MessageBox.alert("标题",selectedData.cataId);}
3、外部操作多行选中
var rows = grid.getView().getSelectionModel().getSelection();var msg = "";for (var i = 0; i < rows.length; i++) {msg = msg + rows[i].get('cataId') + ',';}
五、列数据格式
1、时间
{ text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
2、金钱
{ text: '订单金额', dataIndex: 'oprice',align:'right', xtype:'numbercolumn',format:'0,000.00'},
3、多字段组合
{ text: '毛利率', dataIndex: 'sPrice', minWidth: 20,renderer: function(v, m, r){var puprsaleprice = r.get("sPrice") * r.get("puprsalepricetax")/(1+r.get("puprsalepricetax"));var puprtaxprice = r.get("cPrice") * r.get("puprtax")/(1+r.get("puprtax")); //var maoprice = (r.get("sprice") - r.get("cprice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sprice") * r.get("fpoint"))/r.get("sprice"); var maoprice = (r.get("sPrice") - r.get("cPrice") - (puprsaleprice-puprtaxprice)- r.get("puprinvoiceprice") - r.get("pfreight") - r.get("sPrice") * r.get("fpoint"))/(r.get("sPrice") / (1+r.get("puprsalepricetax"))); return (maoprice * 100).toFixed(2) + '%';}},
六、Grid数据刷新
1、不传参刷新当前数据
store.load();
2、传参刷新数据
store.load({ params: { Id: 123} });
Grid编辑
附图:
代码:
<!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"><title></title><link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" /><script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script><script type="text/javascript"> Ext.onReady(function () { var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式clicksToMoveEditor : 2, //双击编辑 整行修改autoCancel : false,saveBtnText:'确定',cancelBtnText:'取消',errorsText:'错误',dirtyText:'你要确认或取消更改'});var catalogEditProductStore = Ext.create('Ext.data.Store', {fields: ["prcaId","prodId","prcaImg","prodNo","prcaOrderBy", "prodNameZh", "prcaTitle", "prcaPrice", "prcaSalesPrice", "prcaDeductPoint", "prcaSalePoint","prcaStorage","prcaIndateStart","prcaIndateEnd","prcaFreight","prcaRedirectUrl","prcaProdTotal","prcaIntegral"],pageSize: 10, //页容量5条数据//是否在服务端排序 (true的话,在客户端就不能排序)remoteSort: false,remoteFilter: true,proxy: {type: 'ajax',url: '/Tools/106EditProduct.ashx?method=getCatalogProductByID&id=1797&cataId=888',reader: {type: 'json', //返回数据类型为json格式root: 'rows', //数据(json格式)totalProperty: 'total' //数据总条数}},sorters: [{//排序字段。property: 'prodNo',//排序类型,默认为 ASC direction: 'desc'}],autoLoad: true //即时加载数据});//该型录下的选中编辑的商品var catalogEditProduct = Ext.create("Ext.grid.Panel", { store: catalogEditProductStore,multiSelect: true, //支持多选height:400,width:800,selModel: { selType: 'checkboxmodel' },columns: [{ text: '型录商品ID', dataIndex: 'prcaId', align: 'left', width: 50 },{ text: '商品ID', dataIndex: 'prodId', align: 'left', width: 50 },{ text: '商品编号', dataIndex: 'prodNo', align: 'left', width: 80 },{header: "名称",width: 200,dataIndex: 'prodNameZh',align: 'left',renderer: function (value, metaData, record) {//自定义列值组合var path = record.get("prcaImg");var txt = value;if (path != "" && path != null) {txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'+ path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';}return txt;},sortable: true},{ text: '排序', dataIndex: 'prcaOrderBy', minWidth: 20,editor: { xtype: 'numberfield' } },{ text: '商品标题', dataIndex: 'prcaTitle',align: 'left', minWidth: 300,editor: { xtype: 'textfield' } },{ text: '市场价', dataIndex: 'prcaPrice', minWidth: 20,editor: { xtype: 'numberfield' } },{ text: '售价', dataIndex: 'prcaSalesPrice', minWidth: 40,editor: { xtype: 'numberfield' } },{ text: '可获金币', dataIndex: 'prcaDeductPoint', minWidth: 30,editor: { xtype: 'numberfield' } },{ text: '购买使用金币', dataIndex: 'prcaSalePoint', minWidth: 20,editor: { xtype: 'numberfield' } },{ text: '库存', dataIndex: 'prcaStorage', minWidth: 40,editor: { xtype: 'numberfield' } },{ text: '起始日期', dataIndex: 'prcaIndateStart', minWidth: 40,editor: { xtype: 'datefield'} },{ text: '结束日期', dataIndex: 'prcaIndateEnd', minWidth: 40,editor: { xtype: 'datefield'} },{ text: '含运费', dataIndex: 'prcaFreight', minWidth: 40,editor: { xtype: 'numberfield' } },{ text: '跳转地址', dataIndex: 'prcaRedirectUrl', minWidth: 40,editor: { xtype: 'textfield' } },{ text: '总件数(团购专用)', dataIndex: 'prcaProdTotal', minWidth: 40,editor: { xtype: 'numberfield' } },{ text: '已订购人数(团购专用)', dataIndex: 'prcaIntegral', minWidth: 40,editor: { xtype: 'numberfield' } },],bbar: [{xtype: 'pagingtoolbar',store: catalogEditProductStore,displayMsg: '显示 {0} - {1} 条,共计 {2} 条',emptyMsg: "没有数据",beforePageText: "当前页",afterPageText: "共{0}页",displayInfo: true
// listeners: {
// beforechange: function (ts, page, eOpts) {//分页 加载查询数据
// Ext.apply(catalogEditProductStore.proxy.extraParams,CatalogTtree.getSelectionModel().getSelection()[0].data);
// }
// }}],tbar: [{ text: '保存', iconCls: 'a_edit2' ,handler:showSelectedOptions}, "-",{ text: '删除', iconCls: 'a_delete',handler:showSelectedOptions }, "-",{ text: '上传主图', iconCls: 'a_upload',handler:showSelectedOptions }, "-",{ text: '刷新', iconCls: 'a_refresh',handler:showSelectedOptions }, "-",{text:'添加提报商品',iconCls:'a_add',handler:showSelectedOptions},"-"],plugins : [RowEditing], //绑定编辑对象 });catalogEditProduct.getView().on("render",function(view){ view.tip=Ext.create('Ext.tip.ToolTip',{ target:view.el, delegate:view.itemSelector, trackMouse:true, renderTo:Ext.getBody(), listeners:{ beforeshow:function(tip){ var record=view.getRecord(tip.triggerElement); var ucc=record.get("prcaImg").substring(0,1); var html="<div ><img width='300px' src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>"; tip.update(html);} } }); }); var centerPanel = Ext.create("Ext.panel.Panel", {region: 'center',defaults: {autoScroll: true,// autoHeight: true},items: [catalogEditProduct]});new Ext.Viewport({layout: "border",rederTo: Ext.getBody(),defaults: {frame: true},items: [centerPanel]});function showSelectedOptions() {var rows = catalogEditProduct.getView().getSelectionModel().getSelection();var msg = "";for (var i = 0; i < rows.length; i++) {msg = msg + rows[i].get('prcaId') + ',';}Ext.MessageBox.alert("标题", msg);}});</script>
</head>
<body>
</body>
</html>
注释:
1、标记变色
{header: "名称",width: 200,dataIndex: 'prodNameZh',align: 'left',renderer: function (value, metaData, record) {//自定义列值组合var path = record.get("prcaImg");var txt = value;if (path != "" && path != null) {txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'+ path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';}return txt;},sortable: true},
附图:
2、Grid行tip提示
catalogEditProduct.getView().on("render",function(view){ view.tip=Ext.create('Ext.tip.ToolTip',{ target:view.el, delegate:view.itemSelector, trackMouse:true, renderTo:Ext.getBody(), listeners:{ beforeshow:function(tip){ var record=view.getRecord(tip.triggerElement); var ucc=record.get("prcaImg").substring(0,1); var html="<div ><img width='300px' src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>"; tip.update(html);} } }); });
附图:
3、Grid行编辑
var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式clicksToMoveEditor : 2, //双击编辑 整行修改autoCancel : false,saveBtnText:'确定',cancelBtnText:'取消',errorsText:'错误',dirtyText:'你要确认或取消更改'});
首先上面那段代码加上,然后columns里面配置editor(详见上面代码),最后在 Grid中配置plugins : [RowEditing]。。
Extjs之Grid详细相关推荐
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
- EXTJS 中grid 动态增加列的方法
总结:gridpanel动态生成列的核心就是在拼凑columnmodel和后台返回store的数据对的上 1-首先动态拼凑columnmodel 前端拼凑例子 me.columns.push({tex ...
- Extjs 从grid中导出Excel表格。后台为C#(绝对好用)
一.在程序中增加附件中js文件的引用: 二.定义一个导出Excel文件的函数: function ExportExcel(gridPanel,config) {if (gridPanel) {var ...
- [转载]ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难...
代码 1 本示例主要使用到了静态数据分页 Ext.data.PagingMemoryProxy组件.Ext.PagingToolbar分页条.viewConfig的getRowClass 方法.列co ...
- extjs4 冻结列_ExtJs4之Grid详细
ExtJs博客前奏 由于这段时间事情比较杂乱,博客就主要以项目中例子来说明编写. ExtJs4中的Grid非常强大,有展示,选中,搜索,排序,编辑,拖拽等基本功能,这篇博客我就这几个功能做写累述. G ...
- Extjs中grid 的ColumnModel 属性配置
http://www.studyofnet.com/news/136.html 本文导读:Ext.grid.ColumnModel 该类用于定义表格的列模型,其配置项是一个由"列定义&quo ...
- Extjs中grid 的ColumnModel 属性配置和常用方法及实例
本文导读:Ext.grid.ColumnModel 该类用于定义表格的列模型,其配置项是一个由"列定义"组成的数组,还可以是JSON组成的对象.其中也定义很多操作列的属性.方法 比 ...
- 64. Extjs中grid 的ColumnModel 属性配置
转自:https://blog.csdn.net/u011530389/article/details/45821945 本文导读:Ext.grid.ColumnModel 该类用于定义表格的列模型, ...
- 45. ExtJS ComboBox 下拉列表详细用法
转自:https://blog.csdn.net/luckypeng/article/details/46496151 ComboBox 是ExtJS中经常用到的控件,今天我们来讲一下它的一些用法. ...
最新文章
- ubuntu vim中文乱码问题
- 一篇文章搞懂fof好友推荐案例
- G面经prepare: Reorder String to make duplicates not consecutive
- matlab在linux下面的相对路径的写法
- 使用命令行加载 jMeter 自定义配置文件里的自定义 property
- 从 TFS 迁移源代码到 git
- sqlilabs 5
- 如何无信用卡申请谷歌云
- AD09铺铜 (画完PCB后改线与铺铜冲突)
- SLM4054独立线性锂电池充电器的芯片的学习
- js获取ip地址的私有地址 或者公有地址
- vue中computer和watch的区别和使用
- 物联网嵌入式开发人员面临的5大挑战
- linux替换屏幕保护进程,有没有一个体面的方式来阻止linux中的屏幕保护程序?...
- 解决fileReader读取文件乱码
- 黑苹果适合什么用途?_黑苹果系统,Ozmosis和四叶草、变色龙相比有什么区别和优势?...
- 解决:teamview持续很久显示连接未就绪
- Element-ui组ICON图标
- Javascript对象相加
- 2019年的最后一天,你会想些啥?
热门文章
- 【解决方案】智慧农场大有可为 SkeyeVSS视频监控系统促进农业高质量发展
- 前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)
- javasocket连续给服务器发送消息,Java通过Socket发送和接收多条消息
- Semantic UI术语
- matlab对象浏览器模块隐,MATLAB 添加自定义的模块到simulink库浏览器
- 【Your Are Real Stewart】五月“啦啦啦”英语总结
- python 使用代理ip爬虫
- Android调试技巧之远程连接adb
- 【三】3D匹配Matching之外形匹配Shape—Based——create_shape_model_3d()算子
- php fieldset,html fieldset标签的用法详解