-
ext grid 的每行最后一列添加 按钮
- var sm = new Ext.grid.CheckboxSelectionModel();
- var cm = new Ext.grid.ColumnModel([
- new Ext.grid.RowNumberer(),
- sm,
- {header:'编号',dataIndex:'id',sortable:true},
- {header:'性别',dataIndex:'sex',sortable:true ,renderer:renderSex},
- {header:'名称',dataIndex:'name'},
- {header:'描述',dataIndex:'descn',renderer:renderDescn}
- ]);
- var data = [
- ['1','male','name1','descn1'],
- ['2','female','name2','descn2'],
- ['3','male','name3','descn3'],
- ['4','female','name4','descn4'],
- ['5','male','name5','descn5']
- ];
- var ds = new Ext.data.Store({
- proxy: new Ext.data.HttpProxy({url:'http://192.168.0.219/ext-2.1/examples/helloworld/grid.php'}),
- reader: new Ext.data.JsonReader({
- totalProperty: 'totalProperty',
- root: 'root'
- }, [
- {name: 'id'},
- {name: 'sex'},
- {name: 'name'},
- {name: 'descn'}
- ])
- });
- function renderSex(value) {
- if (value == 'male') {
- return"<span style="color:red;font-weight:bold;" mce_style="color:red;font-weight:bold;">男</span>";
- } else {
- return"<span style="color:green;font-weight:bold;" mce_style="color:green;font-weight:bold;">女</span>";
- }
- }
- function renderDescn(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.data["id"] + ",一行的数据都在里边//n" +
- "这是第" + rowIndex + "行//n" +
- "这是第" + columnIndex + "列//n" +
- "这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" +
- "/")'>";
- return str;
- }
-
- var grid = new Ext.grid.GridPanel({
- el: 'grid',
- ds: ds,
- cm: cm,
- sm: sm,
- bbar: new Ext.PagingToolbar({
- pageSize: 10,
- store: ds,
- displayInfo: true,
- displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
- emptyMsg: "没有记录"
- })
- });
- ds.load({params:{start:0,limit:10}});
- grid.render();
-
相关阅读:
Spring3:AOP
Spring2:bean的使用
Spring1:Spring简介、环境搭建、源码下载及导入MyEclipse
Vue.js——60分钟组件快速入门(上篇)
vue父子组件嵌套的时候遇到
Vue.js——60分钟快速入门
[Vue warn]: Cannot find element: #app
关于RabbitMQ以及RabbitMQ和Spring的整合
spring集成多个rabbitMQ
RabbitMQ-从基础到实战(5)— 消息的交换(下)
-
原文地址:https://www.cnblogs.com/ayforver/p/2771606.html
Copyright © 2020-2023
润新知