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实现能够编辑的表格这个 ...
随机推荐
- ledisDB底层实现——本质上就是用leveldb这样的底层存储，和ssdb一样，meta里存的是hash、list等的元数据
Hash hash可以算是一种两级kv,首先通过key找到一个hash对象,然后再通过field找到或者设置相应的值. 在ledisdb里面,我们需要将key跟field关联成一个key,用来存放或者 ...
- java.util.concurrent常用类（CountDownLatch，Semaphore，CyclicBarrier，Future）
CyclicBarrier CyclicBarrier是用来一个关卡来阻挡住所有线程,等所有线程全部执行到关卡处时,再统一执行下一步操作.假设一个场景:每个线程代表一个跑步运动员,当运动员都准备好后, ...
- cocos creator制作微信小游戏
2019-05-30 22:11:47 基础: javaScript基础 https://www.bilibili.com/video/av34087791?from=search&sei ...
- Laravel5.1学习笔记5 请求
HTTP 请求 #取得请求实例 #基本的请求信息 #PSR-7 请求 #取出输入数据 #旧的输入 #Cookies #文件 #取得请求实例(此部分文档5.1完全重写,注意) 要通过依赖注入获取当前HT ...
- 解决Latex复制到公众号可能报“图片粘贴失败”的问题
前几天出了个版本,还发了篇“Md2All,让公众号完美显示Latex数学公式”的文章,发完后,心里还是不太爽的,因为那个版本还是遗留了一个问题:当把Latex公式转换为本地图片,再复制到公众号时,有可 ...
- （转）i686只是cpu的指令等级,包括32bit和64bit
i代表intel系列的cpu 386 几乎适用于所有的 x86 平台,不论是旧的 pentum 或者是新的 pentum-IV 与 K7 系列的 CPU等等,都可以正常的工作! 那个 i 指的是 In ...
- MYSQL 45道练习题
学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表(一)~表(四)所示.用S ...
- 【Oracle】恢复重做日志组
我们在Oracle的日常运维中,有可能会遇到重做日志组丢失的情况.下面我将模拟丢失不同状态的日志组,并分别给出解决办法: 重做日志有以下几种状态,如下: - CURRENT:此状态表示正在被 LGW ...
- 分布式机器学习框架：MxNet
MxNet官网: http://mxnet.readthedocs.io/en/latest/ 前言: caffe是很优秀的dl平台.影响了后面很多相关框架. cxxnet借鉴了很多caffe的思想. ...
- SLAM: Ubuntu14.04_Kylin安装ROS-Indigo
参考连接:ROS-Indigo版在Ubuntu上的安装第一步: 软件源配置 1. 增加下载源(增加ubuntu版的ros数据仓库,即下载源)(通用指令适合任何版本的ros) sudo sh -c 'e ...