欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext 可编辑的GridPanel

程序员文章站 2022-07-13 23:09:09
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十章:Ext 可编辑的GridPanel</title>
    <link rel="stylesheet" href="src/ext/resources/css/ext-all.css">

    <!--ext-base 必须在ext-all之前引入-->
    <script src="src/ext/ext-base.js"></script>
    <script src="src/ext/ext-all.js"></script>
    <!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
</head>
<body>

<div id="e">

</div>

<script>
    Ext.onReady(function () {
        // 定义用于表示订单的数组
        var data = [
            {
                id: 1,
                date: new Date(),
                name: '李世民',
                address: '*',
                bank: '中国人民银行',
                isFast: false,
            },
            {
                id: 2,
                date: new Date(),
                name: '搜狗五笔',
                address: '北京*',
                bank: '中国建设银行',
                isFast: false,
            },
            {
                id: 3,
                date: new Date(),
                name: '宋江',
                address: '中国古代某处',
                bank: '中国招商银行',
                isFast: true,
            },
            {
                id: 4,
                date: new Date(),
                name: '李宝田',
                address: '湖南省红旗广场',
                bank: '中国工商银行',
                isFast: false,
            },
        ];

        // Proxy
        var proxy = new Ext.data.MemoryProxy(data);

        var Order = Ext.data.Record.create(
            [
                {
                    name: 'ID',
                    type: 'int',
                    mapping: 'id',
                }, // 编号
                {
                    name: 'DATE',
                    type: 'date',
                    mapping: 'date',
                }, // 下单日期
                {
                    name: 'NAME',
                    type: 'string',
                    mapping: 'name',
                }, // 收货人姓名
                {
                    name: 'ADDRESS',
                    type: 'string',
                    mapping: 'address',
                }, // 收货人地址
                {
                    name: 'BANK',
                    type: 'string',
                    mapping: 'bank',
                }, // 交易银行
                {
                    name: 'ISFAST',
                    type: 'boolean',
                    mapping: 'isFast',
                }, // 交易银行
            ],
        );

        // 定义Reader
        var reader = new Ext.data.JsonReader({}, Order);

        // 定义Store
        var store = new Ext.data.Store({
            proxy: proxy,
            reader: reader,
            autoLoad: true, //立即加载
            pruneModifiedRecords: true,  // 每次Store加载后,清除所有修改过的记录信息;
        });


        var banks = [
            ['中国建设银行', '中国建设银行'],
            ['中国银行', '中国银行'],
            ['中国工商银行', '中国工商银行'],
            ['中国人民银行', '中国人民银行'],
        ];

        // 创建一个Ext.grid.CheckboxSelectionModel对象
        var checkBox = new Ext.grid.CheckboxSelectionModel();

        // 定义列模型
        var cm = new Ext.grid.ColumnModel([
            checkBox,
            {
                header: '订单编号',
                dataIndex: 'ID',
                width: 60,
                editor: new Ext.grid.GridEditor(new Ext.form.NumberField()),
            },
            {
                header: '下单日期',
                dataIndex: 'DATE',
                width: 140,
                renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                editor: new Ext.grid.GridEditor(new Ext.form.DateField({format: 'Y-m-d'})),
            },
            {
                header: '收货人姓名',
                dataIndex: 'NAME',
                width: 120,
                editor: new Ext.grid.GridEditor(new Ext.form.TextField()),
            },
            {
                header: '收货人地址',
                dataIndex: 'ADDRESS',
                id: 'ADDRESS',
                editor: new Ext.grid.GridEditor(new Ext.form.TextField()),
            },
            {
                header: '交易银行',
                dataIndex: 'BANK',
                width: 120,
                editor: new Ext.grid.GridEditor(
                    new Ext.form.ComboBox({
                        store: new Ext.data.SimpleStore({
                            fields: ['value', 'text'],
                            data: banks,
                        }),
                        displayField: 'text',
                        valueField: 'value',
                        mode: 'local',
                        triggerAction: 'all',
                        readOnly: false,
                        emptyText: '请选择银行',
                    })),
            },
            {
                header: '快递',
                dataIndex: 'ISFAST',
                width: 70,
                renderer: function (v) {
                    return v ? '快递' : '非快递';
                },
                editor: new Ext.grid.GridEditor(new Ext.form.Checkbox()),
            },
        ]);

        // 定义可编辑EditorGridPanel
        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            sm : checkBox,
            autoExpandColumn: 'ADDRESS', // 指定某个列之id,grid就会在这一列自动扩展宽度
            width: 800,
            autoHeight: true,
            renderTo: 'e',
            autoEncode: true, // 提交时是否自动编码
            tbar: [{
                text: '添加一行',
                icon: 'src/ext/resources/images/default/dd/drop-yes.gif',
                cls: 'x-btn-text-icon',
                handler: function () {
                    var initValue = {
                        ID: '',
                        DATE: new Date(),
                        NAME: '',
                        ADDRESS: '',
                        BANK: '',
                        ISFAST: false,
                    };
                    var order = new Order(initValue);
                    grid.stopEditing();
                    grid.getStore().add(order);

                    // 设置脏数据,
                    order.dirty = true;
                    // 只要一个字段值修改了,该行的所有值都设置成脏标记
                    order.modified = initValue;
                    if (grid.getStore().modified.indexOf(order) == -1) {
                        grid.getStore().modified.push(order);
                    }
                },
            }, {
                text: '删除一行',
                icon: 'src/ext/resources/images/default/dd/drop-no.gif',
                cls: 'x-btn-text-icon',
                handler: function () {
                    var rsm = grid.getSelectionModel();

                    if (rsm.hasSelection()) {
                        Ext.Msg.confirm('提示', '真的要删除选中的行吗?', function (btn) {
                            if (btn == 'yes') {
                                var view = grid.getView();
                                var store = grid.getStore();
                                for (var i = view.getRows().length - 1; i >= 0; i--) {
                                    if (rsm.isSelected(i)) {
                                        store.remove(store.getAt(i));
                                    }
                                }
                                view.refresh()
                            }
                        });
                    } else {
                        Ext.Msg.alert('错误', '请先选择删除的行,谢谢!');
                    }
                },
            }, '-', {
                text: '保持',
                icon: 'src/ext/resources/images/default/dd/drop-add.gif',
                cls: 'x-btn-text-icon',
                handler: function () {
                    var store = grid.getStore();
                    // 得到修改过的Recored的集合
                    var modified = store.modified.slice(0);
                    // 将数据放到另一个数据中
                    var jsonArray = [];
                    Ext.each(modified, function (m) {
                        // 读取当前被修改的记录的地址
                        console.log(m.data.ADDRESS);
                        jsonArray.push(m.data);
                    });

                    var r = checkBlank(modified);
                    if (!r) {
                        return;
                    } else {
                        // 通过ajax请求将修改的记录发送到服务器,最终影数据库
                        Ext.Ajax.request({
                            method: 'post', // 最好不要用get请求
                            url: '../EditGirdServlet',
                            params: {
                                data: Ext.util.JSON.encode(jsonArray),
                            },
                            success: function (response, config) {
                                var json = Ext.util.JSON.decode(response.responseText);
                                // grid.getStore.reload();
                                Ext.Msg.alert('提交成功', json.msg);
                            },
                        });
                    }
                },
            }],
        });

        // 删除一行时,同步数据库
        grid.getStore().on('remove', function (s, record, index) {
            // 因为Servlet只处理数组,所以先变成数组
            var jsonArray = [record.data];

            if (record.data.ID != '') {
                Ext.Ajax.request({
                    method: 'post',
                    url: '../EditGirdServlet',
                    params: {
                        data: Ext.util.JSON.encode(jsonArray),
                        action: 'delete',
                    },
                    success: function (response, config) {
                        var msg = Ext.util.JSON.decode(response.responseText);
                        // grid.getStore().reload()
                        Ext.Msg.alert('', msg.msg);
                    },
                });
            }
        });

        // 验证是否输入的数据是否有效
        var checkBlank = function (modified) {
            var result = true;
            Ext.each(modified, function (record) {
                var keys = record.fields.keys; // 获取Record 的所有名称
                Ext.each(keys, function (name) {
                    // 根据名称获取对应的值
                    var value = record.data[name];
                    // 找出指定名称所在的列索引
                    var colIndex = cm.findColumnIndex(name);
                    // var rowIndex = grid.getStore().indexOfId(record.id);

                    // 根据行列索引找出组件编辑器
                    var editor = cm.getCellEditor(colIndex).field;
                    // 验证值是否合法
                    var r = editor.validateValue(value);
                    if (!r) {
                        Ext.Msg.alert('验证', '对不起,您输入的数据非法');
                        result = false;
                        return;
                    }
                });
            });
            return result
        };
    });


</script>

</body>
</html>