Ext Grid 行变色，grid值修改，列变色，删除行。

最新推荐文章于 2020-12-22 18:44:43 发布

huoyunshen

最新推荐文章于 2020-12-22 18:44:43 发布

阅读量315

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/huoyunshen/article/details/83981965

版权

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Grid Plugins Example</title>

<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>

<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(../shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../shared/icons/save.gif) !important;
}
.x-grid3-row-alt {
background-image:none;
background-color:#F4FAFF;
}
</style>
</head>
<body>
<div id="grid-div" style="margin-top:100px;" ></div>
</body>
<script>
Ext.onReady(function(){

Ext.QuickTips.init();
var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

var sm2 = new xg.CheckboxSelectionModel({ // 全选
listeners: {
selectionchange: function(sm) {
if (sm.getCount()) {
grid4.removeButton.enable();
} else {
grid4.removeButton.disable();
}
}
}
});

var grid4 = new xg.GridPanel({
id:'button-grid',
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
sm2,
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, css : 'background: #FF0000;', dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
sm: sm2,

viewConfig: {
forceFit:true
},
columnLines: true,

// inline buttons
buttons: [{text:'Save',
handler:function(){
Ext.MessageBox.show({
title: '提示' ,
msg: '你点击了我！' ,
buttons: Ext.MessageBox.OK ,
fn: function(){Ext.MessageBox.alert("ssss","fffsss")} ,
icon: Ext.MessageBox.INFO
});
}},{text:'Cancel'}],
buttonAlign:'center',

// inline toolbars
tbar:[{
text:'AddsssSomething',
tooltip:'Add a new row',
iconCls:'add',
ref:'../addButton',
handler:function(){
Ext.MessageBox.alert("测试","添加");
}
},'-',{
text:'Removesss',
tooltip:'Remove the selected item',
iconCls:'remove',

// Place a reference in the GridPanel
ref: '../removeButton',
handler:function(){
Ext.MessageBox.confirm("删除","您确定要删除吗?",showResult)
},
disabled: true
}, '-', {
text:'Moidfy',
tooltip:'Modify the selected item',
iconCls:'option',
handler:function(){
var cell=grid4.getSelectionModel().getSelections();
if(cell==null||cell.length<1){
Ext.MessageBox.alert("温馨提示","请您选择要修改的选项");
return false;
}
Ext.MessageBox.confirm("修改","您确定要修改吗？",modifyResult)
}
}],
stripeRows: true, // 实现斑马线，行换色。
width:600,
height:300,
frame:true,
title:'Support for standard Panel features such as framing, buttons and toolbars',
iconCls:'icon-grid',
renderTo: 'grid-div'
});

function showResult(btn){
var cell=grid4.getSelectionModel().getSelections();

if(btn=="yes"){
var store=grid4.getStore();
for(var i=0;i<cell.length;i++){
store.remove(cell[i])
}
}
}

function modifyResult(btn){
var cell=grid4.getSelectionModel().getSelections();
if(btn=="yes"){
for(var i=0;i<cell.length;i++){
cell[i].set('company',i);
cell[i].commit();
}
}
}
});

// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing']
];

</script>
</html>

说明：1，x-grid3-row-alt {
background-image:none;
background-color:#F4FAFF;
}

此代码是设置斑马线行颜色。

2，css : 'background: #FF0000;'

此代码是设置列颜色。

3，var cell=grid4.getSelectionModel().getSelections();
if(btn=="yes"){
for(var i=0;i<cell.length;i++){
cell[i].set('company',i); // 修改company的值
cell[i].commit();
}
}

此代码是实现值修改。

4， var store=grid4.getStore(); // 删除选中的行
for(var i=0;i<cell.length;i++){
store.remove(cell[i])
}

此代码是实现删除选中的行。

huoyunshen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext Grid 行变色，grid值修改，列变色，删除行。

html>Grid Plugins Example body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(../shared/icon...
复制链接

扫一扫