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实现能够编辑的表格这个 ...
随机推荐
- 的Linq未提交之前插入/修改时重新查询不准确问题
来园子已经两年了,每次都是看,这次咱也写一次. 说一下今天遇到的Linq问题: 每一次插入流水表时,都需要查找表中最大的流水号+1,并且将该流水号返回,但是在同一个SubmitChange之内插入多条 ...
- Java8新特性之Optional
空指针异常一直是困扰Java程序员的问题,也是我们必须要考虑的.当业务代码中充满了if else判断null 的时候程序变得不再优雅,在Java8中提供了Optional类为我们解决NullPoint ...
- gdb 断点调试Ｃ程序
最近在看CS50的公开课,视频中david用gdb调试C,我跟着敲,一样的代码但是却显示效果与他不一样.因为他的程序是编译好了的,所以也没看到编译步骤,后来回想一下他make 文件名 显示的代码中有一 ...
- Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？
转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...
- 原生JS---4
原生js学习笔记4——BOM操作 什么是DOM DOM:Do 1. js的组成部分 2. 一套标准,目前有DOM1和DOM2这两种标准 我们可以使用DOM操作来操作页面中的元素. DOM节点 子节点 ...
- c语言实现迪杰斯特拉算法（邻接表）
储存结构,结构体的定义:(权值w用于表示两点间路径的花费) typedef int Status; typedef struct ENode//图的邻接表定义 { int adjVex;//任意顶点u ...
- SQLServer XXX IS NOT NULL
SQLServer中不能使用像Java和C#中的 XXX!=null 这种用法, 使用上面的用法返回值永远是False False False 正确的用法应该是--> XXXis not ...
- vue-pdf的使用方法及解决在线打印预览乱码
最近在用vue做项目的时候,页面中需要展示后端返回的PDF文件,于是便用到了vue-pdf,其使用方法为 : npm install --save vue-pdf 官网地址:https://www.n ...
- AI：IPPR的数学表示-CNN结构进化（Alex、ZF、Inception、Res、InceptionRes）
前言: 文章:CNN的结构分析-------: 文章:历年ImageNet冠军模型网络结构解析-------: 文章:GoogleLeNet系列解读-------: 文章:DNN结构演进Histor ...
- ASP.NET MVC5 网站开发实践(一)
一.开发环境 1.开发环境: Visual Studio 2013 2.数据库:Sql Server 2012 3.代码管理:TFS(微软免费提供的) 说明:VS2013与vs2012感觉变化不大,我 ...