ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧
这里藏的配置确实多。。
慢慢实践吧。
<!DOCTYPE html>
<html>
<head>
<title>ExtJs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<style type="text/css">
#uses the following css:
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
</style>
<script type="text/javascript">
Ext.onReady(function(){
function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){
var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值为: " + value + "\\n" +
"这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +
"这个单元格对应的record是： " + record + ", 一行里的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里： " + store + "， 随便用吧." +
"\")'>"
return str;
}
var sm = new Ext.selection.CheckboxModel({stringSelect: true});
var columns =[
new Ext.grid.RowNumberer(),
{header: '编号', dataIndex: 'id', width:80, sortable: false},
{header: '名称', dataIndex: 'name', editor: {allowBlank: false}, width:180},
{header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},
];
var store = new Ext.data.ArrayStore({
proxy: {
type: 'ajax',
url: 'source.html',
reader: {
type: 'json',
totalProperty: 'totalProperty',
root: 'root',
idProperty: 'id'
}
},
groupField: 'id',
sorter: [{property: 'id', direction: 'ASC'}],
fields: [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]
});
var grid = new Ext.grid.GridPanel({
enableColumnMove: false,
enableColumnResize: true,
stripeRows: true,
autoHeight: true,
loadMask:true,
forceFit: true,
renderTo: 'grid',
store: store,
columns: columns,
selModel: sm,
features: [{ftype: 'grouping'}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
tbar: ['-',{
text: '增加一行',
handler: function(){
var p = {
id: '',
name: '',
descn: '',
};
store.insert(0, p);
}
}, '-', {
text: '删除一行',
handler: function() {
Ext.Msg.confirm('notice', 'are you sure delete?', function(btn){
if(btn == 'yes'){
var sm = grid.getSelectionModel();
var record = sm.getSelection()[0];
store.remove(record);
}
});
}
}, '-'],
bbar: new Ext.PagingToolbar({
pageSize: 30,
store: store,
displayInfo: true,
displayMsg: '显示第{0} 条到 {1}条记录， 一共{2}条',
emptyMsg: '没有记录'
})
});
store.load();
var grid2 = new Ext.grid.PropertyGrid({
title: '属性表格',
autoHeight: true,
width:300,
renderTo: 'grid2',
viewConfig: {
forceFit: true
},
source: {
'名字': '不告诉你',
'创建时间': new Date(),
'是否有效': false,
'版本号': .01,
'描述': '嗯，我也没啥可描述的'
}
});
});
</script>
</head>
<body style="margin: 20px">
<div id='grid' style="width: 800px"></div>
<div id='grid2' style="width: 800px"></div>
</body>
</html>
ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧的更多相关文章
- IOS Runtime属性关联实现表格编辑文本
要实现在表格里编辑文本, 表格让我想到了CollectionView,文本让我想起TextView, 做之前想了好久怎么样来获得编辑的是哪个TextView,要获取对应的IndexPath啊,想着之前 ...
- Extjs中GridPanel的各个属性与方法
1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充 ...
- 编辑 Ext 表格（二）——— 编辑表格元素
一.编辑单元格 Ext 中通过配置表格的属性 plugins 来设置表格是否可编辑, 表格的配置具体如下: var gridTable = Ext.create('Ext.grid.Panel', { ...
- JQuery经典小例子——可编辑的表格
可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
- 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...
- JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入
1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...
- JQuery实战总结一 可编辑的表格
JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...
- 实战Jquery(二)--能够编辑的表格
今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...
- jQuery——能够编辑的表格
版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635 今天学习了利用jQuery实现能够编辑的表格这个 ...
随机推荐
- linux中的alsa工具与Android中的tinyalsa工具【转】
本文转载自:http://blog.csdn.net/luckywang1103/article/details/48053015 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?) ...
- hdoj--5104--Primes Problem(素数打表)
Primes Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- B1303 [CQOI2009] 中位数图 数学
想明白算法之后特别水,因为b只有可能出现一次,所以直接在b的左右找就行了,比他大的为1,比他小的为-1,然后维护前缀和就行了. 假如b有可能出现多次呢?按照这种方法好像也很好办,就是枚举每个点就行了, ...
- bzoj 1034 [ ZJOI 2008 ] 泡泡堂BNB —— 贪心
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1034 一开始想了个很麻烦的贪心做法,对于每个 a[i],找第一个大于它的 b 匹配…… 然后 ...
- nodejs express开发
用NodeJS+Express开发WEB应用---第一篇 大漠穷秋2014-03-28 预热 为了对后面的内容理解更加透彻,推荐首先阅读下面这篇很好的文章: http://www.nodebeginn ...
- C#,Java,MD5加密对等实现
1.c#实现 /* *加密生成MD5 */ public static String MD5(string s) { ', 'a', 'b', 'c', 'd', 'e', 'f' }; MD5 md ...
- lnmp 安装FTP服务 并配置FTP用户
lnmp 默认是不带FTP服务的,需要的童鞋要自行安装.步骤也很简单 一,进入lnmp目录,找到pureftpd.sh 二,直接运行该脚本 ./pureftpd.sh 按任意键开始安装,等待,安装成功 ...
- android 将手机号中间隐藏为星号（*）
){ StringBuilder sb =new StringBuilder(); ; i < pNumber.length(); i++) { char c = pNumber.charAt( ...
- for 循环练习题（2）
一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var x=0.0001; for(var a=1;true;a++){ x=x*2; if (x>8848) { ...
- linux 新添加的硬盘格式化并挂载到目录下
需求: 新增加一块硬盘sdb,将sdb分区,只分一个区,格式化,挂载到目录/ssd下. 1. 查看现在已有的分区状态 # df –l 图中显示,没有看到sdb硬盘 2. 查看服务器安装的硬盘状态( ...