- 浏览: 133888 次
- 性别:
- 来自: 北京
文章分类
最新评论
一,单元格渲染
单元格是最终显示的数据地方,它是根据列定义信息设置来显示的,主要通过renderer属性来渲染的,可以通过这个属性设置单元格的最终渲染效果。
var cm = new Ext.grid.ColumnModel([
{ header: '编号', dataIndex: 'id' },
{ header: '姓名', dataIndex: 'name' },
{ header: '性别', dataIndex: 'sex',
renderer: function(value) { --通过列的渲染函数来定义
if (value == 'male') {
return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
} else {
return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
}
}
},
{ header: '描述', dataIndex: 'descn' },
{ header: '日期', dataIndex: 'date', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日') }
]);
你也可以把列渲染的函数定义在外面,然后指定给renderer函数。通过这里可以看到为单元格添加图片也就比较容易了,只需要指定相应的
图片标签就可以了,如:
function renderSex(value){
if(value == '男'){
return "<span style='color:red; font-weight:bold;'>男</span><img src='user_male.png' />";
} else {
return "<span style='color:red; font-weight:bold;'>女</span><img src='user_male.png' />";
}
}
其实表格在渲染的时候提供了很多参数,通过它我们可以获取很多有用的信息,下面就是逐一介绍这些参数:
value: 将要显示到单元格的值
cellmeta:单元格的相关属性,主要有id 和 css
record: 单元格所在行的数据对象,如果要获取其他列的数据值,可以通过:record.data["id"] 的方式得到.
rowIndex: 行号
columnIndex: 列号
store: 构造表格时传递的ds。也就是说,表格所有的数据都可以通过store获得。
如:
function(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; -- 注意一定要return这个值。
}
上面的方法把单元格渲染成了一个按钮,通过单击按钮,弹出单元格的信息, 注意最后一定要return 。
二、 给表格的行和列设置颜色
1, 给行设置颜色
本例主要通过指定每一列的颜色的方式,给表格行设置颜色。
<style type="text/css">
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
</style>
Ext.onReady(function() {
var PersonRecord = Ext.data.Record.create([ --创建一行记录
{ name: 'name', type: 'string' },
{ name: 'sex', type: 'int' },
{ name: 'color', type: 'string' }
]);
var data = [ --创建4行数据
['boy', 0, '#FBF8BF'],
['girl', 1, '#99CC99'],
['man', 0, '#F5C0C0'],
['woman', 1, '#FFFFFF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord) --解析数据
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [ --指定列
{ header: 'name', dataIndex: 'name' },
{ header: 'sex', dataInex: 'sex' }
],
autoHeight: true,
renderTo: 'grid',
viewConfig: {
forceFit: true,
enableRowBody: true,
getRowClass: function(record, rowIndex, p, ds) { --主要通过这个函数来渲染行的颜色
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF':
cls = 'yellow-row'
break;
case '#99CC99':
cls = 'green-row'
break;
case '#F5C0C0':
cls = 'red-row'
break;
}
return cls;
}
}
});
});
2.给列设置颜色
function renderMotif(data,cell,record,rowIndex,columnIndex,store){
var value = record.get('color');
cell.attr = "style=background-color:" +value; -- 给列的单元格添加style属性。
return data;
}
这中方式跟单元格渲染方式一样,都是通过renderer属性来设置。
到这里学习了2种方式获取单元格的值:
(1),record.data['id']
(2) record.get('id');
发表评论
-
javaScript实现的 数据库
2014-11-06 17:17 15281、LokiJS LokiJS一个基于J ... -
xss攻击
2013-12-27 11:54 546解决方案与建议: 严格过滤用户所能提交的任何数据,特别是能执 ... -
js技巧
2013-08-02 09:02 1679· 事件源对象 event.srcElement.tagNa ... -
jquery combox实现联动效果
2013-05-18 05:15 668需求方要求 所以就想法实现此效果 经过两个小时的看源码、修改、 ... -
jQuery easyui 1.2.5 window、dialog发送两边请求(转)
2013-05-04 12:02 930jQuery easyui 1.2.5 window、dial ... -
跨域问题
2013-05-01 10:04 748可以采用JQuery的getJSON、get方法以JSONP的 ... -
js的base64
2013-04-11 10:55 707var Base64 = { // private prop ... -
JavaScript实现URL编码
2012-07-10 16:46 923<script language="vbscr ... -
用户访问超时
2012-07-09 17:11 1873用户访问超时 解决两种情况下的用户访问超时。 a)普通ht ... -
jQuery 禁止右键
2012-07-03 14:38 1844用jquery实现你的网站不能右键,很简短的代码: $('b ... -
js技巧
2012-06-12 17:08 7161、jquey查找iframe父页面的标签 $('#id' ... -
jquery easyui -datagrid(悬浮,隐藏)(转)
2012-05-30 16:33 0对于jquery easyui 的datagrid引用碰到了几 ... -
GridView脚注行添加合计,并设置背景图片
2011-09-30 11:00 4087以前在做GridView ... -
ExtJS表格
2011-09-30 10:58 27251. 简单表格控件 (由类Ext.grid.GridPane ... -
ExtJS表格——行号、复选框、选择模型
2011-09-30 10:57 6201一、 设置行号 行号的设置主要问题在于删除某一行后需要重新 ... -
cookie
2011-09-26 10:02 1090/** * * 获取cookie的值 * @para ... -
js结构语句
2011-09-25 11:02 7921 if 条件语句(可嵌套) 2 if....else 条件 ... -
js循环语句
2011-09-25 10:56 17241 for循环结构语句(可以嵌套); 2 for-in 循环 ... -
使用with语句进行对象操作
2011-09-25 10:45 825在js语言中,with语句是一个内容很少的语句,在程序中多次使 ... -
Iframe
2011-09-23 21:14 7731、Iframe子页面调用父页面函数 window.pare ...
相关推荐
canvas 绘制的 vue 表格组件,解决上万行+多列数据渲染问题,集成大部分表格功能
element-ui动态渲染表格
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据。 解决办法: 在render中增加字段: done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find(table...
NULL 博文链接:https://wv1124.iteye.com/blog/473860
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
今日项目中需要用到取table选中列的数据,网上资料发现都不能获取到选中指定列的数据,通过分析测试后总结出以上代码,可以获取选中行/列的数据。取td的数据不是.val(),也不是.html()。经过多次测试才发现是通过...
用于在 vxe-table 表格中适配 ant-design-vue 组件的渲染
注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', ... 4) { // 前4行
通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
解决EasyUIdataGrid列比较多,无数据,列展现不全
主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
一个 3d 场景渲染器,支持 OpenGL 中的交互式查看和使用光线追踪的逼真渲染。 在克莱姆森大学期间,我学到了很多有关计算机图形学的知识。 这是我们部门关注的一件大事。 这样做的结果是,我最终喜欢制作光线追踪器...
XPTable 是一个很好用的数据表格控件,可以高度自定义的ListView控件,允许列复选框、图标、下拉框、数字框、进度条等,并且可以...行、列和单独的单元格均可以被Disabled掉; 第一个和列的ToolTips; 其他更多功能。
某一行某一列的单元格背景或字体颜色变化,某一行某一列的单元格背景或字体颜色变化
第零列 </th> <th align="center"> 第一列 </th> <th align="center"> 第二列 </th> <th align="center"> 第三列 </th> <th align="center"> 第四列 </th> <th align="center"> ...
今天小编就为大家分享一篇对Vue.js实现表格渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
SEO搜索引擎优化:采用prerender预渲染,骨架屏的使用 第一步,下载项目需要的依赖:npm install 第二步,下载prerender-spa-plugin插件:npm install prerender... // 列出需要预渲染的路由 routes: ['/', '/login']