extjs 数据渲染枚举性别行单元格

最新推荐文章于 2021-02-15 20:18:35 发布

stoneii

最新推荐文章于 2021-02-15 20:18:35 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/stoneii/article/details/84509966

extjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ExtJS框架中的表格组件GridPanel进行定制化显示，包括数据渲染、行渲染和单元格渲染的方法。通过具体实例展示了如何设置不同的样式和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(类的叫法可能不准确，但extjs就是这么写的)

Class Ext.grid.Column类的属性renderer对应函数参数说明可以参考ColumnModel.setRenderer( Number col, Function fn )

setRenderer需要设置行号，参数说明也在此，record参数就是Ext.data.record

Ext.data.record说明

data : Object

An object hash representing the data for this Record. Every field name in the Record definition is represented by a property of that name in this object. Note that unless you specified a field with name "id" in the Record definition, this will not contain an id property.

除了名为id的属性可以直接获取，其他属性都需要通过data获取

也可以直接record.get(属性名)获取；

感觉和jquery的grid相关插件很相似，似乎所有的js表格组件如属性等都很相似。

数据渲染

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){
/*
    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',renderer:function(value){
                if (value == 'male') {
                    return "<span style='color:red;font-weight:bold;'>红男</span>";
                } else {
                    return "<span style='color:green;font-weight:bold;'>绿女</span>";
                }
            }},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
*/
    function renderSex(value) {
        if (value == 'male') {
            return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
        } else {
            return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
        }
    }

    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 + "，一行的数据都在里边\\n" +
            "这是第" + rowIndex + "行\\n" +
            "这是第" + columnIndex + "列\\n" +
            "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
            "\")'>";
        return str;
    }

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',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 store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
    </body>
</html>

行渲染，添加class

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript" src="localXHR.js"></script>
        <title>03.grid</title>
        <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>
        <script type="text/javascript">
Ext.onReady(function(){
    var PersonRecord = Ext.data.Record.create([
        {name: 'name', type: 'string'},
        {name: 'sex', type: 'int'},
        {name: 'color', type: 'string'}
    ]);

    var data = [
        ['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;
            }
        }
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
    </body>
</html>

单元格渲染

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript" src="localXHR.js"></script>
        <title>03.grid</title>
        <script type="text/javascript">
Ext.onReady(function(){

    function renderMotif(data, cell, record, rowIndex, columnIndex, store){
        var value = record.get('color')
         cell.attr = "style=background-color:" + value;
         return data;
    }

    var cm = new Ext.grid.ColumnModel([
        {header: 'name', dataIndex: 'name'},
        {header: 'sex', dataInex: 'sex'},
        {header: 'color', dataIndex: 'color', renderer: renderMotif}
    ]);

    var PersonRecord = Ext.data.Record.create([
        {name: 'name', type: 'string'},
        {name: 'sex', type: 'int'},
        {name: 'color', type: 'string'}
    ]);

    var data = [
        ['boy', 0, '#FBF8BF'],
        ['girl', 1, '#FBF8BF'],
        ['man', 0, '#FBF8BF'],
        ['woman', 1, '#FBF8BF']
    ];

    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,
        cm: cm,
        autoHeight: true,
        renderTo: 'grid',
        viewConfig : {
            forceFit : true
        }
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
    </body>
</html>